Vue Watch 对象成员

在 Vue.js 中，"Watch" 是一个非常有用的功能，用于在数据发生变化时执行自定义的操作。通过 watch 对象成员，可以监视 Vue 实例的数据，并在数据变化时执行相应的操作。

语法

watch: {
  // 监视 Vue 实例的数据
  propertyName: {
    // 当数据发生变化时执行的回调函数
    handler(newValue, oldValue) {
      // 执行自定义的操作
    },
    // 是否立即执行回调函数，默认为 false
    immediate: false,
    // 是否深度监听对象的变化，默认为 false
    deep: false
  }
}

参数解释

• propertyName（字符串）：要监视的数据对象的属性名。
• handler（函数）：数据发生变化时执行的回调函数。回调函数接受两个参数，分别为新的属性值 newValue 和旧的属性值 oldValue。
• immediate（布尔值，可选）：是否立即执行回调函数，默认为 false。如果设置为 true，则在 watch 对象成员定义时立即执行一次回调函数。
• deep（布尔值，可选）：是否深度监听对象的变化，默认为 false。如果设置为 true，则会递归监听对象内部的属性变化。

示例

单个属性的监视

data() {
  return {
    message: 'Hello, Vue!'
  }
},
watch: {
  message: {
    handler(newValue, oldValue) {
      console.log(`属性值从 ${oldValue} 变为 ${newValue}`);
    },
    immediate: true
  }
}

上面的示例中，我们监视了 message 属性的变化，并在每次变化时打印出新的属性值和旧的属性值。

深度监听对象

data() {
  return {
    userInfo: {
      name: 'John Doe',
      age: 25
    }
  }
},
watch: {
  userInfo: {
    handler(newValue, oldValue) {
      console.log(`用户信息发生变化：`, newValue);
    },
    deep: true
  }
}

上面的示例中，我们通过将 deep 设置为 true，实现了对 userInfo 对象内部属性的变化进行深度监听。

总结

通过 Vue 的 watch 对象成员，我们可以方便地监视实例数据的变化，实现自定义的操作。它提供了很多选项，可以根据需求进行配置。从而使我们的 Vue 应用变得更加灵活和可控。