Vue源码
2020-10-13 18:16:23 0 举报AI智能生成
vue 2.0源码整体结构，用于学习和教学可帮你快速理清思路
作者其他创作
大纲/内容
初始化流程
入口文件：覆盖$mount
platforms/web/entry-runtime-with-compiler
platforms/web/entry-runtime-with-compiler
web运行时代码：实现$mount
platforms/web/runtime/index
platforms/web/runtime/index
$mount
__patch__
全局api定义
core/index
core/index
core/global-api/index
set
delete
nextTick
...
Vue构造函数
core/instance/index
core/instance/index
initMixin：实现_init()
core/instance/init.js
core/instance/init.js
initLifecycle
initEvents
initRender
beforeCreate
initInjections
initState
initProvide
created
stateMixin
$data,$props,$set,$delete,$watch
eventsMixin
$on,$emit,$once,$off
lifecycleMixin
_update,$forceUpdate,$destroy
renderMixin
$nextTick,_render
数据响应式
data的数据响应式
src/core/instance/state.js
src/core/instance/state.js
initState()
数据响应式起始
数据响应式起始
observe()
返回ob实例，ob对value做响应式
返回ob实例，ob对value做响应式
Observer
判断value类型，创建小秘书ob
判断value类型，创建小秘书ob
walk()
defineReactive()
数据的访问拦截
数据的访问拦截
observeArray()
Dep
依赖管理，变更通知
依赖管理，变更通知
Watcher
和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新
和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新
array.js
数组的特殊处理，覆盖能够改变数组的7个方法
数组的特殊处理，覆盖能够改变数组的7个方法
异步更新
dep.notify()
watcher.update()
queueWatcher()
nextTick()
timerFunc()
watcher.run()
虚拟DOM
src\core\observer\watcher.js
执行更新：watcher.run()
执行更新：watcher.run()
src\core\instance\lifecycle.js
组件更新：updateComponent()
组件更新：updateComponent()
src\core\instance\render.js
计算虚拟dom：_render()
计算虚拟dom：_render()
src\core\instance\lifecycle.js
更新：_update()，转换vnode为dom
更新：_update()，转换vnode为dom
src\core\vdom\patch.js
打补丁：patch()，转换实际执行函数，patching，diff
打补丁：patch()，转换实际执行函数，patching，diff
同层比较 patch()
节点创建createElm()
自定义组件创建createComponent
保留节点创建
节点更新 patchVnode()
文本更新
属性更新
重排updateChildren()
编译器
整体流程
src\platforms\web\entry-runtime-with-compiler.js
获取渲染函数：compileToFunctions
获取渲染函数：compileToFunctions
src\platforms\web\compiler\index.js
编译函数生成
编译函数生成
src\compiler\index.js
createCompiler生成
createCompiler生成
src\compiler\create-compiler.js
createCompilerCreator定义
createCompilerCreator定义
src\compiler\to-function.js
compileToFunctions生成
compileToFunctions生成
解析parse
parseHTML()
processIf
processFor
...
优化optimize
markStatic
markStaticRoots
生成generate
genElement
0 条评论
下一页
