在vue中内置组件keep-alive的使用

最新推荐文章于 2024-08-01 14:54:50 发布

蓝图Lily

最新推荐文章于 2024-08-01 14:54:50 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39288987/article/details/102784632

版权

本文介绍了Vue中keep-alive组件的作用，它用于保留组件状态并避免重复渲染，解决页面频繁切换导致的性能问题。通过is特性动态切换组件，并探讨了组件必须有name属性才能被缓存的要求。同时，提到了Vue2.1.0引入的include和exclude属性，用于有条件地缓存组件。

摘要由CSDN通过智能技术生成

首先我们先来了解一下is特性

之前我们在一个多标签的界面中切换不同的组件使用的是 is 特性：例如：

（1）简单一点儿的是：
<component :is="view"></component>

（2）复杂一点儿，使用vant组件
//使用vant 组件中的van-tabs标签页，再使用v-model进行数据双向绑定
 <van-tabs v-model="tabName">
      <van-tab name="Home" title="首页"></van-tab>
      <van-tab name="Recommend" title="推荐"></van-tab>
      <van-tab name="UserCenter" title="个人中心"></van-tab>
    </van-tabs>
    
    //使用is特性，绑定tabName进行页面切换
    <component v-bind:is="tabName"></component>
    
 //在data中进行设置。默认显示 Home,即个性推荐页面
  data() {
    return {
      tabName: "Home"
    };
  }

当在这些组件之间切换的时候，vue都会重新创建一个新的实例,即页面会重新渲染，会导致一些性能问题，用户体验也不太好。

为了解决这个问题，我们可以用一