Vue3 中监听 reactive 对象属性变化的方式

在 Vue3 中，reactive 对象用于创建响应式数据。而监听 reactive 对象属性的变化是实现复杂交互逻辑的关键。下面将详细介绍几种常见的监听方式。

我们可以使用 watchEffect 函数来监听 reactive 对象属性的变化。watchEffect 会立即执行传入的回调函数，并在回调函数中依赖的响应式数据发生变化时重新执行。

import { reactive, watchEffect } from 'vue'

const state = reactive({ count: 0 })

watchEffect(() => {
  console.log(`Count changed: ${state.count}`)
})

watch 函数也是一种常用的监听方式。它可以更精确地指定要监听的属性，并提供旧值和新值。

import { reactive, watch } from 'vue'

const state = reactive({ count: 0 })

watch(() => state.count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

另外，在组合式 API 中，还可以结合 computed 计算属性来监听 reactive 对象属性的变化。

import { reactive, computed, watch } from 'vue'

const state = reactive({ count: 0 })

const doubleCount = computed(() => state.count * 2)

watch(doubleCount, (newValue, oldValue) => {
  console.log(`Double count changed from ${oldValue} to ${newValue}`)
})

需要注意的是，在监听 reactive 对象属性变化时，要确保在合适的时机进行监听，避免不必要的重复计算和性能消耗。

根据具体的业务需求，选择最适合的监听方式能够提高代码的可读性和可维护性。比如，如果只需要在属性变化时执行一些副作用操作，watchEffect 可能是一个简单有效的选择；而如果需要获取属性变化的旧值和新值进行更复杂的逻辑处理，watch 则更为合适。

熟练掌握 Vue3 中监听 reactive 对象属性变化的方式，能够让我们更加高效地开发出具有丰富交互功能的应用程序。