Vue中如何使用keep-alive组件以及配合动态组件使用

什么是keep-alive

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。
简单的来说,在点击切换不同组件的时候,为了降低消耗,就将包裹的组件缓存起来。
在这里插入图片描述

keep-alive组件上的三个属性
  • include:名称匹配的组件会被缓存
  • exclude:任何名称匹配的组件都不会被缓存
  • max: 最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
两个回调函数
  • activated:在缓存的组件中,当切换显示时触发
  • deactivated:在缓存的组件中,当显示切换隐藏时触发
    注意:是在缓存的组件中的,如何组件没有缓存,即使是被keep-alive包裹着也不会触发
//html
<!-- 需要缓存的组件 -->
    <keep-alive include="acomp">
      <!-- 动态组件  v-bind:is为显示的组件名 -->
      <component :is="view"></component>
    </keep-alive>
    <button
      v-for="(item, index) in btnList"
      :key="index"
      @click="select(item.name)"
    >切换{{item.name}}</button>

//js
data() {
    return {
      view: "bcomp",
      btnList: [
        {
          id: 1,
          name: "a"
        },
        {
          id: 2,
          name: "b"
        },
        {
          id: 3,
          name: "c"
        }
      ]
    };
  },
  components: {
    acomp: Acomp,
    bcomp: Bcomp
  },
  methods: {
    select(e) {
      this.view = e + "comp";
    }
  }
  • A组件中
activated() {
    console.log("显示A");
  },
  deactivated(){
    console.log("隐藏A");
  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值