占位符vnode

来源:3-3 patch(上)

慕用9221383

2018-07-12

听的很乱  到处都是vnode   什么叫占位符vnode呢

写回答

1回答

ustbhuangyi

2018-07-12

举个例子:
App.vue 里

//img.mukewang.com/szimg/5b4735950001fbbb11660462.jpg

这个 hello-world 组件会编译成一个组件 vnode,但这个 vnode 并不会负责真正的 patch 和渲染,它只是一个占位符 vnode。

那么 hello-world 这个组件什么时候渲染呢,在 App.vue 组件执行 patch 的过程中,遇到 hello-world 这个组件 vnode,就会走到 createComponent 逻辑,进而执行这个 vnode 的 init 的钩子函数,然后会实例化这个 hello-world 组件,执行它的 init 过程,并返回这个实例。然后执行这个实例的 $mount 方法,最后会执行这个子组件的 patch 过程,渲染子组件。

5
2
ustbhuangyi
回复
慕用9221383
源码课程确实有难度,如果视频没有听明白的地方,欢迎提问~
2018-07-15
共2条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4992 学习 · 1038 问题

查看课程