vue 源码分析流程图

destory

createElement()h函数

compiler() 编译模版vm.__update() 创建虚拟dom并挂在页面上render() 返回VnodecreatElement h函数 返回Vnodepatch diff新旧vnode并更新到页面上patchVnode 新旧vnode对比updateChildren 双端比较createElm 创建真实节点

将vnode转成真实dom，挂载在html并赋值给vm.$el

beforeMount

oldVnode有Vnode没

删除

oldVnode没Vnode有

添加

都是文本节点

直接覆盖文本节点

给响应数据创建Dep

render()

getter

patchVnode()

collect watcher

vm._render()

是

update

组件被销毁后调用，事件监听会被移除，所有实例都会被销毁，但是data和$el还是可以取到，只会销毁实例，不会清除dom

oldVnode和Vnode是否都有子节点

render函数生成vnode

将data选项中的属性全部转为getter和setter，暴露大部分属性和方法

beforeDestory

真实Dom

create

beforeUpdate

Object.definePropety()

new Vue()

编译模版成render函数

调用vm.$destroy()

patch()

props，methods，data，computed，watch和inject

push

vm._update(vm._render())

setter

vnodevm._update(vnode)

$mount

patch阶段diff算法

touch

否

Watcher

生命周期

编译模版，将template或者el 编译成render函数，调用render函数生成Vnode，如果有el选项，则将el对应的dom赋给vm.$el

创建真实dom

updateChildren()双端比较

确认组件父子关系，将父组件自定义事件给子组件

MVVM

mounted

compile()

Data

Observer

creatElm()

Dep

激活keep-alive组件

notify

重新执行render函数生成vnode转位真实dom，并挂载到html，覆盖vm.$el

render()用于创建Vnode

beforeCreate