keep-alive

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

简而言之，被<keep-alive>包裹的组件会被缓存。

props

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

Demo

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

// 除了name为test的组件都将被缓存
<keep-alive exclude="test">
    <router-view><router-view/>
</keep-alive>

<keep-alive>上手使用其实没什么难度，我一把梭完成了项目需求，正当我得意之时，测试大佬给我泼了盆凉水。因为test被缓存了，导致该页面数据不能同步刷新。

想了半天没想到好的解决方案，于是问了下万能的搜索引，发现了activated这个生命周期钩子。

activated

先说下这个生命周期钩子，官网介绍是其被keep-alive缓存的组件激活时调用；在服务器端渲染期间不被调用。

说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。

所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。

Demo

activated() {
    // 每次进入更新数据
    this.getData()
}