vue keep-alive组件的使用以及原理

vue keep-alive组件的使用以及原理。

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

它有两个生命周期：

activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用

它提供了include与exclude两个属性，允许组件有条件地进行缓存。

有2个属性
include = “a” 将缓存组件名为a得组件
exclude=‘a’ 组件名为a得不会被缓存
注：组件名是 组件内内得name值 跟data同级

用法:

<template>
    <div>
        <keep-alive>
            <coma v-if="test"></coma>
            <comb v-else="test"></comb>
        </keep-alive>
        <button @click="test=handleClick">请点击</button>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        data () {
            return {
                test: true
            }
        },
        methods: {
            handleClick () {
                this.test = !this.test;
            }
        }
    }
<script>

props
keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<keep-alive  include="componentNam">
  <component></component>
</keep-alive>

将缓存name为componentName的组件。

反之，exclude 则不会缓存该组件

钩子函数
keep-alive提供了两个生命钩子，分别是activated与deactivated。

因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。