为什么所有的组件树中，如果 VNode 是组件或含有组件的 slot，那么 VNode 必须唯一？

Question

老师，请问为什么所有的组件树中，如果 VNode 是组件或含有组件的 slot，那么 VNode 必须唯一？
对于以下例子：

<div id = "app">
		<child-2></child-2>
</div>

Vue.component('child-2', {
	render: h => {
		var p = h('div', '子节点')
		return h('section', [
			p,
			p
		])
	},
})

new Vue({
	el: "#app",
})

最终的渲染结果是这样的：
子节点
子节点

所以从渲染结果来看，并没有出现什么问题呀？

Answer 1

ustbhuangyi 2019-09-06 09:44:20

不太明白你的问题，“所有的组件树中，如果 VNode 是组件或含有组件的 slot，那么 VNode 必须唯一”这句话我也没太理解。

• 提问者 FDirector #1

  老师，Vue的官方文档中讲到了一个关于Vnodes约束的问题，说组件树中的所有 VNodes 必须是唯一的。这一点我不太理解。
  https://vuejs.bootcss.com/v2/guide/render-function.html

• ustbhuangyi 回复 提问者 FDirector #2

  网上搜了一下相关问题，应该是老版本的 Vue 会有这个问题，主要是在更新过程：
  
  Vue 会将 vnode 会与其渲染出来的 dom 元素进行一对一关联, 当你同一个 vnode 渲染两次后, vnode 最终只会与最后一个渲染出来的 dom 元素关联, 所以在 patch 阶段只有最后一个 dom 可以被更新。
  
  不过最新版本已经不存在这个问题了。

• 提问者 FDirector 回复 ustbhuangyi #3

  好的，谢谢老师。