vue中 keep-alive的作用 和activated 和 deactivated 生命周期理解

keep-alive 简介

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

用法

props

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

2.1.0 新增

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

max

2.5.0 新增

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

  

 不会在函数式组件中正常工作，因为它们没有缓存实例。

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

  
    
  
可以保留它的状态或避免重新渲染


  
    
  
可以保留它的状态或避免重新渲染

但实际项目中,需要配合vue-router共同使用.

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

如果只想 router-view 里面某个组件被缓存，怎么办？

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

这两个钩子需要配合配合来使用
keep-alive的作用会缓存不活动的组件实例，而不是销毁它们。当组件在内被切换，activated和deactivated这两个生命周期钩子函数将会被对应执行。

        注意：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在   当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

用一个实例说明：

搭建了一个脚手架，新建2个子组件，1个父组件

子组件A内容

父组件内容

如果如下

这里看到当A组件被点击激活时就触发activated钩子，点击B组件开启A组件关闭时deactivated钩子就触发执行。

这里也能看出在keep-alive 里A组件的数据也被缓存起来，第二次触发的时候组件状态没有被重新改变