vue.js-watch-完整写法

Vue.js提供了watch选项，用于观察Vue实例中的数据变化并做出相应的处理。watch选项接收一个对象，对象的每个属性都是一个要观察的表达式，属性的值是一个回调函数，用于处理数据变化时所需的逻辑。

以下是watch选项的完整写法和详细说明：

var vm = new Vue({
  data: {
    message: 'Hello Vue.js'
  },
  watch: {
    // 监听message属性的变化
    message: function (newValue, oldValue) {
      // 在message属性变化时执行的逻辑
      console.log('message属性的值从 ' + oldValue + ' 变为 ' + newValue);
    }
  }
})

在上面的例子中，创建了一个Vue实例"vm"，其中有一个data属性"message"，初始值为"Hello Vue.js"。在watch选项中定义了一个属性"message"，其值为一个回调函数。当"message"属性的值发生变化时，该回调函数会被调用，传入两个参数：新的值"newValue"和旧的值"oldValue"。在回调函数中可以编写处理数据变化的逻辑。

当我们修改"message"属性的值时，watch选项中的回调函数就会被自动调用，并打印出相应的信息。

例如，执行以下代码：

vm.message = 'Hello World';

会在控制台输出：

message属性的值从 Hello Vue.js 变为 Hello World

需要注意的是，watch选项中的回调函数只会在被观察的属性发生变化时被调用，所以在初始化时不会被执行。如果需要在初始化时执行一次回调函数，可以在watch选项中使用immediate属性。

var vm = new Vue({
  data: {
    message: 'Hello Vue.js'
  },
  watch: {
    // 监听message属性的变化，并在初始化时立即执行一次回调函数
    message: {
      handler: function (newValue, oldValue) {
        console.log('message属性的值从 ' + oldValue + ' 变为 ' + newValue);
      },
      immediate: true
    }
  }
})

在上面的例子中，添加了immediate属性并将其值设为true，表示在初始化时立即执行回调函数。执行以上代码会在控制台输出一次回调函数的信息。

总结一下，使用watch选项可以方便地观察Vue实例中数据的变化，从而执行相应的逻辑。可以通过配置回调函数来处理数据变化，并在需要的时候执行相应的操作。