Vue keep-alive数据缓存与activated、deactivated钩子

keep-alive是Vue的内置组件，可以将状态保留在内存中，防止组件切换过程中重复渲染DOM

 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和  相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

 属性(prop)

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

// 组件

 

结合router缓存页面

注意这个  要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

需要在router中设置router的元信息 meta 

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

如果不是用keep-alive的include，则直接缓存所有页面

使用keep-alive可以缓存页面，提高用户体验，同时keep-alive提供了两个钩子函数activated，deactivated

后台管理系统中可以将table数据请求放在activated钩子中，进入页面即请求数据，生成遮罩，离开页面（deactivated）关闭遮罩

  deactivated() {
    // 离开页面触发
    this.listLoading = false // 离开页面关闭遮罩
    this.activatedStatus = 1
  },
  activated() {
    // 使用keep-alive时才会生效，在进入页面时触发
    if (!this.data.length) {
      // 进入页面判断是否有数据，没有数据发起请求
      this.getList()
    }
  }

使用keep-alive可以方便使用这两个钩子函数，减少mounted等钩子的使用，方便页面切换。