vue3的 watch

在Vue3中，watch函数允许我们监听数据的变化，并在数据发生变化时执行相应的操作。我们可以使用watch函数来监听单个数据、子属性或多个对象。

1. 监听单个数据：

watch(nums, () => {
  // 当nums发生变化时执行的操作
})

2. 监听对象的子属性：

watch(() => ({ ...demo }), (newValue, oldValue) => {
  // 当demo对象的子属性发生变化时执行的操作
  console.log('watch 已触发', newValue)
})

3. 在Vue3中，可以多次使用watch函数，通过多个watch方法来监听多个对象，而不像Vue2中将所有要监控的对象放在一个watch里面。

相关问题

vue3 watch

在 Vue 3 中，`watch` 函数是用于监听数据变化的。它可以监听响应式数据、计算属性以及其他依赖项的变化。

`watch` 函数有两种形式：基本用法和高级用法。

基本用法如下：

import { watch, reactive } from 'vue';

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

watch(
  () => state.count, // 被监听的数据
  (newVal, oldVal) => {
    // 数据发生变化时执行的回调函数
    console.log(`count 值从 ${oldVal} 变为 ${newVal}`);
  }
);

高级用法中，可以使用 `watchEffect` 函数来监听多个响应式数据的变化：

import { watchEffect, reactive } from 'vue';

const state = reactive({
  count1: 0,
  count2: 0,
});

watchEffect(() => {
  console.log(`count1 的值为 ${state.count1}`);
  console.log(`count2 的值为 ${state.count2}`);
});

在上述示例中，无论 `count1` 或 `count2` 的值发生变化，都会触发回调函数。

除了基本用法和高级用法外，`watch` 还支持传递选项对象，以控制监听行为。例如，可以使用 `immediate` 选项来立即执行一次回调函数：

watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(`count 值从 ${oldVal} 变为 ${newVal}`);
  },
  { immediate: true }
);

以上是 Vue 3 中 `watch` 函数的基本用法和一些高级用法的示例。根据具体需求，可以使用不同的方式来监听数据的变化。

vue3 WATCH

在Vue3中，watch用于监听数据的变化。相比Vue2，Vue3对watch进行了一些改进。在Vue3中，默认开启了深度监视，即使监听的是深层次的数据，也可以监听到其变化。例如，可以使用watch来监视一个数字的变化。比如，定义一个数字变量count，并使用watch来监听其变化。当count发生变化时，watch会触发回调函数，并传入新值和旧值作为参数。在回调函数中，可以对新值和旧值进行处理或执行其他操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue3中watch的详解](https://blog.csdn.net/weixin_44590591/article/details/124598751)[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_1"}}] [.reference_item style="max-width: 50%"]
- *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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]