vue3中的watch

在Vue3中，watch是通过`watchEffect`和`watch`两种方式实现的。

`watchEffect`会监听响应式数据的变化，并在数据发生变化时自动执行回调函数。这个回调函数可以包含对响应式数据的任何访问，因为Vue会自动跟踪这些访问并在数据变化时重新运行回调函数。

举个例子，如果我们有一个响应式数据`count`，我们可以使用`watchEffect`监听它的变化：

import { watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`Count changed to ${count.value}`)
})

每次`count`的值发生变化时，我们都会看到一个日志输出。

除了`watchEffect`，我们还可以使用`watch`来监听特定的响应式数据。

import { watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

这个例子中，我们通过`watch`监听`count`的变化，当`count`的值发生变化时，我们会看到一个日志输出，显示新旧值。与`watchEffect`不同，我们需要显式地指定要监听的响应式数据。

相关问题

Vue3中watch

在Vue3中，可以使用watch函数来监听数据的变化。根据引用、引用和引用的内容，我们可以得出以下结论：

1. 可以监听对象的子属性，使用方式为watch(() => ({ ...demo }), (newValue, oldValue) => { console.log('watch 已触发', newValue) })。这样当demo的某个子属性发生变化时，watch函数会被触发，并打印出新的值。

2. 可以直接监听一个具体的属性，使用方式为watch(nums, () => {})或watch(() => demo.name, () => {})。这样当nums或demo.name发生变化时，watch函数会被触发。

3. 还可以监听整个对象，使用方式为watch(demo, (newValue, oldValue) => { console.log('watch 已触发', newValue) })。这样当整个demo对象发生变化时，watch函数会被触发，并打印出新的值。

总结起来，Vue3中的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_42776027/article/details/125759685)[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 ]

vue3中watch

在Vue 3中，`watch`选项已经被移除，并被替换为了新的`watch`函数。新的`watch`函数提供了更强大和灵活的功能。

使用新的`watch`函数，你可以通过以下方式进行声明：

watch(source, callback, options)

其中：

- `source`可以是一个响应式的数据源，可以是一个ref、reactive对象或者一个计算属性。
- `callback`是一个回调函数，用于处理数据变化的逻辑。
- `options`是一个可选参数对象，用于配置watch的行为。

下面是一个使用`watch`函数的简单示例：

import { watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newCount, oldCount) => {
      console.log(`count changed from ${oldCount} to ${newCount}`);
    });

    return {
      count
    };
  }
}

在上面的示例中，我们创建了一个名为`count`的ref，并使用`watch`函数监视它的变化。当`count`发生变化时，回调函数将被触发，并打印出旧值和新值。

除了基本的用法之外，`watch`函数还提供了一些高级的特性，例如：

- 可以使用`immediate`选项在初始加载时立即执行回调函数。
- 可以使用`deep`选项来深度遍历对象的属性变化。
- 可以使用`flush`选项来控制回调函数的执行时机。

更多关于Vue 3的`watch`函数的详细信息，请参考Vue官方文档。