Vue源码

Vue源码

初始化流程

入口文件：覆盖$mountplatforms/web/entry-runtime-with-compiler

web运行时代码：实现$mountplatforms/web/runtime/index

$mount

__patch__

全局api定义core/index

core/global-api/index

set

delete

nextTick

...

Vue构造函数core/instance/index

initMixin：实现_init()core/instance/init.js

initLifecycle

initEvents

initRender

beforeCreate

initInjections

initState

initProvide

created

stateMixin

eventsMixin

lifecycleMixin

renderMixin

数据响应式

data的数据响应式src/core/instance/state.js

initState()数据响应式起始

observe()返回ob实例，ob对value做响应式

Observer判断value类型，创建小秘书ob

walk()

defineReactive()数据的访问拦截

observeArray()

Dep依赖管理，变更通知

Watcher和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新

array.js数组的特殊处理，覆盖能够改变数组的7个方法

异步更新

dep.notify()

watcher.update()

queueWatcher()

nextTick()

timerFunc()

watcher.run()

虚拟DOM

src\\core\\observer\\watcher.js执行更新：watcher.run()

src\\core\\instance\\lifecycle.js组件更新：updateComponent()

src\\core\\instance\ender.js计算虚拟dom：_render()

src\\core\\instance\\lifecycle.js更新：_update()，转换vnode为dom

src\\core\\vdom\\patch.js打补丁：patch()，转换实际执行函数，patching，diff

同层比较 patch()

节点创建createElm()

自定义组件创建createComponent

保留节点创建

节点更新 patchVnode()

文本更新

属性更新

重排updateChildren()

编译器

整体流程

src\\platforms\\web\\entry-runtime-with-compiler.js获取渲染函数：compileToFunctions

src\\platforms\\web\\compiler\\index.js编译函数生成

src\\compiler\\index.jscreateCompiler生成

src\\compiler\\create-compiler.jscreateCompilerCreator定义

src\\compiler\\to-function.jscompileToFunctions生成

解析parse

parseHTML()

processIf

processFor

优化optimize

markStatic

markStaticRoots

生成generate

genElement