首页 >> js开发 >> jsvue中keep-alive内置组件缓存的实例代码js大全
jsvue中keep-alive内置组件缓存的实例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
需求:
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] 先进先出原则。需求:keep-alive 的使用方式:keep-alive优点的介绍:1.2.3.4.1.2.3.概念就这些上代码1.vue链接:https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js
2.创建组件。(三个组件)
//组件一
Vue.component("home", {
data() {
return {
name: "张三",
};
},
template: `
`,
//实例创建完成的时候打印
created() {
console.log("home created");
},
//实例销毁前的打印
beforeDestroy() {
console.log("home beforeDestroy");
},
//激活缓存的时候打印组件能被看到
activated() {
console.log("home activated");
},
//缓存失活时打印 组件不能被看到
deactivated() {
console.log("home deactivated");
},
});
//组件二
Vue.component("list", {
template: `
`,
//激活缓存的时候打印组件能被看到
created() {
console.log("list created");
},
//缓存失活时打印 组件不能被看到
beforeDestroy() {
console.log("list beforeDestroy");
},
});
//组件三
Vue.component("about", {
template: `
`,
//激活缓存的时候打印组件能被看到
created() {
console.log("about created");
},
//缓存失活时打印 组件不能被看到
beforeDestroy() {
console.log("about beforeDestroy");
},
});
//组件一
Vue.component("home", {
data() {
return {
name: "张三",
};
},
template: `
`,
//实例创建完成的时候打印
created() {
console.log("home created");
},
//实例销毁前的打印
beforeDestroy() {
console.log("home beforeDestroy");
},
//激活缓存的时候打印组件能被看到
activated() {
console.log("home activated");
},
//缓存失活时打印 组件不能被看到
deactivated() {
console.log("home deactivated");
},
});
//组件二
Vue.component("list", {
template: `
`,
//激活缓存的时候打印组件能被看到
created() {
console.log("list created");
},
//缓存失活时打印 组件不能被看到
beforeDestroy() {
console.log("list beforeDestroy");
},
});
//组件三
Vue.component("about", {
template: `
`,
//激活缓存的时候打印组件能被看到
created() {
console.log("about created");
},
//缓存失活时打印 组件不能被看到
beforeDestroy() {
console.log("about beforeDestroy");
},
});3.创建实例。
Vue.component("home", {
data() {
return {
name: "张三",
};
},
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">
//
//
//active是样式来做高亮用v-bind来绑定
//@click自定义事件将实例里的数据改为home
//点击的时候会触发component内置标签更换为home
//用keep-alive内置组件包裹componet内置组件v-bind绑定max作用是最多缓存两个
//方法二
//排除法排除了about只有home与list可以缓存
//
//
//
//方法三
//选择缓存法只有home与list可以被缓存
//keep-alive include="home,list">
//
//
三种方法的具体用法在文章的开始的时候有介绍总结总结总结
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] 先进先出原则。需求:keep-alive 的使用方式:keep-alive优点的介绍:1.2.3.4.1.2.3.概念就这些上代码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");
},
});
//组件一
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: "张三",
};
},
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">
//
//
//active是样式来做高亮用v-bind来绑定
//@click自定义事件将实例里的数据改为home
//点击的时候会触发component内置标签更换为home
//用keep-alive内置组件包裹componet内置组件v-bind绑定max作用是最多缓存两个
//方法二
//排除法排除了about只有home与list可以缓存
//
//
//
//方法三
//选择缓存法只有home与list可以被缓存
//keep-alive include="home,list">
//
//
相关文章:
- jsvue 弹出遮罩层样式实例js大全
- js详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)js大全
- js解决Vue中的生命周期beforeDestory不触发的问题js大全
- jsvue中解决拖拽改变存在iframe的div大小时卡顿问题js大全
- jsvue中destroyed方法的使用说明js大全
- js在vue中created、mounted等方法使用小结js大全
- jseslint+prettier统一代码风格的实现方法js大全
- js解决Vue router-link绑定事件不生效的问题js大全
- jsvue 清空input标签 中file的值操作js大全
- js解决vue的touchStart事件及click事件冲突问题js大全