keep-alive的概念
keep-alive是Vue的内置组件,当他包裹;它自身不会渲染成一个DOM元素,也不会出现在父组件链中.
作用
在组件切换过程中将状态保留在内存中,防止重新渲染DOM,减少加载时间以及性能消耗,提高用户体验
原理
在createdh函数调用时将需要缓存的 VNode 节点保存在this.cache中 / 在render(页面渲染)时,
如果在VNode的name符合缓存条件,则会从this.cache中取出之前缓存的VNode实例进行渲染
VNode : 虚拟DOM,就是一个js对象
Props
- include ---- 字符串或正则表达式,只有名称匹配的组件会被缓存
- exclude --- 字符串或正则表达式 , 任何名称匹配的组件都不会被缓存
- max --- 数字,最多可以缓存多少组件实例
声明周期函数
被包含在keep-alive中创建的组件,会多出两个声明周期的钩子函数 : activated和deactivated 他们两个都 在keep-alive 组件激活时调用 , 该钩子函数在服务器端渲染期间不被调用
缓存所有页面
在App.vue 里面
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
根基条件缓存页面
在App.vue里面
然后我们结合 router.js,缓存部分页面