keep-alive原理

keep-alive是vue.js的一个内置组件,它能够将不活动的实例组件保存在内存中,而不是直接将其销毁。它是一个抽象组件,不会渲染到真实的dom中,也不会出现在父组件中。它提供了include和exclude两个属性,允许有条件进行缓存。

<keep-alive include="a">
	<component></component>
</keep-alive>

将缓存name为a的组件

<keep-alive exclude="b">
	<component></component>
</keep-alive>

name为b的组件不会被缓存

原理就是将需要缓存的VNode节点保存在this.cache中,如果VNode的name符合在缓存条件中(通过监听属性include和exclude来控制),则会直接从this.cache中取出之前缓存的VNode实例进行渲染

猜你喜欢

转载自blog.csdn.net/weixin_54722719/article/details/123411726