美文网首页
Vue初始化流程

Vue初始化流程

作者: key君 | 来源:发表于2019-10-11 11:02 被阅读0次

Vue初始化过程:

_init()初始化数据、状态等 初始化完毕执行
安装patch方法
$mount()  执行mountComponent
$mount() 扩展 把template和el编译render函数
mountComponent()里面定义了updateComponent 并new watcher实例
new watcher会走一次get方法 触发依赖收集 通知watcher.update实际就是走了
updateComponent():先走_render函数把节点转化成vnode传给_update()
_update():最终是把虚拟dom转化为真实dom 里面是一系列新旧节点对比,走patch()打补丁
patch():createElm()创建子组件 执行他们的init方法(里面是解析->优化->生成)
runtime/index:实现$mount
core/index:全局api 
core/instance/index:声明vue构造函数 (init方法)
entry-runtime-with-compiler:覆盖了$mount 
mountComponent:调用updateComponent方法执行渲染和更新,虚拟dom -》真实dom

watcher:
1.是根组件
2.传入的第一个参数是vue实例 而不是vue.component
3.传入的第二个参数是updateComponent函数,
保存为watcher的getter函数,最后会走一次get方法,get方法里面把watcher给dep.target,然后调用getter函数,就是走了updateComponent这个函数,调用updateComponent就会渲染和更新

相关文章

网友评论

      本文标题:Vue初始化流程

      本文链接:https://www.haomeiwen.com/subject/jmzzpctx.html