vue2.6原理整理
2022-11-08 21:36:28 0 举报AI智能生成
vue2.6原理整理
作者其他创作
大纲/内容
初始化流程
入口文件 platforms/web/entry-runtime-with-compiler.js
全局API定义 src\core\index.js
全局API实现 src\core\global-api\index.js
vue构造函数 src\core\instance\index.js
initMixin(Vue) src\core\instance\init.js
initLifecycle(vm)
实现了 vm.$parent/$children/$refs/$root 等等
initEvents(vm) 事件监听
vm._event
updateComponentListeners(vm,listenters)
initRender(vm)
vm._c
vm.$createElement
callHook(vm, 'beforeCreate')
已经 初始化一些选项 $solt、$parent、$children
initRender(vm)
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">resolveInject(vm.$options.inject, vm)</span>
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">defineReactive(vm, key, result[key])</span>
initState(vm)
initProps<br>initMethods<br>initData<br>initComputed<br>initWatch<br>
initProvide(vm)
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">vm._provided</span>
callHook(vm, 'created')
这里可以访问组件状态， <br>主要是data、prop、method、computed、watch响应式的完成<br>
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">stateMixin定义$data,$props,$set,$delete,$watch</span><br style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">core/instance/state.js</span>
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">eventsMixin定义$on,$emit,$off,$once</span><br style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">core/instance/events.js</span>
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">lifecycleMixin定义_update,$forceUpdate,$destroy</span><br style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">src/core/instance/lifecycle.js</span>
<span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">renderMixin定义两个实例方法$nextTick和_render</span><br style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">src/core/instance/render.js</span>
数据响应式
observe()返回一个Observer实例<br>core/observer/index.js
Observer对象根据数据类型执行对应的响应化操作<br>core/observer/index.js
defineReactive定义对象属性的getter/setter<br>core/observer/index.js
Dep管理一组Watcher，Dep关联的值更新时通知其管理的Watcher更新<br>core/observer/dep.js
Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被调用<br>src\core\observer\watcher.js
数组响应式
数组方法打补丁，获取Arr原型<br>core\observer\array.js
覆盖数组原型<br>core\observer\index.js
数组响应式的特殊处理<br>core\observer\index.js
依赖收集时特殊处理<br>core\observer\index.js
虚拟DOM
编译器
收藏
收藏
0 条评论
下一页
