vue 之 keep-alive缓存组件

版权声明:本文为QQ帝国原创博客,转载请附上链接,谢谢。 https://blog.csdn.net/QQ_Empire/article/details/89426399

当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。

keep-alive 可缓缓存组件,保留之前的组件,不会重新渲染组件

组件到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的实例

<component v-bind:is="currentTabComponent"></component>

使用方式:

<!-- 失活的组件将会被缓存!-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>  <!-- 该组件将被缓存! -->
</keep-alive>

 加了之后当我们在选择后切换回来时,之前的选择内容还在。

注意这个 <keep-alive> 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册

这个比较详细:https://blog.csdn.net/qq_30114149/article/details/78415030

猜你喜欢

转载自blog.csdn.net/QQ_Empire/article/details/89426399