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