Vue源码分析
2019-08-06 17:31:25 0 举报AI智能生成
vue源码的深入分析(附加关键性说明和源代码)
作者其他创作
大纲/内容
分支主题
分支主题
分支主题
Vue初始化
入口文件：src\platforms\web\entry-runtime-with-compiler.js
web运行时代码：src\platforms\web\runtime\index.js
实现mount
定义__patch__方法: Vue.prototype.__patch__ = inBrowser ? patch : noop
定义全局API：src\core\index.js
Vue实例初始化
initMixin(Vue)，实现vue初始化函数_init
initLifecycle(vm), 初始化 dom全局属性
initEvents(vm),父组件中定义的需要子组件处理的事件
initRender(vm), 初始化 $slots | $scopedSlots | $createElement方法等
callHook(vm, 'beforeCreate')
initInjections(vm), 注入内容的响应化-provider
initState(vm), 执行各种数据状态初始化地方，包括数据响应化等等
initProvide(vm), 为子组件提供数据- inject
stateMixin(Vue)，组件状态相关api如$set,$delete,$watch实现
eventsMixin(Vue)，事件相关api如$on,$emit,$off,$once实现
lifecycleMixin(Vue), 组件声明周期api如_update,$forceUpdate,$destroy实现
renderMixin(Vue), 实现组件渲染函数_render, $nextTick
Vue响应式
具体实现: 在Vue初始化时，会调用initState，它会初始化data，props等，这里着重关注data初始化，
src\core\instance\state.jsinitData核心代码是将data数据响应化
src\core\instance\state.jsinitData核心代码是将data数据响应化
响应式代码： src/core/observer
observe(), 返回Observer的实例
class Observer, 实现object和array数据响应式
walk(), 对象数据的响应式
defineReactive(),
defineReactive定义对象属性的getter/setter，
getter负责添加依赖，setter负责通知更新
defineReactive定义对象属性的getter/setter，
getter负责添加依赖，setter负责通知更新
arrayMethods, 数组的响应式，
src\core\observer\array.js
src\core\observer\array.js
数组数据变化采取的策略是拦截push、pop、splice
等方法执行dep通知
等方法执行dep通知
Dep: core/observer/dep.js,
负责管理一组Watcher，包括watcher实例的增删及通知更新
负责管理一组Watcher，包括watcher实例的增删及通知更新
Watcher: src\core\observer\watcher.js
Watcher解析一个表达式并收集依赖，当数值变化时触发回调函数，常用于$watch API和指令中
每个组件也会有对应的Watcher，数值变化会触发其update函数导致重新渲染
Watcher解析一个表达式并收集依赖，当数值变化时触发回调函数，常用于$watch API和指令中
每个组件也会有对应的Watcher，数值变化会触发其update函数导致重新渲染
异步更新队列: src\core\observer\scheduler.js
Vue虚拟dom
mountComponent(): src\core\instance\lifecycle.js
得到vnode: const vnode = vm._render()
打补丁： vm.__patch__(prevVnode, vnode)
更新： vm._update(vnode, hydrating)
通过createElement得到vnode, _render(),
src\core\instance\render.js
src\core\instance\render.js
createElement(): vnode
src\core\vdom\create-element.js
src\core\vdom\create-element.js
createComponent(): vnode
src\core\vdom\create-component.js
src\core\vdom\create-component.js
class Vnode: src\core\vdom\vnode.js
src\platforms\web\runtime\patch.js
打补丁的逻辑实现：
createPatchFunction():
src\core\vdom\patch.js
createPatchFunction():
src\core\vdom\patch.js
dom原生操作nodeOps： src\platforms\web\runtime\node-ops.js
定义了虚拟dom更新 => dom操作转换方法 modules：
src\platforms\web\runtime\modules\index.js
src\platforms\web\runtime\modules\index.js
pathing算法(diff算法)：通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，
同层级只做三件事：增删改。具体规则是：new VNode不存在就删；old VNode不存在就增；
都存在就比较类型，类型不同直接替换、类型相同执行更新；updateChildren()方法中
同层级只做三件事：增删改。具体规则是：new VNode不存在就删；old VNode不存在就增；
都存在就比较类型，类型不同直接替换、类型相同执行更新；updateChildren()方法中
模板编译
解析（parse）：解析器将模板解析为抽象语法树AST，src\compiler\parser\index.js - parse
优化（optimize）： AST中找出静态子树并打上标记， src\compiler\optimizer.js
合成（generate）：将AST转换成渲染函数中的内容，即代码字符串， src\compiler\codegen\index.js
0 条评论
下一页
