Vue — 监听器(watch)使用

在 Vue.js 中，watch 选项用于监视数据的变化，并在数据变化时执行相应的操作。watch 可以监视一个或多个数据的变化，当被监视的数据发生变化时，可以触发预定义的回调函数。

一、简单写法

   <textarea name="" id="" cols="30" rows="10" v-model="word"></textarea>
 　　watch : {
            word (newValue,oldValue){
                console.log(newValue,oldValue)
            },
    }    

在上面的例子中，我们定义了一个名为 word 的数据属性，并使用 watch 选项来监视它的变化。当 word 的值发生变化时，会触发相应的回调函数，并传入新值 newValue 和旧值 oldValue。

 

 <textarea name="" id="" cols="30" rows="10" v-model="obj.name" readonly></textarea>
 watch : {
            'obj.name'(newValue){
                console.log(newValue)
            },
 }     

 

除了监视单个数据属性外，Vue 的 watch 选项还支持监视一个对象内部属性的变化，甚至是深层嵌套的属性

二、完整写法

watch : {
            obj:{
                deep : true, //深度监视
                immediate : true, //进入页面立刻执行
                handler (newValue){ //修改后的数据
                    console.log(newValue)
                }
            }
      }

在上面的示例中，当 obj 对象的任何属性发生变化时（包括嵌套的对象属性），都会触发 handler 回调函数，并且在页面加载时会立即执行一次回调函数，打印出修改后的数据。

这样的设置能够确保对对象的任何变化都能被及时监测到，并且在页面加载时立即执行一次回调函数，以确保对初始数据的处理。

需要注意的是，深度监视虽然可以监视对象内部属性的变化，但也会带来一定的性能开销，因此在使用深度监视时需要权衡是否真正需要对所有嵌套属性进行监视。