vue3watch的使用

在Vue 3中，`watch`函数是用来监听数据变化并执行相应操作的。它可以用于监听各种类型的数据变化，并在数据发生变化时执行自定义的操作。通过`watch`函数，我们可以实现更加灵活的业务逻辑。\[1\]

使用`watch`函数的基本语法如下：

watch(
  // 监听的目标，可以是一个响应式对象、一个计算属性或一个函数
  目标,
  // 回调函数，当目标发生变化时执行
  (newVal, oldVal) => {
    // 执行自定义的操作
  }
)

例如，我们可以通过监听一个响应式对象来实现数据的实时更新。假设我们有一个响应式对象`state`，其中包含一个属性`count`，我们可以使用`watch`函数来监听`state.count`的变化，并在变化时执行相应的操作。\[2\]

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0,
})

watch(
  () => state.count,
  (newCount, oldCount) => {
    console.log(`count发生了变化：${oldCount} -> ${newCount}`)
  }
)

state.count++ // 输出 "count发生了变化：0 -> 1"

除了`watch`函数，Vue 3还提供了`watchEffect`函数来简化代码。`watchEffect`函数允许我们自动跟踪回调的响应式依赖。使用`watchEffect`函数，我们可以直接在回调函数中使用响应式对象，而无需显式地指定监听的目标。\[3\]

import { ref, watchEffect } from "vue";

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

function changObj() {
  obj.value.name += '我不好';
}

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

在上面的例子中，我们使用`watchEffect`函数来监听`obj.value.name`的变化，并在变化时打印出新的值。当我们点击按钮`changObj`时，`obj.value.name`的值会发生变化，从而触发`watchEffect`的回调函数，打印出新的值。
#### 引用[.reference_title]
- *1* *2* [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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]