vue中如何一次性监听多个数据?
答:有三种方式实现:(1)watch里面写多个监听方法;(2)将多个数据放在一个对象中,只监听这个对象的变化;(3)computed和watch连用,watch监听computed的属性:computed属性会在依赖变化后重新计算,如果我们在某个computed属性中依赖于我们想要监听的属性,当这些属性变化时,此computed属性也会被重新计算,然后只需监听此computed属性即可;利用com
·
答:有三种方式实现:
(1)watch里面写多个监听方法;
(2)将多个数据放在一个对象中,只监听这个对象的变化;
(3)computed和watch连用,watch监听computed的属性:
computed属性会在依赖变化后重新计算,如果我们在某个computed属性中依赖于我们想要监听的属性,当这些属性变化时,此computed属性也会被重新计算,然后只需监听此computed属性即可;利用computed属性依赖变化会导致重新计算的机制可以更加优雅的实现同时监听多个属性变化的效果,而且由于computed是有缓存机制的,性能上也更具优势。
方式(3)代码如下:
var vm = new Vue({
data() {
return {
sourceType: 1,
sourceOrder: 2,
sourceStatus: 3,
}
},
computed: {
changeData() {
const { sourceType, sourceOrder, sourceStatus } = this;
return {
sourceType,
sourceOrder,
sourceStatus,
};
}
},
watch: {
changeData: function(newV) {
this.$emit('change', newV);
}
}
})
更多推荐
已为社区贡献3条内容
所有评论(0)