Vue 3 中 watch 函数的使用方法 - 监听数据变化的最佳实践

在 Vue 3 中，可以使用 `watch` 函数来监听数据的变化。`watch` 函数的基本语法如下：\n\njavascript\nwatch(source, callback, options)\n\n\n其中，`source` 可以是一个响应式的数据，也可以是一个返回响应式数据的函数。`callback` 是一个回调函数，用于处理数据变化时的逻辑。`options` 是一个可选参数对象，用于配置 `watch` 的行为。\n\n下面是一些 `watch` 的使用示例：\n\n1. 监听一个响应式数据的变化：\n\njavascript\nconst count = ref(0);\n\nwatch(count, (newValue, oldValue) => {\n console.log(`count changed from ${oldValue} to ${newValue}`);\n});\n\n\n2. 监听一个返回响应式数据的函数的变化：\n\njavascript\nconst count = ref(0);\n\nconst getCount = () => {\n return count.value;\n};\n\nwatch(getCount, (newValue, oldValue) => {\n console.log(`count changed from ${oldValue} to ${newValue}`);\n});\n\n\n3. 使用 `immediate` 选项来立即执行回调函数：\n\njavascript\nconst count = ref(0);\n\nwatch(count, (newValue, oldValue) => {\n console.log(`count changed from ${oldValue} to ${newValue}`);\n}, { immediate: true });\n\n\n4. 使用 `deep` 选项来深度监听对象或数组的变化：\n\njavascript\nconst obj = reactive({ name: 'John', age: 30 });\n\nwatch(obj, (newValue, oldValue) => {\n console.log('obj changed');\n}, { deep: true });\n\n\n5. 使用 `watchEffect` 函数来监听一个响应式数据的变化，并自动执行回调函数：\n\njavascript\nconst count = ref(0);\n\nwatchEffect(() => {\n console.log(`count changed to ${count.value}`);\n});\n\n\n这些示例展示了在 Vue 3 中使用 `watch` 的一些常见用法，你可以根据自己的需求选择适合的方式来监听数据的变化。