vue3watch方法的使用

在Vue 3中，`watch`函数是用来监听数据变化的。通过`watch`函数，我们可以在数据发生变化时执行一些自定义的操作。使用`watch`函数的基本语法是：

watch(source, callback, options)

其中，`source`是要监听的数据，可以是一个响应式对象、一个计算属性或一个方法的返回值；`callback`是当数据变化时要执行的回调函数；`options`是一个可选参数对象，用于指定回调函数的执行时机以及其他选项。

例如，通过以下代码来监听一个响应式对象`obj`的变化，并在每次变化时打印出`obj.name`的值：

import { ref, watch } from "vue";

const obj = ref({ name: '你好' });

watch(obj, () => {
  console.log(obj.value.name);
});

在这个例子中，我们使用了`ref`函数将普通的对象转化为响应式对象，然后通过`watch`函数来监听`obj`的变化。每当`obj.name`的值发生变化时，回调函数就会被执行，并打印出最新的值。

需要注意的是，在使用`watch`函数时，我们要合理选择监听的目标以及回调函数的执行时机，以避免性能问题。另外，如果想在侦听器回调中能访问被Vue更新之后的DOM，可以使用`flush: 'post'`选项，如：

watch(source, callback, { flush: 'post' })

这样可以确保回调函数在Vue更新DOM之后执行。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3中watch的用法及讲解](https://blog.csdn.net/qq_70703397/article/details/130558829)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3中watch的用法](https://blog.csdn.net/ct5211314/article/details/129860994)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]