Vue.js 中的 $watch使用方法

Vue.js是一款流行的前端框架，提供了丰富的数据绑定和更新机制。其中，$watch是Vue.js提供的一个非常有用的功能，它可以用来监听对象的变化并进行响应，可以应用于各种场景。下面就详细介绍一下Vue.js中的$watch使用方法。

Vue.js中的$watch使用方法

基础语法

在Vue.js中，我们可以使用vm.$watch来创建$watch实例，并监听一个对象的变化。具体语法如下：

vm.$watch('obj.value', function (newVal, oldVal) {
    // do something when obj.value changes
})

其中，vm是Vue.js实例，obj是需要监听的对象，value是对象中的属性名，newVal和oldVal则表示对象新旧值。这个代码块会监听obj.value的变化，当值发生改变时执行回调函数中的代码。

示例：监听input值的变化

下面的示例演示了如何使用$watch来监听input输入框的变化：

<input v-model="msg">

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello'
    }
})

vm.$watch('msg', function (newVal, oldVal) {
    console.log('msg changed from ' + oldVal + ' to ' + newVal)
})

以上代码会创建一个Vue.js实例并监听msg的变化。当input中的值发生变化时，会打印出msg的新旧值。

深度监听

$watch还支持深度监听对象内部的属性变化。具体语法如下：

vm.$watch('obj', function (newVal, oldVal) {
    // do something when obj changes
}, {
    deep: true
})

其中，deep用于设置是否深度监听对象内部属性的变化。当我们需要监听一个对象内部属性的变化时，就需要将deep设置为true。

示例：监听对象内部属性的变化

下面的示例演示了如何使用$watch来监听一个对象内部属性的变化：

var vm = new Vue({
    el: '#app',
    data: {
        obj: {
            a: 'Hello',
            b: 'World'
        }
    }
})

vm.$watch('obj', function (newVal, oldVal) {
    console.log('obj changed from ' + oldVal + ' to ' + newVal)
}, {
    deep: true
})

vm.obj.a = 'Hi'

以上代码会创建一个Vue.js实例并监听obj对象的变化。当我们修改obj.a的值时，会打印出obj对象的新旧值。由于我们使用了deep:true，所以即使是深层嵌套的属性也能正常监听到。