④ keep-alive缓存组件，操作之后需要重新获取数据--activated

应用场景：

1 从列表页 -> 详情页 -> 列表页时，要保持列表页在原来的页面

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

2 当对列表页的数据做修改 | 新增操作时，返回到列表页时，要重新获取页面数据

activated() {
  this.searchList();
},

3 < keep-alive > 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

• activated在缓存组件激活时调用

• deactivated在缓存组件失活时调用

tip

• 001 只有组件被 keep-alive 包裹时，这两个生命周期才会被调用；

• 002 如果作为正常组件使用，是不会被调用；

• 003 使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用；

• 004 另外在服务端渲染时此钩子也不会被调用的。

4 应用

<keep-alive :include="cachePage">
  <router-view v-if="isPageShowed"></router-view>
</keep-alive>

• <keep-alive>: 这是一个抽象组件，用于包裹需要缓存的组件。在这个例子中，它包裹了 。

• :include="cachePage": 这是一个 keep-alive 的属性，用于指定哪些组件应该被缓存。在这个例子中，需要被缓存的组件名列表被存储在 cachePage 这个变量中。

• <router-view>: 这是一个组件，用于渲染由Vue Router管理的路由。router-view 会根据当前的路由动态地渲染不同的组件。

• v-if="isPageShowed": 这是一个Vue指令，用于在满足某个条件时渲染元素。在这个例子中，只有当 isPageShowed 为 true 时， 组件才会被渲染。