keep-alive

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 activated和 deactivated，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactivated钩子函数，命中缓存渲染后会执行 activated钩子函数。

 

activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated

deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

 

props

• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

example:

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </component>
</keep-alive>

 

实际项目中,需要配合vue-router共同使用：

 

增加router.meta属性

// routes 配置
  export default [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }, {
      path: '/:id',
      name: 'edit',
      component: Edit,
      meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]

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