vue3如何深度监听对象

Vue3 中通过使用 `reactive` 函数创建响应式数据对象，然后使用 `watch` 函数对该对象进行深度监听。具体步骤如下：
1. 使用 `import { reactive, watch } from 'vue'` 导入 reactive 和 watch 函数。
2. 使用 `reactive` 函数创建响应式数据对象。
3. 使用 `watch` 函数对该对象进行监听，并设置 `deep: true` 参数，从而实现深度监听。

例如：

import { reactive, watch } from 'vue'

const obj = reactive({
  a: {
    b: 1
  }
})

watch(() => obj, (newVal, oldVal) => {
  console.log('obj changed:', newVal, oldVal)
}, { deep: true })

这样就可以对对象 obj 进行深度监听了，当 obj 中的属性发生改变时，会触发 watch 回调函数打印出新旧的值。

相关问题

vue3 watch深度监听对象

在Vue 3中，使用watch函数进行深度监听对象的方法如下：首先，在setup函数内部创建一个ref对象，并将其作为监听对象传入watch函数。然后，在监听回调函数内部对新旧值进行处理。最后，在第三个参数对象中设置deep属性为true，表示进行深度监听。例如，可以使用以下代码进行深度监听对象：

import { ref, watch } from 'vue';

const obj = ref({ name:'clt', age:'18' });

watch(obj, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}, { deep: true });

在这个例子中，obj是要进行深度监听的对象，监听回调函数接收新值newVal和旧值oldVal作为参数，并在控制台输出。通过将deep属性设置为true，可以实现对obj对象的深度监听。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3的watch监听的多种情况](https://blog.csdn.net/m0_57482322/article/details/123157229)[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%"]
- *3* [vue3基础（五）watch(浅监听及深度监听)，鼠标及键盘修饰符，v-model，对象写法，class使用数组，字符串...](https://blog.csdn.net/c62387723sq/article/details/126006732)[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 ]

vue3深度监听

在 Vue3 中，可以使用 `watch` 和 `watchEffect` 两种方式进行深度监听。

1. `watch`：可以手动指定监听对象，当指定的对象发生变化时，执行回调函数。若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watch(
      () => obj,
      (newObj, oldObj) => {
        console.log('obj changed', newObj, oldObj);
      },
      { deep: true }
    );

    return { obj };
  },
};
</script>

2. `watchEffect`：自动追踪数据依赖，并在其变化时执行回调函数。同样，若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watchEffect(() => {
      console.log('obj changed', obj);
    }, { deep: true });

    return { obj };
  },
};
</script>