vue脚手架中＜keep-alive＞的作用

标题vue脚手架中的作用

<keep-alive>是vue内置的一个组件，可以使被包含的组件保留状态，或避免从新渲染
可能这么听有点抽象，那我举个例子吧

一般渲染组件我们会用<router-view>标签
假设我们有个Home组件，我们直接用<router-view>标签当页面路由来回跳转到Home组件时，Home组件会被反复创建和销毁，我们可以在Home组件里调用created()和destroyed生命周期函数来验证

当我们把<router-view>放在<keep-alive>标签中时，当页面路由来回跳转到Home组件，Home组件不会被反复创建和销毁，因为Home组件被缓存到了<keep-alive>组件里面


<keep-alive>有两个很重要的属性分别是include和exclude,作用如图

使用方法如图，表示不缓存name属性为About的组件，注意exclude包含多个name属性时用逗号隔开且不能加空格

在这再补充一点，在vue3.0以上的话<keep-alive>好像是不起作用的，生命周期的销毁前后两个生命周期函数也不再被建议使用

今天的内容就写到这了，大家有问题可以评论噢