vue3中如何使用watch

在Vue 3中，使用watch可以监听对象的某个属性变化，也可以监听整个对象的变化。首先，你需要通过import语句引入watch函数。例如：import { watch } from "vue"。接下来，你可以在setup函数中使用watch函数来创建一个监视器。监视器的语法为：watch(expression, callback, options)。其中，expression可以是一个函数或者一个ref或reactive对象的属性路径。callback是当expression发生变化时要执行的回调函数。options是一个对象，可以用来设置一些选项。
如果你想监听对象的某个属性变化，你可以直接使用对象属性作为expression。例如：watch(() => obj.name, (cur, pre) => { console.log('cur',cur); })。这样，当obj.name发生变化时，回调函数就会被触发。
如果你想监听整个对象的变化，你可以使用watchEffect函数。watchEffect会立即执行一次回调函数，并在响应式对象发生变化时再次执行。使用watchEffect的语法为：watchEffect(callback)。例如：watchEffect(() => { console.log('obj',obj); })。这样，当obj对象的任何属性发生变化时，回调函数就会被触发。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue 3 学习笔记 (六)——watch 、watchEffect 新用法](https://blog.csdn.net/weixin_43880397/article/details/121489955)[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 ]