Vue watch用法详解

一、watch的基本使用

Vue.js提供了一种非常方便的方法来观察和响应Vue实例上的数据变化。通过使用watch选项来观察特定的数据属性，当该属性发生变化时，将自动执行所指定的回调函数。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('message变化了！新值为：' + newValue + '，旧值为：' + oldValue);
    }
  }
})

使用watch选项时，需要传入一个对象，该对象的属性是被观察的数据属性，其值为一个回调函数。当被观察的属性发生变化时，Vue.js会自动调用该回调函数，并将被观察属性的新值和旧值作为参数传递给该函数。

二、深度watch

在Vue.js中，如果我们想要监听某个对象的所有属性变化而不是只监听该对象的引用变化，则可以使用深度watch功能。

new Vue({
  data: {
    userInfo: {
      name: 'Tom',
      age: 20
    }
  },
  watch: {
    userInfo: {
      handler: function(newValue, oldValue) {
        console.log('userInfo变化了！新值为：' + JSON.stringify(newValue) + '，旧值为：' + JSON.stringify(oldValue));
      },
      deep: true
    }
  }
})

通过在watch选项中指定deep属性为true，就可以开启深度观察功能，Vue.js会递归地观察对象内部所有的属性，当任何一个属性发生变化时，都会触发回调函数。

三、立即触发watch

有时候，在Vue.js中我们需要在watch被定义时就立即执行一次回调函数，可以在watch选项中使用immediate属性来实现。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: {
      handler: function(newValue, oldValue) {
        console.log('message变化了！新值为：' + newValue + '，旧值为：' + oldValue);
      },
      immediate: true
    }
  }
})

当immediate属性被设置为true时，Vue.js会在watch定义时立即执行一次回调函数，并传递当前数据属性的新值和旧值。

四、计算watch

有些时候，我们需要基于多个数据属性计算出一个新的属性，并在该属性发生变化时执行回调函数。可以在watch选项中使用deep属性为false的计算watch实现。

new Vue({
  data: {
    firstName: 'Tom',
    lastName: 'Smith'
  },
  watch: {
    fullName: function(newValue, oldValue) {
      console.log('fullName变化了！新值为：' + newValue + '，旧值为：' + oldValue);
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在这个示例中，我们已经定义了一个计算属性fullName，该属性会基于firstName和lastName计算出一个新的值。在watch选项中，我们观察了该计算属性，当其发生变化时，就会调用该回调函数。

五、异步watch

有些时候，watch回调函数会触发异步操作，我们可以在watch选项中指定一个回调函数，该函数会在异步操作结束后被调用。

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: {
      handler: function(newValue, oldValue) {
        var vm = this;
        setTimeout(function() {
          console.log('message变化了！新值为：' + newValue + '，旧值为：' + oldValue);
          vm.asyncOperation();
        }, 1000);
      },
      immediate: true
    }
  },
  methods: {
    asyncOperation: function() {
      console.log('执行异步操作');
    }
  }
})

在这个示例中，watch回调函数使用了setTimeout模拟异步操作，在异步操作结束后调用了vm.asyncOperation方法。

六、总结

通过本文的介绍，我们可以看到Vue.js中watch用法非常灵活，可以满足大部分的数据观察和响应需求。我们可以根据具体的场景，采用不同的watch选项来完成我们想要的功能。