vue初始化
2022-04-15 18:18:57 7 举报AI智能生成
vue初始化
作者其他创作
大纲/内容
入口
在scripts/config.js找到对应环境的入口文件
初始化流程
⼊⼝ platforms/web/entry-runtime-with-compiler.js
扩展默认$mount⽅法：处理template或el选项( render > template > el )
platforms/web/runtime/index.js
安装web平台特有指令和组件
定义__patch__：补丁函数，执⾏patching算法进⾏更新
定义$mount：挂载vue实例到指定宿主元素（获得dom并替换宿主元素）
core/index.js
初始化全局api ( initGlobalAPI )
实现Vue.use函数
实现Vue.mixin函数
实现Vue.extend函数
注册实现Vue.component/directive/filter
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
core/instance/index.js
Vue构造函数定义 ( 定义Vue实例API )
initMixin(Vue) 实现init函数
stateMixin(Vue) 状态相关api $data,$props,$set,$delete,$watch
eventsMixin(Vue) 事件相关api $on,$once,$off,$emit
lifecycleMixin(Vue) ⽣命周期api _update,$forceUpdate,$destroy
renderMixin(Vue) 渲染api _render,$nextTick
core/instance/init.js
创建组件实例，初始化其数据、属性、事件等
initLifecycle(vm) $parent,$root,$children,$refs
initEvents(vm) 处理⽗组件传递的事件和回调
initRender(vm) $slots,$scopedSlots,_c,$createElement
callHook(vm, 'beforeCreate')
initInjections(vm) 获取注⼊数据
initState(vm) 初始化props，methods，data，computed，watch
initProvide(vm) 提供数据注⼊
callHook(vm, 'created')
数据响应式
src\core\instance\state.js
初始化数据，包括props、methods、data、computed和watch
initData核⼼代码是将data数据响应化 observe(data, true)
core/observer/index.js
observe⽅法返回⼀个Observer实例 （每个对象都伴随一个Observe实例）
core/observer/index.js
Observer对象根据数据类型执⾏对应的响应化操作
defineReactive定义对象属性的getter/setter，getter负责添加依赖，setter负责通知更新
core/observer/dep.js
Dep负责管理⼀组Watcher，包括watcher实例的增删及通知更新
src\core\observer\array.js
为数组原型中的7个可以改变内容的⽅法定义拦截器 （ Observer中覆盖数组原型 ）
0 条评论
下一页
