vue3 watch 深度监听

在Vue 3中，watch选项提供了一种监听数据变化的方式。通过watch选项，你可以监视一个特定的数据属性，并在其发生变化时执行相应的操作。

深度监听是watch选项的一个特性，它允许你在监听对象或数组时进行递归的深度观察。当对象或数组中的嵌套属性发生变化时，深度监听会自动触发相应的回调函数。

要使用深度监听，你可以在watch选项中设置deep为true。例如：

watch: {
  myObject: {
    handler(newVal, oldVal) {
      // 对象发生变化时的操作
    },
    deep: true
  }
}

在上面的例子中，当myObject对象或其嵌套属性发生变化时，handler函数会被调用。注意，深度监听是递归的，它会遍历对象或数组的所有嵌套属性。

需要注意的是，深度监听可能会带来性能上的开销，因为它需要递归遍历整个对象或数组。因此，在使用深度监听时，要确保只在必要的情况下使用，并且避免监听过于复杂的数据结构。

相关问题

vue3 watch深度监听

在Vue3中，watch默认情况下只会监听对象的第一层属性，如果需要深度监听，可以通过设置`deep`选项为`true`来实现。具体实现方法如下所示：

import { watch } from 'vue'

watch(
  // 监听的对象
  () => state.obj,
  // 监听到变化后的回调函数
  (newVal, oldVal) => {
    console.log('newVal:', newVal)
    console.log('oldVal:', oldVal)
  },
  // 配置项
  {
    deep: true // 开启深度监听
  }
)

需要注意的是，当监听的对象为`Proxy`对象时，`oldValue`值将会出现异常，此时与`newValue`相同。如果需要监听`Proxy`对象的某个属性，可以通过在监听对象的回调函数中获取该属性的值来实现。另外，在Vue3中，强制开启了深度监听，无法关闭。

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 ]