Vue 文档里 watch 函数的使用方式

在 Vue 开发中，watch 函数是一个强大且常用的工具，它允许我们监听数据的变化，并在数据发生变动时执行相应的操作。深入理解并熟练运用 watch 函数，能极大提升我们开发效率和优化代码逻辑。

watch 函数最基本的使用场景是对一个响应式数据进行监听。比如，我们有一个数据属性 message，希望在它的值发生变化时执行某些代码。在 Vue 组件中，我们可以这样使用：

export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`新值是: ${newValue}, 旧值是: ${oldValue}`);
    }
  }
}

在上述代码中，我们定义了一个 message 的监听器。当 message 的值发生变化时，watch 函数中的回调就会被触发，它接收两个参数：newValue 代表变化后的新值，oldValue 则是变化前的旧值。通过这两个参数，我们可以根据新、旧值的不同来执行相应的逻辑。

除了监听简单的数据属性，watch 还支持监听复杂的计算属性。假设我们有一个计算属性 computedMessage，它依赖于多个数据的计算结果：

export default {
  data() {
    return {
      part1: '',
      part2: ''
    }
  },
  computed: {
    computedMessage() {
      return this.part1 + this.part2;
    }
  },
  watch: {
    computedMessage(newValue, oldValue) {
      console.log(`计算属性新值: ${newValue}, 旧值: ${oldValue}`);
    }
  }
}

这样，当 part1 或 part2 发生变化导致 computedMessage 改变时，相应的 watch 回调就会执行。

另外，watch 函数还支持一些高级配置选项。例如，immediate 选项可以让监听器在创建时立即执行一次回调函数。deep 选项则用于深度监听对象内部属性的变化。

watch: {
  someObject: {
    handler(newValue, oldValue) {
      console.log('对象有变化');
    },
    immediate: true,
    deep: true
  }
}

在上述代码中，someObject 被深度监听，并且在组件创建时就会立即执行一次 handler 回调。

Vue 文档里的 watch 函数为开发者提供了灵活且强大的数据监听和响应机制。无论是简单的数据变化跟踪，还是复杂业务逻辑中的数据变动处理，合理运用 watch 函数都能让我们的代码更加健壮和高效。通过不断实践和探索，我们能更好地发挥其优势，打造出更优质的 Vue 应用程序。