首页  思维导图  详情



 



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函数

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对象根据数据类型执⾏对应的响应化操作

deﬁneReactive定义对象属性的getter/setter，getter负责添加依赖，setter负责通知更新

core/observer/dep.js

Dep负责管理⼀组Watcher，包括watcher实例的增删及通知更新

src\core\observer\array.js

为数组原型中的7个可以改变内容的⽅法定义拦截器（ Observer中覆盖数组原型）

 Collect

Get Started

索引初始化

 Collect

Get Started

Group初始化

 Collect

Get Started

初始化树节点

 Collect

Get Started

ShopExtend初始化





0 条评论

下一页