keep-alive使用与activated钩子函数

keep-alive

作用：对组件进行缓存，提高性能。

说明：啥意思呢？有两个组件A、B。我们在A组件上操作的数据，此时我们切换到组件B，再切换到A组件，A组件并不会重新渲染，而是保存之前的状态。

keep-alive是一个抽象标签，不会被渲染承具体的dom元素。这点与template类似。

其中，

include（包含）属性是一个被缓存组件name的数组。其中的组件都会被缓存。

exclude（排除）属性是一个不被缓存组件name的数组。其中的组件都不会被缓存。

注意：是组件的name属性，不是路由的name属性。

如果需要缓存的页面太多，在数组中一个个添加name，显然有点太繁琐了。利用meta属性来进行控制我们需要进行缓存的页面：

方法：在路由meta设置是否进行缓存的标记

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

在router-view中进行判断，需要缓存则放入keep-alive标签中。

activated钩子函数

什么时候调用？

答：进入已经缓存的页面时，触发的钩子函数。

记住：包含了keep-alive的组件，created()、mounted()都只会触发一次。但是activated每一次进入组件，都会触发一次哦~