组件递归创建的疑问

Question

当组件里面包含组件的时候，会不断的递归创建，
我的疑问是：
vm.$node为组件的占位vnode，这句话是啥意思？什么是占位vnode?

vm._vnode为组件的渲染vnode，我理解这个就是当前vm实例的一个virtual dom

Answer 1

ustbhuangyi 2020-06-20 22:33:15

其实叫 “组件 vnode” 和 “子树 vnode” 更好理解。

我来举个例子说明，在父组件 App 中里引入了 Hello 组件：

<template>
 <div class="app">
   <p>This is an app.</p>
   <hello></hello>
 </div>
</template>

 

Hello 组件中是 <div> 标签包裹着一个 <p> 标签：

<template>
 <div class="hello">
   <p>Hello, Vue 3.0!</p>
 </div>
</template>

 

在 App 组件中， <hello> 节点渲染生成的 vnode ，我们称作“组件 vnode”，也就是 vm.$vnode。而 Hello 组件内部整个 DOM 节点对应的 vnode 就是执行 vm._render 渲染生成对应 vnode，我们可以把它称作“子树 vnode”，也就是 vm._vnode。

• 提问者 _小_七_ #1

  当activeInstance是App组件这个vm时，此时就拿hello组件来说，vm.$vnode 与 vm._vnode不都是hello吗？还是说vm.$vnode是 {tag: 'hello' }这样子；而vm._vnode 是 {tag: 'div', {attrs: {class: 'hello'}}, children:[{tag: 'p', null, 'Hello, Vue3.0!'}]}   这样子呢?

• ustbhuangyi 回复 提问者 _小_七_ #2

  是后者

• 提问者 _小_七_ #3

  非常感谢！