vue3数据监听watch/watchEffect的示例代码

那么现在我将为您讲解“Vue3 数据监听 watch / watchEffect 的示例代码”的完整攻略。简单来说，watch 和 watchEffect 都是 Vue3 中用于监听数据的方法，然而这两种方法的用法和特性是有所不同的。下面我将为您提供一个简单的示例代码：

import { reactive, watch, watchEffect } from 'vue'
const state = reactive({
  nums: [1, 2, 3],
  sum: 0
})
watch(
  () => state.nums,
  (newValue, oldValue) => {
    state.sum = newValue.reduce((a, b) => a + b)
  }
)
watchEffect(() => {
  console.log('sum has changed to:', state.sum)
})

以上示例代码中，我们首先创建了一个 reactive 数据对象，其中包含了一个 nums 数组和一个 sum 数字。接着，我们使用 watch 监听 nums 数组的变化，当它变化时就会执行回调函数，其中我们通过 reduce 计算出 nums 数组的总和，并将结果赋值给 sum。这样一来，当 nums 数组变化时，sum 数字也会自动更新。

另外，我们还使用了 watchEffect，它是一个立即执行的监听器，也就是说它会在初始化时就被执行一次，然后在每次 nums 数组或者 sum 数字发生变化时都会被重新执行。在本例中，我们利用 watchEffect 来输出 sum 数字的改变情况，从而能够更好地了解程序的运行状态。

除了以上示例以外，我再给出一个使用 watchEffect 监听计算属性的示例代码：

import { reactive, computed, watchEffect } from 'vue'
const state = reactive({
  nums: [1, 2, 3]
})
const sum = computed(() => {
  return state.nums.reduce((a, b) => a + b)
})
watchEffect(() => {
  console.log('sum has changed to:', sum.value)
})

以上示例代码中，我们首先创建了一个 reactive 数据对象，其中包含了一个 nums 数组。接着，我们利用 computed 计算属性来计算 nums 数组的总和，这样一来，sum 的值就会自动跟随 nums 数组的变化而变化。最后，我们使用 watchEffect 来监听 sum 的变化，并将其输出到控制台中。

以上就是关于 Vue3 数据监听 watch / watchEffect 的示例代码的攻略说明，希望对您有所帮助！