vue中keep-alive的使用

之前在项目中就有用到过keep-alive,一直没有写下来,今天用到又发现比之前理解的更透彻啦,这里和大家分享一下,有不正确的地方欢迎指正,好了 ,废话不多说,上干货!!

 

keep-alive原理

keep-alive是Vue.js的一个内置组件, 它自身不会渲染一个DOM元素, 也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它能够不重新加载组件实例然后把实例保存在内存中,它提供了include与exclude两个属性，允许组件有条件地进行缓存。其实就是在created时将需要缓存的VNode节点保存在this.cache中／在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

keep-alive应用

我们在做vue单页面时,有时希望页面数据保存,有时希望页面数据不保存,那么怎么写,上干货!!

首先我们要在router里面配置如下:

// routes 配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被缓存   --重点
  }
 }, {
  path: '/message',
  name: 'message',
  component: Message,
  meta: {
   keepAlive: false // 不需要被缓存  --重点
  }
 }

 

 

然后在入口文件(App.vue)里面配置如下:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件，比如 Home！ -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件，比如 Message！ -->
</router-view>

 

拓展

如果有需求需要进入页面时更新某一条的数据,那么activated,deactivated 这两个生命周期就派上用场啦 , 

注:  activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在这两个生命周期,

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。所以需要再次进入更新某条数据时 ,把方法写在actived里面就可以啦.

事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存都会执行.

今天分享到此,欢迎关注转发,一起学习,共同进步