免费开网站系统,网站的模糊搜索怎么做,微信小程序是什么模式,seo诊断报告一、什么是 keep-alive
在平常开发中#xff0c;有部分组件没有必要多次初始化#xff0c;这时#xff0c;我们需要将组件进行持久化#xff0c;使组件的状态维持不变#xff0c;在下一次展示时#xff0c;也不会进行重新初始化组件。
Keep-Alive是Vue.js中的一个内置组…一、什么是 keep-alive
在平常开发中有部分组件没有必要多次初始化这时我们需要将组件进行持久化使组件的状态维持不变在下一次展示时也不会进行重新初始化组件。
Keep-Alive是Vue.js中的一个内置组件它可以用来缓存不活动的组件实例而不是销毁它们。当Keep-Alive包裹动态组件时它会将组件的状态保存在内存中以防止在组件切换过程中重复渲染DOM从而提高性能和用户体验。Keep-Alive自身不会渲染一个DOM元素也不会出现在父组件链中。
在Keep-Alive组件中你可以使用props来控制哪些组件需要被缓存以及可以缓存多少个组件实例。例如你可以使用include和exclude props来指定需要缓存的组件名称或正则表达式以及使用max props来限制最多可以缓存的组件实例数量。
当组件在Keep-Alive内被切换时它的activated和deactivated生命周期钩子函数将会被对应执行。这意味着当组件从缓存中激活时activated函数会被调用而当组件被停用时deactivated函数会被调用。
优点
减少页面加载时间提高页面渲染速度。缓存已经渲染过的组件减少内存的占用。提高用户体验快速回退之前的组件状态。节约 HTTP 请求次数减少服务器压力提高渲染效率。
缺点
不利于SEO优化。因为Keep-Alive不会渲染DOM元素搜索引擎可能无法正确地索引和识别被缓存的组件内容。可能会增加内存消耗。如果大量组件被缓存可能会占用大量的内存资源。
因此在使用Keep-Alive时需要注意权衡其优缺点根据实际需求和情况做出决策。
二、使用方法
基本用法
!--被keepalive包含的组件会被缓存--
keep-alivecomponentcomponent /
/keep-alive参数
keepalive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:
include 包含的组件(可以为字符串数组以及正则表达式,只有匹配的组件会被缓存)exclude 排除的组件(以为字符串数组以及正则表达式,任何匹配的组件都不会被缓存)max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
它会根据组件的 name 选项进行匹配所以组件如果想要条件性地被 KeepAlive 缓存就必须显式声明一个 name 选项。
其他用法
!-- 将只缓存组件name为a或者b的组件, 结合动态组件使用 --
keep-alive includea,bcomponent/component
/keep-alive!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) --
keep-alive excludec component/component
/keep-alive!-- 使用正则表达式需使用v-bind --
keep-alive :include/a|b/component :isview/component
/keep-alive!-- 动态判断 --
keep-alive :includeincludedComponentsrouter-view/router-view
/keep-alive!-- 如果同时使用include,exclude,那么exclude优先于include 下面的例子只缓存a组件 --
keep-alive includea,b excludeb component/component
/keep-alive!-- 如果缓存的组件超过了max设定的值5那么将删除第一个缓存的组件 --
keep-alive excludec max5 component/component
/keep-alive三、生命周期
被keepalive包含的组件不会被再次初始化也就意味着不会重走生命周期函数 但是有时候是希望我们缓存的组件可以能够再次进行渲染这时 Vue 为我们解决了这个问题 被包含在 keep-alive 中创建的组件会多出两个生命周期的钩子: activated 与 deactivated
activated 在首次挂载以及每次从缓存中被重新插入的时候调用deactivated 在从 DOM 上移除、进入缓存以及组件卸载时调用
注意
activated 在组件挂载时也会调用并且 deactivated 在组件卸载时也会调用。 这两个钩子不仅适用于 缓存的根组件也适用于缓存树中的后代组件。
生命周期
页面第一次进入钩子的触发顺序created- mounted- activated
退出时触发 deactivated 当再次进入前进或者后退时只触发 activated事件挂载的方法等
只执行一次的放在 mounted 中 组件每次进去执行的方法放在 activated 中
export default {mounted(){//只执行一次},activated() {// 每次进去都执行},deactivated() {// 组件卸载时调用}
}四、缓存页面
遇见 vue-router 结合router使用缓存部分页面
所有路径下的视图组件都会被缓存
keep-aliverouter-view!-- 所有路径匹配到的视图组件都会被缓存 --/router-view
/keep-alive如果只想要router-view里面的某个组件被缓存怎么办
1、用 include (exclude例子类似) 缺点需要知道组件的 name项目复杂的时候不是很好的选择
keep-alive includearouter-view!-- 只有路径匹配到的 include 为 a 组件会被缓存 --/router-view
/keep-alive2、使用 meta 属性 优点不需要例举出需要被缓存组件名称 使用$route.meta的keepAlive属性
keep-aliverouter-view v-if$route.meta.keepAlive/router-view
/keep-alive需要在router中设置router的元信息meta
//...router.js
export default new Router({routes: [{path: /Hello,,name: Hello,component: Hello,meta: {keepAlive: false // 不需要缓存}},{path: /page1,name: Page1,component: Page1,meta: {keepAlive: true // 需要被缓存}}]
})需要注意的是include和exclude属性中的组件名字必须是组件定义的name属性值而不是路由里面定义的名字。
五、拓展使用
假设这里有 3 个路由 A、B、C。
需求
默认显示 A B 跳到 AA 不刷新 C 跳到 AA 刷新
实现方式
1、在 A 路由里面设置 meta 属性
{path: /,name: A,component: A,meta: {keepAlive: true // 需要被缓存}
}2、在 B 组件里面设置 beforeRouteLeave
export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive true; // 让 A 缓存即不刷新next();}
};3、在 C 组件里面设置 beforeRouteLeave
export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive false; // 让 A 不缓存即刷新next();}
};这样便能实现 B 回到 AA 不刷新而 C 回到 A 则刷新。
六、防坑指南
keep-alive 先匹配被包含组件的 name 字段如果 name 不可用则匹配当前组件 components 配置中的注册名称。keep-alive 不会在函数式组件中正常工作因为它们没有缓存实例。当匹配条件同时在 include 与 exclude 存在时以 exclude 优先级最高(当前vue 2.4.2 version)。比如包含于排除同时匹配到了组件A那组件A不会被缓存。包含在 keep-alive 中但符合 exclude 不会调用 activated 和 deactivated。
