Vue.Js中的$watch()方法总结

首先，我们需要了解$watch()方法是什么以及它的作用。$watch()是Vue.js中一个重要的观察者模式，在Vue.js中可以通过$watch()方法来监视某个数据对象的变化，一旦发生变化就执行回调函数。下面详细介绍它的用法。

监听对象watch

简单的例子

我们可以通过如下代码创建一个简单的对象，并监听其中一个属性：

var data = {message: 'Hello World'};
var vm = new Vue({
    data: data
});

vm.$watch('message', function(newValue, oldValue) {
    console.log('数据变化了', newValue, oldValue);
});

在这个例子里，我们创建了一个Vue实例 vm，并把一个数据对象data作为Vue实例的data属性。在后面通过$watch()方法来监听message属性的变化。一旦message属性发生变化就会执行传入的回调函数并打印出新值和旧值。

深度监听对象

有时候，我们要监听的是一个对象的某个嵌套属性的变化。这时，可以通过设置deep:true来实现深度监听。比如：

var data = {
    user: {
        name: 'Tom',
        age: 18,
        job: {
            title: 'Front-end Developer',
            salary: 10000
        }
    }
};

var vm = new Vue({
    data: data
});

vm.$watch('user', function(newValue, oldValue) {
    console.log('数据变化了', newValue, oldValue);
}, {deep:true});

在这个例子里，如果我们修改data.user.job.title的值，那么浏览器控制台就会输出数据变化了。

立即触发监听回调

在有些场景下，我们可能不想等到监听的值发生改变再去处理某些操作，而是立即就处理。这时可以通过设置immediate:true来实现。比如：

var data = {message: 'Hello World'};

var vm = new Vue({
    data: data
});

vm.$watch('message', function(newValue, oldValue) {
    console.log('数据变化了', newValue, oldValue);
}, {immediate:true});

在这个例子里，我们设置了immediate:true，所以当监听开始时，就会立即触发回调函数，打印数据变化了 Hello World undefined。

监听数组watch

简单的例子

我们可以通过如下代码创建一个简单的数组，并监听数组的变化：

var data = [1,2,3,4,5];

var vm = new Vue({
    data: data
});

vm.$watch('length', function(newValue, oldValue) {
    console.log('数组长度变化了', newValue, oldValue);
});

在这个例子里，我们创建了一个Vue实例 vm，并把一个数据数组data作为Vue实例的data属性。在后面通过$watch()方法来监听length属性的变化。由于数组的length属性会随着数组内容的变化而变化，所以数组内容的变化也会被监听到。

监听数组元素变化

有时候，我们需要监听数组元素的变化。Vue.js提供了$watch()的第三个参数options，通过设置options.deep:true即可实现。

var data = [{name:'Tom', age: 18}, {name:'Jerry', age: 19}];

var vm = new Vue({
    data: data
});

vm.$watch('0.age', function(newValue, oldValue) {
    console.log('元素变化了', newValue, oldValue);
}, {deep:true});

在这个例子里，我们可以看到，我们设置了监听数组元素的变化，并且指定监听的元素是第0个元素的age属性，所以当我们修改data[0].age的值时，就会发生输出元素变化了。