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)
resolveInject(vm.$options.inject, vm)
defineReactive(vm, key, result[key])
initState(vm)
initProps
initMethods
initData
initComputed
initWatch
initMethods
initData
initComputed
initWatch
initProvide(vm)
vm._provided
callHook(vm, 'created')
这里可以访问组件状态，
主要是data、prop、method、computed、watch响应式的完成
主要是data、prop、method、computed、watch响应式的完成
stateMixin定义$data,$props,$set,$delete,$watch
core/instance/state.js
core/instance/state.js
eventsMixin定义$on,$emit,$off,$once
core/instance/events.js
core/instance/events.js
lifecycleMixin定义_update,$forceUpdate,$destroy
src/core/instance/lifecycle.js
src/core/instance/lifecycle.js
renderMixin定义两个实例方法$nextTick和_render
src/core/instance/render.js
src/core/instance/render.js
数据响应式
observe()返回一个Observer实例
core/observer/index.js
core/observer/index.js
Observer对象根据数据类型执行对应的响应化操作
core/observer/index.js
core/observer/index.js
defineReactive定义对象属性的getter/setter
core/observer/index.js
core/observer/index.js
Dep管理一组Watcher，Dep关联的值更新时通知其管理的Watcher更新
core/observer/dep.js
core/observer/dep.js
Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被调用
src\core\observer\watcher.js
src\core\observer\watcher.js
数组响应式
数组方法打补丁，获取Arr原型
core\observer\array.js
core\observer\array.js
覆盖数组原型
core\observer\index.js
core\observer\index.js
数组响应式的特殊处理
core\observer\index.js
core\observer\index.js
依赖收集时特殊处理
core\observer\index.js
core\observer\index.js
虚拟DOM
编译器
收藏
收藏
0 条评论
下一页
