vue watch的使用

最新推荐文章于 2025-09-22 16:22:04 发布

原创最新推荐文章于 2025-09-22 16:22:04 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

vueJs 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
data:{
a: 1,
b:{
c: 1,
h: 1
}
},
watch:{
a (newValue, oldValue) {//普通的watch监听
console.log("a: "+newValue, oldValue);
},
b: {//深度监听，可监听到对象、数组的变化
handler(newValue, oldValue){
console.log("b.c: "+newValue.c, oldValue.c);//但是这两个值打印出来却都是一样的
},
deep:true
},
newValue (newValue, oldValue) {
console.log('b.h:' + newValue, oldValue)
}
},
computed: {
newValue () {
return this.b.h
}
}
})
vm.a = 2 //a: 2, 1 a的值变化时会被监听到
vm.b.c = 2 // b.c: 2,2 b是一个对象,需要深度监听才能捕捉到,但是两个值却是一样的，
vm.b.h = 2 // b.h: 2, 1 使用计算机属性就可以很好的监听到对象中改变的值了
</script>
</body>
</html>