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

来源：10-3 keep-alive（3）

前端工程师666777888

2021-05-05

当: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，永远不会改变。

请老师帮我解答

写回答

1回答

ustbhuangyi

2021-05-05

已采纳

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

//img.mukewang.com/szimg/60921fce0928152818280322.jpg

前端工程师666777888

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

2021-05-05

共3条回复

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

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

4984 学习 · 1037 问题

查看课程

相似问题

关于父子组件的watcher问题

回答 2

异步组件跟同步组件

回答 1

组件构造函数都继承 Vue 么

回答 1

有关组件的patch问题

回答 1

异步组件

回答 2

打开慕课网App查看更多内容