0
点赞
收藏
分享

微信扫一扫

如何使用vue的watch

zhyuzh3d 2024-01-07 阅读 12

在 Vue.js 中,watch 是一个对象,你可以使用它来观察和响应 Vue 实例上的数据变化。当被观察的数据发生变化时,对应的回调函数将会被执行。


以下是如何使用 watch 的基本示例:


javascript

new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

},

watch: {

message: function(newVal, oldVal) {

console.log('Message changed from ' + oldVal + ' to ' + newVal);

}

}

});

在这个例子中,我们正在观察 message 数据属性的变化。当 message 发生变化时,watch 对象的 message 属性对应的函数将被调用,打印出旧值和新值。


此外,你可以使用深度观察 (deep) 来观察嵌套对象的变化:


javascript

new Vue({

el: '#app',

data: {

user: {

name: 'John',

age: 30

}

},

watch: {

user: {

handler: function(newVal, oldVal) {

console.log('User changed');

},

deep: true // 深度观察 user 对象

}

}

});

在这个例子中,无论 user 对象的属性如何变化,都会触发 handler 函数。如果你不设置 deep,那么只有 user 对象引用改变时才会触发。


除了 handler,你还可以使用 immediate 选项来立即执行观察器:


javascript

new Vue({

el: '#app',

data: {

count: 0

},

watch: {

count: {

immediate: true, // 立即执行观察器

handler: function(newVal, oldVal) {

console.log('Count is now ' + newVal);

}

}

}

});

在这个例子中,handler 函数将在初始化时立即执行,打印出 "Count is now 0"

举报

相关推荐

0 条评论