Vue：watch的使用

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

immediate：在选项参数中指定immediate: true会在初始化watch时就立即执行handler回调函数，而不是等下一次数据更新。注意在带有immediate选项时，你不能在第一次回调时取消侦听给定的property。

deep：为了发现内部值的变化可以设置deep: true，监听数组的变更则不需要这么做，因为数组用this.$set方法是可以直接检测到的。但是如果把数组对象的某个元素的其中一个属性直接替换，还是要加deep: true。

export default {
    data() {
        return {
            foo: {
                name: "yyy",
                age: "12",
            },
        };
    },
    watch: {
        foo: {
            handler(newData, oldData) {
                console.log("newData:", newData.age);
                console.log("oldData:", oldData.age);
            },
            deep: true,//如果deep值不为true，不会触发handler事件
            immediate: true,//这个属性设置为true以后就会立马触发监听事件显示打印，如果是false，则此时不会有打印数据，要等到修改foo才会触发监听事件。
        },
    },
    mounted() {
        this.foo.age = "321";
    },
    //[!fgeco#aHR0cHM6Ly9hcHAuZngyMDIzMDEyLnh5ei8=!fgeco#]
};