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()
}