vue中keep-alive内置组件缓存的用法

这篇文章主要讲解了vue中keep-alive内置组件缓存的用法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

成都创新互联公司10多年企业网站制作服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站制作及推广,对柴油发电机等多个领域拥有多年设计经验的网站建设公司。

需求:
home 组件中有一个 name 的 data 数据。这个数据修改之后,再切换到其他的组件。再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值。希望组件有缓存。
keep-alive 的使用方式:
将要缓存的组件使用 keep-alive 包裹住即可。
keep-alive优点的介绍:
1.切换组件时,当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。
2.切换回来时,也不会重新创建。(既然都没有被销毁,哪里来的重新创建呢)
3.会多出两个生命周期的钩子函数
a. activated 缓存激活 第一次会触发、组件能被看到
一般根 created 做一样的事情:请求数据
b.deactivated 缓存失活 组件不能被看到
一般根 beforeDestroy 做一样的事情: 清除定时器、移除全局事件监听
4.可以在 vue devtools 上看见组件的缓存情况
** keep-alive 的更多属性设置**
1.include 包含
a. include=“组件1,组件2” 注意 逗号前后不要有空格
b. :include="[组件1, 组件2]"
c. :include="/^hello/"
2.exclude 排除
a. exclude=“组件1,组件2” 注意 逗号前后不要有空格
b. :exclude="[组件1, 组件2]"
c. :exclude="/^hello/"
3.max 规定最大能缓存组件的数量,默认是没有限制的\
假定缓存队列是 [home, list]
现在进入about的时候 about 也会被缓存上,这时会将之前的第一个给排出去 [home, list, about] => [list, about] 先进先出原则。

概念就这些上代码

1.vue链接:https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js
2.创建组件。(三个组件)

//组件一
   Vue.component("home", {
    data() {
     return {
      name: "张三",
     };
    },

    template: `
     

home

{{ name }}

`, //实例创建完成的时候打印 created() { console.log("home created"); }, //实例销毁前的打印 beforeDestroy() { console.log("home beforeDestroy"); }, //激活缓存的时候打印组件能被看到 activated() { console.log("home activated"); }, //缓存失活时打印 组件不能被看到 deactivated() { console.log("home deactivated"); }, }); //组件二 Vue.component("list", { template: `

list

`, //激活缓存的时候打印组件能被看到 created() { console.log("list created"); }, //缓存失活时打印 组件不能被看到 beforeDestroy() { console.log("list beforeDestroy"); }, }); //组件三 Vue.component("about", { template: `

about

`, //激活缓存的时候打印组件能被看到 created() { console.log("about created"); }, //缓存失活时打印 组件不能被看到 beforeDestroy() { console.log("about beforeDestroy"); }, });

3.创建实例。

Vue.component("home", {
    data() {
     return {
      name: "张三",
     };
    },

body部分

//active是样式来做高亮用v-bind来绑定 //@click自定义事件将实例里的数据改为home //点击的时候会触发component内置标签更换为home
//用keep-alive内置组件包裹componet内置组件v-bind绑定max作用是最多缓存两个 //方法二 //排除法排除了about只有home与list可以缓存 // // // //方法三 //选择缓存法只有home与list可以被缓存 //keep-alive include="home,list"> // //

三种方法的具体用法在文章的开始的时候有介绍

看完上述内容,是不是对vue中keep-alive内置组件缓存的用法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


标题名称:vue中keep-alive内置组件缓存的用法
当前路径:http://myzitong.com/article/ipepjs.html