vue2 监听

// 在 Vue 2 中，监听数据变化通常使用 watch 选项。下面是一个简单的示例代码，展示了如何监听一个数据属性的变化。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    // 监听 message 属性的变化
    message: function (newVal, oldVal) {
      console.log('message 已经从 ' + oldVal + ' 变为 ' + newVal);
    }
  }
});

// 解释说明：
// 1. `data` 定义了一个名为 `message` 的数据属性。
// 2. `watch` 选项用于监听 `message` 属性的变化。
// 3. 当 `message` 发生变化时，会触发相应的回调函数，并输出新旧值到控制台。

如果你需要更复杂的监听逻辑，比如深度监听对象的嵌套属性变化，可以使用 deep 选项：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    // 深度监听 user 对象的变化
    user: {
      handler: function (newVal, oldVal) {
        console.log('user 已经从', oldVal, '变为', newVal);
      },
      deep: true
    }
  }
});

// 解释说明：
// 1. `user` 是一个包含多个属性的对象。
// 2. 使用 `deep: true` 可以监听对象内部属性的变化。
// 3. 当 `user` 对象的任何属性发生变化时，都会触发相应的回调函数。