vue初始化流程
2023-03-27 21:14:43 1 举报
Vue的初始化流程,是从 new Vue() 开始的,从以下的图中可以看知道。在 new Vue()后,会执行init,再 $mount实现挂载,再到编译compile,生成render函数,接下来是响应式依赖收集,通过pach实现异步更新 。render function 会被转化为Vnode节点,Virtual DOM 是一棵以JavaScript对象(Vnode节点)为基础的树。是对真实DOM的描述。通过patch() 转化为真的 DOM。在数据有变化时,会通过setter -> Watcher -> update 来更新视图。整个Vue的运行机制大致就是这样。Vue 实例从创建到销毁的过程为生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,称之为 Vue 的生命周期。
作者其他创作
大纲/内容
创建子组件实例
invokeInsertHook
data.hook.insert
生成vnode
$mount
new Sub
调用render函数
VNode
dom-diff过程
vm._update(vnode)
创建节点并挂载到页面
vnode转为真实dom
updateComponent
vm._render
mergeOptions
组件vnode
initInternalComponent
createElm
普通vnode
child.$mount
mountComponent(el)
createElement
new Vue()
_init
_isComponent
内置tag或注释节点、文件节点,直接创建元素并插入
initState(vm)
子组件初始化
vnode.data.hook.init
否
是否是组件
是
options合并
createComponent
0 条评论
下一页