vue 源码分析流程图
2022-02-24 11:31:19 0 举报
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
0 条评论
回复 删除
下一页
