【vue面试】怎么缓存当前组件？缓存后怎么更新？

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

这道题主要考察的是 keep-alive 组件的作用及用法，我们可以按以下思路回答这个问题。

答题思路

（1）缓存用 keep-alive ,它的作用与用法是什么？

keep-alive 是 vue 的内置组件，包裹动态组件 component 时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染。

使用方法如下：

<keep-alive>
    <component :is='view'></component>
</keep-alive>

（2）使用细节，例如缓存指定/排除、结合 router和 transition

使用中结合 include 和 exclude 可以明确指定缓存哪些组件或者排除缓存指定组件，vue3 中结合 vue-router 时变化较大，之前是 keep-alive 包裹 router-view，现在需要用 router-view 包裹 keep-alive。

<router-view>
    <keep-alive>
        <component :is='view'></component>
    </keep-alive>
</router-view>

（3）keep-alive 的钩子函数？

缓存后如果要获取数据，就可以用到钩子函数了。

当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated

actived: 当 keep-alive 缓存的组件被激活的时候执行

actived(){
    this.getData()
}

2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

3.如果有路由的时候

beforeRouterEnter: 每次进入路由的时候，都会执行 beforeRouterEnter

beforeRouterEnter(to, from, next){
    next(vm => {
        console.log(vm)
        vm.getData()
    })
}

（4）原理阐述

keep-alive 是一个通用组件，它内部定义了一个map,缓存创建过程中的组件实例，它返回的渲染函数内部会查找内嵌的 component 组件对应的 vnode（一个 VNode 会对应一个真实的 dom元素，缓存的就是 vnode,当然查找的也是 vnode）,如果该组件中 map 中存在就直接返回。

因为 component 的is 属性是个响应性数据，因此只要它改变，那么 keep-alive 的render函数就会重新执行。