④ 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 另外在服务端渲染时此钩子也不会被调用的。