Vue中的keep-alive

基本用法

<keep-alive> 是 Vue.js 中的一个抽象组件，用于缓存组件的状态，以便在切换组件时保留其状态和避免重新渲染。它通常用于提高应用程序的性能，特别是在需要频繁切换组件时。

基本用法如下：

首先，在需要缓存的组件的外部包裹 <keep-alive> 组件。例如：

<keep-alive>
  <!-- 在这里包裹需要缓存的组件 -->
  <your-component></your-component>
</keep-alive>

在需要切换显示 <your-component> 的地方，使用 <component> 标签，并通过 is 属性来动态加载组件，同时设置 keep-alive 属性为 true，以启用缓存。

<component :is="currentComponent" v-if="showComponent" keep-alive></component>

在这个示例中，currentComponent 是一个数据属性，决定要显示的组件，showComponent 控制组件是否显示。

确保你的组件中已经定义了 name 选项，以便 <keep-alive> 能够标识和缓存它。在组件定义中添加 name 选项，如下：

Vue.component('your-component', {
  name: 'your-component',
  // 其他组件选项
});

现在，<your-component> 将会在切换时保留其状态，以避免不必要的重新渲染和数据请求。

完整实践

<div id="app">
    <button @click="changeTabs('child1')">child1</button>
    <button @click="changeTabs('child2')">child2</button>
    <keep-alive>
        <component :is="chooseTabs">
        </component>
    </keep-alive>
</div>
var child1 = {
    template: '<div><button @click="add">add</button><p>{{num}}</p></div>',
    data() {
        return {
            num: 1
        }
    },
    methods: {
        add() {
            this.num++
        }
    },
}
var child2 = {
    template: '<div>child2</div>'
}
var vm = new Vue({
    el: '#app',
    components: {
        child1,
        child2,
    },
    data() {
        return {
            chooseTabs: 'child1',
        }
    },
    methods: {
        changeTabs(tab) {
            this.chooseTabs = tab;
        }
    }
})

简单的结果如下，动态组件在child1,child2之间来回切换，当第二次切到child1时，child1保留着原来的数据状态，num = 5。

「参数」

参数名	值	描述
include	字符串或正则表达式	只有名称匹配的组件会被缓存。
exclude	字符串或正则表达式	任何名称匹配的组件都不会被缓存。
max	数字	最多可以缓存多少组件实例。

注意: include/exclude 值是组件中的 name 命名，而不是路由中的组件 name 命名；<keep-alive> 还可以使用 include 和 exclude 属性，以更精细地控制哪些组件需要被缓存或排除缓存。此外，你可以使用 <router-view> 来与 Vue Router 结合使用，以实现页面级别的缓存。

实现原理

Vue.js 中的 <keep-alive> 组件的实现原理涉及到虚拟 DOM、组件生命周期钩子和缓存策略。基本实现原理：

缓存组件：<keep-alive> 是一个抽象组件，它在内部维护一个缓存队列，用于存储已经渲染过的组件实例。当一个被包裹在 <keep-alive> 中的组件被销毁时，它的实例不会被销毁，而是被缓存起来。
标识组件：每个被缓存的组件都需要有一个唯一的标识符，这通常是组件的名称。你可以在组件定义中使用 name 选项为组件指定一个名称，或者 <keep-alive> 会根据组件的构造函数来自动生成一个名称。
控制缓存：<keep-alive> 使用了虚拟 DOM 来追踪组件的状态。当一个被缓存的组件需要显示时，它会被从缓存中取出，并插入到实际的 DOM 中。当组件不再需要显示时，它会被从 DOM 中移除，但不会被销毁，而是再次放回缓存队列。
生命周期钩子：组件的生命周期钩子函数在缓存和激活时得到调用。这意味着当一个被缓存的组件被激活时，它会触发 activated 钩子函数，而当它从缓存中被取出时，它会触发 deactivated 钩子函数。你可以利用这些钩子函数来执行一些特定的操作，比如数据的重置或者请求的再发起。
缓存策略：<keep-alive> 组件还支持一些属性，如 include 和 exclude，用于更精细地控制哪些组件需要被缓存或排除缓存。这可以帮助你根据需要定制缓存策略，以便更好地管理缓存的组件。