关于vue.js:说说你对Vue的keepalive的理解

什么是 keep-alive

在平时开发中，有局部组件没有必要屡次初始化，这时，咱们须要将组件进行长久化，使组件的状态维持不变，在下一次展现时，也不会进行从新初始化组件。

也就是说，keepalive 是 Vue 内置的一个组件，能够 使被蕴含的组件保留状态，或防止从新渲染 。也就是所谓的 组件缓存

<keep-alive>是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，避免反复渲染 DOM。

<keep-alive> 包裹动静组件时，会缓存不流动的组件实例，而不是销毁它们。和 <transition> 类似，<keep-alive> 是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在父组件链中。

prop:

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

keep-alive的申明周期执行

• 页面第一次进入，钩子的触发程序
  created-> mounted-> activated，
  退出时触发 deactivated 当再次进入（后退或者后退）时，只触发 activated
• 事件挂载的办法等，只执行一次的放在 mounted 中；组件每次进去执行的办法放在 activated 中；

根本用法

<!-- 被 keepalive 蕴含的组件会被缓存 -->
<keep-alive>
    <component><component />
</keep-alive>

被 keepalive 蕴含的组件不会被再次初始化，也就意味着 不会重走生命周期函数
然而有时候是心愿咱们缓存的组件能够可能再次进行渲染，这时 Vue 为咱们解决了这个问题
被蕴含在 keep-alive 中创立的组件，会多出两个生命周期的钩子: activated 与 deactivated：

• activated 当 keepalive 蕴含的组件再次渲染的时候触发
• deactivated 当 keepalive 蕴含的组件销毁的时候触发

keepalive是一个形象的组件，缓存的组件不会被 mounted, 为此提供 activated 和deactivated钩子函数

参数了解

keepalive 能够接管 3 个属性做为参数进行匹配对应的组件进行缓存:

• include 蕴含的组件(能够为字符串，数组，以及正则表达式, 只有匹配的组件会被缓存)
• exclude 排除的组件(认为字符串，数组，以及正则表达式, 任何匹配的组件都不会被缓存)
• max 缓存组件的最大值(类型为字符或者数字, 能够管制缓存组件的个数)

注：当应用正则表达式或者数组时，肯定要应用 v-bind

<!-- 将（只）缓存组件 name 为 a 或者 b 的组件, 联合动静组件应用 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 组件 name 为 c 的组件不缓存(能够保留它的状态或防止从新渲染) -->
<keep-alive exclude="c"> 
  <component></component>
</keep-alive>

<!-- 应用正则表达式，需应用 v -bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动静判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<!-- 如果同时应用 include,exclude, 那么 exclude 优先于 include，上面的例子只缓存 a 组件 -->
<keep-alive include="a,b" exclude="b"> 
  <component></component>
</keep-alive>

<!-- 如果缓存的组件超过了 max 设定的值 5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5"> 
  <component></component>
</keep-alive>

遇见 vue-router 联合 router 应用，缓存局部页面

所有门路下的视图组件都会被缓存

<keep-alive>
    <router-view>
        <!-- 所有门路匹配到的视图组件都会被缓存！-->
    </router-view>
</keep-alive>

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

• 应用 include/exclude
• 应用 meta 属性

1、用 include (exclude例子相似)

毛病：须要晓得组件的 name，我的项目简单的时候不是很好的抉择

参考：前端 vue 面试题具体解答

<keep-alive include="a">
    <router-view>
        <!-- 只有门路匹配到的 include 为 a 组件会被缓存 -->
    </router-view>
</keep-alive>

2、应用 meta 属性

长处：不须要例举出须要被缓存组件名称
应用 $route.meta 的 keepAlive 属性：

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

须要在 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 // 须要被缓存}
    }
  ]
})

【加盐】应用 router.meta 拓展

假如这里有 3 个路由：A、B、C。

• 需要：

  • 默认显示 A
  • B 跳到 A，A 不刷新
  • C 跳到 A，A 刷新

• 实现形式

  • 在 A 路由外面设置 meta 属性：

{
        path: '/',
        name: 'A',
        component: A,
        meta: {keepAlive: true // 须要被缓存}
}

• 在 B 组件外面设置 beforeRouteLeave：

export default {data() {return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
            next();}
};

• 在 C 组件外面设置 beforeRouteLeave：

export default {data() {return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // 让 A 不缓存，即刷新
            next();}
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

防坑指南

1.keep-alive 先匹配被蕴含组件的 name 字段，如果 name 不可用，则匹配以后组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中失常工作，因为它们没有缓存实例。
3. 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(以后 vue 2.4.2 version)。比方：蕴含于排除同时匹配到了组件 A，那组件 A 不会被缓存。
4. 蕴含在 keep-alive 中，但合乎 exclude，不会调用 activated 和 deactivated。

实现后退刷新，后退不刷新

感激 iceuncle 分享的《vue 实现后退刷新，后退不刷新》。

总结

路由大法不错，不须要关怀哪个页面跳转过来的，只有 router.go(-1) 就能回去，不须要额定参数。

在非单页利用的时候，keep-alive 并不能无效的缓存了 = =

keep-alive 生命周期钩子函数：activated、deactivated

应用 <keep-alive> 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，须要在 activated 阶段获取数据，承当原来 created 钩子中获取数据的工作。

附录

生命周期函数：就是 vue 在某个时间段会主动执行的函数

1. beforeCreate(){}在执行的时候，data 还有 methods 都没有被初始化
2. created(){} data 还有 methods 都被初始化好了，如果要调用 methods 办法或者操作 data 外面的数据，最早只能在 created 外面进行操作。
3. beforeMount(){} 示意模板曾经在内存中编辑实现了，然而尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过去，只是之前写的一些模板字符串。
4. mounted(){} 示意内存中模板曾经实在的挂载到页面中去了，用户能够看到渲染好的界面了
5. 留神这是一个生命周期函数的最初一个函数了，执行完这个函数示意 整个 vue 实例曾经初始化实现了，组件脱离了创立阶段，进入运行阶段。

• 上面是运行期间的两个生命周期函数的钩子：
• beforeUpdate(){} 示意咱们的界面还没更新 然而 data 外面的数据是最新的。即页面尚未和最新的 data 外面的数据放弃同步。

6. updated(){} 示意页面和 data 外面的数据曾经放弃同步了 都是最新的。
7. beforeDestory(){} 当执行这个生命周期钩子的时候 vue 的实例从运行阶段进入销毁阶段 此时实例身上的 data 还有 methods 处于可用的状态。
8. destoryed(){} 示意组件曾经齐全被销毁了 组件中所有的实例办法都是不能用了