vue3 watch使用

Vue3中的watch函数用于监视数据的变化，并在数据发生变化时执行相应的回调函数。它可以用于监视简单的数据变化，也可以用于监视对象或数组中的特定属性的变化。

对于简单的数据变化，可以直接传入一个ref对象作为第一个参数，并在回调函数中接收新值和旧值作为参数。例如，监视一个数字的变化可以按照以下方式使用watch函数：

let count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

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

对于对象中的某个属性的变化，可以使用计算属性或者getter函数来监视属性的变化。例如：

// 上方代码watch改写为
watch(() => student.name, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

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

需要注意的是，在Vue3中，由于Proxy的引入，默认开启了深度监视，即使是监听深层次的数据也可以监听到变化。因此，不需要额外设置选项来实现深度监视。

总结起来，Vue3中的watch函数可以用于监视简单的数据变化和对象中特定属性的变化。通过传入不同的参数，可以灵活地使用watch函数来满足不同的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3中的watch的用法和几种常见情况](https://blog.csdn.net/weixin_44437816/article/details/124641625)[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_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]