component组件与A,B组件的关系

Question

当:is的值变时，会执行组件的render，生成一个新的vnode。在patch过程中，patchVnode()里，遇到了自定义组件keep-alive，则执行hook的prePatch()钩子，获取keep-alive的子组件vnode，并重新渲染keep-alive组件，也就是执行keep-alive的render函数，会新生成一个新的vnode。会patch，keep-alive刚生成的这个新vnode，在createComponent()中，如果这个vnode的componentInstance存在了，在执行hook的init()时，则不执行mounte()了，会走另一条逻辑。在createComponent()中直接把dom插入文档中，插入完后，会处理一些一休的问题。

疑问点：component这个动态组件如何与A,B组件联系起来的，总感觉在第一次从A切换到B时，B组件会使用A组件的内容。总感觉无论:is如何改变，在执行keep-alive的render函数时，componentInstance永远都是component组件的，永远不会改变，还有那个key，我感觉key永远也是component组件的key，永远不会改变。

请老师帮我解答

Answer 1

ustbhuangyi 2021-05-05 12:32:17

<component> 是动态组件，并非是一个真实的组件，在 _createElement 的过程中，它就会根据 is 动态绑定的值去渲染对应的真实组件了：

• 提问者 前端工程师666777888 #1

  非常感谢！

• 提问者 前端工程师666777888 #2

  看到这句代码，解决了我之前有关keep-alive中render函数里的vnode的疑问。
  vnode并不是component组件的占位vnode。而是A组件的占位vnode。
  刚开始时，我一直认为vnode是component的占位vnode，其实并不是，因为tag=data.is把component组件转到A组件上了，最终生成的是A组件的占位vnode。
  也就是说，component其实并没有任何作用，它反而迷惑了我们大家。
  可以把component当成一个变量，当前is是什么，component就是什么组件。

• 提问者 前端工程师666777888 #3

  通过keep-alive让我了解到
  一个自定义组件要渲染成什么内容，是有这个组件生成的vnode决定的。
  生成什么vnode，完全可以有我们自行控制。
  我们可以把一个组件的第一个子节点vnode当成自己的vnode(例如：keep-alive就是这样实现的)。
  我们可以把一个组件的vnode通过逻辑判断指向任意一个其他的组件（例如：component组件就是这样实现的）。
  也就是说：写的什么不重要，你看到的什么也重要，重要的是这个组件生成的vnode是什么。