Vue watch属性

S_h_a_2023-11-16 8:34

1. watch 侦听器（监视器）

作用：监视数据变化，执行一些 业务逻辑 或异步操作。

语法：

（1）简单写法

简单类型数据，直接监视；（这里需要注意的是，假如我要监视一个对象，那么在watch 中

写的时候要用引号将其进行引用）

data: { 
    words: '苹果',
    obj: {
        words: '苹果'
    }
},

watch: {
    // 该方法会在数据变化时，触发执行
       数据属性名 (newValue, oldValue) {
            一些业务逻辑 或 异步操作。
        },

    '对象.属性名' (newValue, oldValue) {
        一些业务逻辑 或 异步操作。
    }
}

（2）完整写法

添加额外配置项

data: {
    obj: {
        words: '苹果',
        lang: 'italy'
    },
   },

watch: {// watch 完整写法
    数据属性名: {
        deep: true, // 深度监视
        handler (newValue) {
        // 一些 业务逻辑 或 异步操作 
        console.log(newValue)
        }
    }
   }

参考：

033-watch-完整写法_哔哩哔哩_bilibili

小Tips：

1.与页面渲染无关的，我们可以不在data中进行定义，将其作为一个对象；

2.防抖处理：即写延迟器，延迟执行，干啥事情先等一会儿；