vue初始化
2022-04-15 18:18:57 7 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
vue初始化
作者其他创作
大纲/内容
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函数
core/instance/init.js
创建组件实例，初始化其数据、属性、事件等
initEvents(vm) 处理⽗组件传递的事件和回调
initInjections(vm) 获取注⼊数据
initState(vm) 初始化props，methods，data，computed，watch
initProvide(vm) 提供数据注⼊
数据响应式
src\\core\\instance\\state.js
初始化数据，包括props、methods、data、computed和watch
initData核⼼代码是将data数据响应化 font color=\"#c41230\
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 条评论
回复 删除
下一页
