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 星