vue3 watch的使用

在Vue 3中，可以使用watch函数来监听响应式数据的变化。watch函数的参数包括要监听的数据源、回调函数和一些可选的选项。

首先，你可以使用`reactive`函数创建一个响应式对象。例如，你可以创建一个名为`person`的响应式对象，其中包含姓名、年龄和性别属性。你可以使用`watch`函数来监听`person`对象的变化，并在变化时执行回调函数。

const person = reactive({ name: "柳小刀", age: 18, sex: "男" });

watch(person, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

在这个例子中，当`person`对象的属性发生变化时，回调函数将被执行，并打印出新值和旧值。

除了监听单个数据源，你还可以监听多个数据源。例如，你可以同时监听`count`和`double`两个响应式变量的变化。

const count = ref(1);
const double = ref(2);

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

在这个例子中，当`count`或`double`发生变化时，回调函数将被执行，并打印出新值和旧值。

此外，你还可以通过选项对象来配置watch函数的行为。例如，你可以使用`immediate: true`来使watch函数在初始化时立即执行回调函数。

const count = ref(1);

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

在这个例子中，当`count`发生变化时，回调函数将被立即执行，并打印出新值和旧值。

综上所述，Vue 3中的watch函数可以用于监听响应式数据的变化。你可以监听单个数据源或多个数据源，并通过选项对象来配置其行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]