VUE---watch监听器

2026/9/14 8:26:30 拓冰建站浏览量

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

语法：

① 简单写法 → 简单类型数据，直接监视

watch : {

        // 该方法会在数据变化时，触发执行

         数据属性名 (变化后的值, 变化前的值) {

                 一些业务逻辑或异步操作

        },

        '对象.属性名' (变化后的值, 变化前的值) {

                 一些业务逻辑或异步操作

        }

}

示例如下：

data: {words: '',objInfo: {name: ''}
},
watch: {words(newVal, oldVal) {console.log(newVal, oldVal)},'objInfo.name'(newVal, oldVal) {console.log(newVal, oldVal)}
}

② 完整写法 → 添加额外配置项

(1) deep: true 对复杂类型深度监视，当对象的任一属性改变后，都可以侦听到

(2) immediate: true 立即侦听 ，页面刷新立刻执行一次handler方法

watch: {// watch 完整写法

         数据属性名: {

immediate : true , // 立即侦听

                 deep : true , // 深度监视

                 handler ( newValue, oldeValue ) {

                         console .log ( newValue, oldeValue )

                }

        }

}

示例如下：

data: {obj: {name: ''}
},
watch: {obj: {handler(newVal, oldVal) {console.log(newVal, oldVal)},deep: true,immediate: true}
}

非对象模式也可以使用语法2的形式书写

建站实战干货

VUE---watch监听器