个人对keep-alive的理解

最新推荐文章于 2023-01-17 11:02:07 发布

yagamichihaya

最新推荐文章于 2023-01-17 11:02:07 发布

阅读量256

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/u012309740/article/details/120056741

本文探讨了Vue中keep-alive组件的工作原理。在patch阶段，keep-alive包裹的组件进行渲染，但因其abstract属性为true而不生成真实DOM。keep-alive通过缓存组件实例，避免了重复渲染，首次渲染时不插入DOM，再次渲染时直接使用之前的实例。组件的激活与停用生命周期由activated和deactivated钩子替代原有的created到mounted阶段。然而，keep-alive组件何时销毁的问题仍有待解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

补基础！有错误欢迎指正！

首先附上一张图

上图是vue实例从被创造到渲染成DOM的过程。（render开始渲染）

Question 1：那么keep-alive包裹的组件是在哪步渲染的呢？

答案是:patch

这个过程会将vnode(虚拟DOM)转换成真实DOM。并且keep-alive本身不会渲染成真正的DOM节点。因为在创建父子组件时，会根据父组件的abstract属性决定是否忽略该组件，而keep-alive中设置了abstract:true，所以keep-alive本身不会被渲染到DOM上。

Question 2：keep-alive是如何进行缓存的？

在patch阶段会执行createComponent()函数，不过我还不是太懂。大体的意思是首次渲染的时候vnode.componentInstance值为undefined，会跳过插入上次DOM到父节点的过程。当再次渲染时，vnode.componentInstance就是上一次虚拟DOM渲染的实例，插入到父节点中。

Question 3：keep-alive的钩子函数

原本vue组件会经过created到mounted直至最后过程destroyed。不过keep-alive改变了这点，mounted之前的过程（beforeCreate、created、mounted）全部失效，取而代之的是activated和deactivated。ps：这里我有个问题，keep-alive包裹的组件是何时销毁的呢？

以上就是我对keep-alive的理解