Vue源码01
2020-10-13 18:16:39 4 举报AI智能生成
vue源码初始化流程和响应式原理分析
作者其他创作
大纲/内容
初始化流程
入口文件：覆盖$mount
platforms/web/entry-runtime-with-compiler
platforms/web/entry-runtime-with-compiler
web运行时代码：实现$mount
platforms/web/runtime/index
platforms/web/runtime/index
$mount
__patch__
全局api定义
core/index
core/index
core/global-api/index
set
delete
nextTick
...
Vue构造函数
core/instance/index
core/instance/index
initMixin：实现_init()
core/instance/init.js
core/instance/init.js
initLifecycle
initEvents
initRender
beforeCreate
initInjections
initState
initProvide
created
stateMixin
$data,$props,$set,$delete,$watch
eventsMixin
$on,$emit,$once,$off
lifecycleMixin
_update,$forceUpdate,$destroy
renderMixin
$nextTick,_render
数据响应式
data的数据响应式
src/core/instance/state.js
src/core/instance/state.js
initState()
数据响应式起始
数据响应式起始
observe()
返回ob实例，ob对value做响应式
返回ob实例，ob对value做响应式
Observer
判断value类型，创建小秘书ob
判断value类型，创建小秘书ob
walk()
defineReactive()
数据的访问拦截
数据的访问拦截
observeArray()
Dep
依赖管理，变更通知
依赖管理，变更通知
两种dep的作用
Watcher
和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新
和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新
dep和watcher之间的映射规则
array.js
数组的特殊处理，覆盖能够改变数组的7个方法
数组的特殊处理，覆盖能够改变数组的7个方法
0 条评论
下一页
