vue2.0 keep-alive组件总结

** < keep-alive> ** 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用来缓存组件,避免多次加载相应的组件,减少性能消耗

< keep-alive >包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 < transition > 相似，< keep-alive > 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

<keep-alive>
    <component>
          <!-- 组件将被缓存 -->
    </component>
</keep-alive>

有时候可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下，将首次触发请求写在created钩子函数中,就能实现缓存,例如列表页,去了详情页回来,还是在原来的页面。

<keep-alive><router-view></router-view></keep-alive>

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

常见用法：

// 组件
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

如果只想 router-view 里面某个组件被缓存

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <router-view></router-view>
</keep-alive>

exclude 例子类似
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
//a、b为组件name

注意:这种方法都是预先知道组件的名称的

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

includedComponents动态设置即可。

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

结合router，缓存部分页面
使用$route.meta的keepAlive属性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

keep-alive生命周期钩子函数：activated、deactivated。使用< keep-alive >会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

vue2.0 keep-alive组件总结

猜你喜欢