大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“Vue的keep-alive怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue的keep-alive怎么使用”吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网络空间、营销软件、网站建设、绍兴网站维护、网站推广。
用法
keep-alive是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。当组件在
在 2.2.0 及其更高版本中,activated 和 deactivated 将会在
作用
在组件切换过程中将状态保留在缓存中,防止重复渲染DOM,减少加载时间及性能消耗,优化用户体验。(主要用于保留组件状态或避免重新渲染)
Props
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
生命周期钩子
activated
在 keep-alive 组件激活时调用(该钩子函数在服务器端渲染期间不被调用)。
deactivated
在 keep-alive 组件失活时调用(该钩子在服务器端渲染期间不被调用)。
被包含在 keep-alive 中的组件,会多出两个生命周期的钩子:activated 与 deactivated,使用 keep-alive 会将数据保留在缓存中,如果要在每次进入页面的时候获取最新的数据,需要在activated 阶段获取数据(因为被包裹的组件只有在首次渲染才会去执行created、mounted等钩子),承担原来在created、mounted等钩子获取数据的任务。
注意:只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子函数依然不会被调用!另外,在服务端渲染时,此钩子函数也不会被调用。
示例
缓存(所有)路由组件
App.vue(未使用keep-alive)
export default {
name: "App"
};
路由组件1:Home.vue
This is a Home page
export default {
name: "Home",
data() {
return {
inputText: "",
};
},
};
路由组件2:About.vue
This is an About page
v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
export default {
name: "About",
data() {
return {
value: "",
options: [
{
value: "zhangsan",
label: "张三",
},
{
value: "lisi",
label: "李四",
},
],
};
},
};
在未使用keep-alive情况下,在Home页面输入框输入内容
感谢各位的阅读,以上就是“Vue的keep-alive怎么使用”的内容了,经过本文的学习后,相信大家对Vue的keep-alive怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!