Vue利用computed配合watch实现监听多个属性的变化 (解决每监听一个属性变化,就要调用一次接口,刷新数据)
Vue利用computed配合watch实现监听多个属性的变化 (解决每监听一个属性变化,就要调用一次接口,刷新数据)
·
原始方法(逐个监听)
- 当传递多个属性,而对应的接口,也需要传递过来的这几个属性作为入参的话,以下方法,不建议使用。
watch: {
open: {
handler(val) {
if (val) {
this.getList();
}
},
// 是否深度监听
deep: false,
// 是否立即监听
immediate: true
},
deptId: {
handler(val) {
if (val) {
this.getList();
}
},
deep: false,
immediate: true
},
id: {
handler(val) {
if (val) {
this.getList();
}
},
deep: false,
immediate: true
}
// 。。。。。。。。。。。。。。。
}
computed配合watch实现
- 因为watch可以监听计算属性computed,可以通过computed把所有要监听的数据组成对象,再去监听该对象。
computed: {
// 只要open, id, deptId这些某个值变动,那queryData对应的也就变动,watch就可以监听到。
queryData() {
const {open, id, deptId} = this
return{
open, id, deptId
}
}
},
watch: {
// 监听queryData的变化
queryData: {
handler(newVal) {
if (newVal.open) {
this.getList();
}
},
deep: true,
immediate: true
}
},
更多推荐
所有评论(0)