Vue2 中使用 watch 观察数据变化

在 Vue2 中，你可以使用 'this.$watch' 来观察和响应数据的变化。在 'watch' 选项中，你可以指定一个或多个要观察的数据，以及一个回调函数来处理数据变化时的逻辑。

以下是一个使用 'watch' 的示例：

new Vue({
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message 变化了：', newValue, oldValue);
    },
  },
});

在上面的示例中，我们在 'data' 选项中定义了一个 'message' 属性，并在 'watch' 选项中将其指定为要观察的数据。当 'message' 的值发生变化时，回调函数将被触发，并且传入两个参数：新值和旧值。

你还可以使用 'vm.$watch' 方法来观察数据。例如：

this.$watch('message', (newValue, oldValue) => {
  console.log('message 变化了：', newValue, oldValue);
});

这将在 Vue 实例中创建一个新的观察者，它将观察 'message' 数据的变化，并在变化时执行回调函数。

请注意，使用 'watch' 选项或 'vm.$watch' 方法来观察数据的变化，是为了在数据发生变化时执行一些特定的逻辑，而不是直接获取数据。你可以在回调函数中访问和处理数据。如果你只是想获取数据的当前值，可以直接通过 'this.message' 来获取。