this.$watch中两个参数的问题
老师您好,
watch侦听器当data中的数据发生变化时执行,但我不明白this.$watch()方法为何传入 key 和 (value) => {} 这两个参数?
我理解这是不是一个Vue的规定?
this.$watch(参数1,参数2)
参数1:监听的数据
参数2:数据发生变化时执行的回调函数
代码块:
for (let key in this.$options.rules) {
const item = this.$options.rules[key];
this.$watch(key, (value) => {
const result = item.validate(value);
if (!result) {
console.log(item.message);
}
})
}-------------------------------------------------------------
之前watch侦听器课程讲的是watch是一个对象,监听的变量price写成的变量方法price(),方法中还可传两个参数:
watch: {
监听的变量 (参数1,参数2)
}
参数1:改变后的值
参数2:改变前的值
const app = Vue.createApp({
data() {
return {
count: 2,
price: 5,
newTotal: 10
}
},
watch: {
price(current, prev) {
// 当监听到price值变化时
// 总价改变
this.newTotal = this.count * current;
}
},
template: `
<div> {{newTotal}} </div>
`
});
const vm = app.mount('#root');看下来实例中的watch对象与this.$watch() 在语法结构上有比较大的区别,这两者都要单独记忆吗?
25
收起
正在回答
1回答
同学你好,解答如下:
1、这是两种不用的写法:
watch:{}叫选项式

this.$watch()是实例上的方法(组合式)

虽然写法不同,但是作用是一样的,实例上的方法这种vue3中常用,因为是分离的。
2、不论是选项式还是实例方法,参数都是规定的。在watch:{}中写的是监听数据方法,那么对应到watch()方法中用回调去处理,这样好理解一些。不用特殊记忆,写的多了就记住了。
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星