Vue3的watch用法

Vue3中的watch函数可以用来监听数据的变化并执行相应的回调函数。在默认情况下，watch是惰性的，即只有在数据发生变化时才会执行回调函数。可以通过设置immediate: true来在初始化时立即执行回调函数。例如，可以使用ref函数创建一个响应式的数据count，并通过watch监听其变化：

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { immediate: true });

除了监听单个数据源外，还可以监听多个数据源。可以将多个数据源放在一个数组中，并通过watch监听它们的变化。例如：

const count = ref(1);
const double = ref(2);
watch(\[count, double\], (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { deep: true, immediate: true });

此外，还可以使用reactive函数创建一个响应式的对象，并通过watch监听其属性的变化。例如：

const single = reactive({ count: 1, test: 2 });
watch(() => single.count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { immediate: true });

还可以监听整个响应式对象的变化。例如：

const person = reactive({ name: "柳小刀", age: 18, sex: "男" });
watch(person, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

总结起来，Vue3的watch函数可以用来监听单个数据、多个数据以及整个响应式对象的变化，并执行相应的回调函数。
#### 引用[.reference_title]
- *1* *2* [vue3下watch的使用](https://blog.csdn.net/weixin_42349568/article/details/126760186)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue3 watch的用法](https://blog.csdn.net/m0_60899441/article/details/126056663)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]