this.$watch中两个参数的问题

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() 在语法结构上有比较大的区别,这两者都要单独记忆吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,解答如下:

1、这是两种不用的写法:

watch:{}叫选项式

https://img1.sycdn.imooc.com//climg/631083c70979274107680510.jpg

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

https://img1.sycdn.imooc.com//climg/631083ef09e63b1807770405.jpg

虽然写法不同,但是作用是一样的,实例上的方法这种vue3中常用,因为是分离的。

2、不论是选项式还是实例方法,参数都是规定的。在watch:{}中写的是监听数据方法,那么对应到watch()方法中用回调去处理,这样好理解一些。不用特殊记忆,写的多了就记住了。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师