vue3 watch 深度监视

在Vue3中，使用watch进行深度监视可以通过设置deep选项为true来实现。默认情况下，Vue的watch只会监测对象的一层属性变化，而不会监测对象内部的值变化。但是可以通过设置deep选项为true来开启深度监视，以监测对象内部值的改变。

举例来说，假设我们有以下数据结构：

data: {
   numbers: {
      a: 1,
      b: 1,
      c: {
         d: {
            e: 100
         }
      }
   }
}

如果我们想要监视多级结构中所有属性的变化，我们可以使用watch，并将deep选项设置为true，如下所示：

watch(numbers, { deep: true }, (newValue, oldValue) => {
   console.log('numbers发生了变化', newValue, oldValue);
})

通过这样的设置，当numbers对象内部的任何属性发生变化时，都会触发watch的回调函数，并输出新值和旧值。

需要注意的是，深度监视可能会对性能产生一定的影响，因此在使用watch时要根据数据的具体结构，决定是否采用深度监视。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue使用watch深度监视](https://blog.csdn.net/weixin_46724415/article/details/121665562)[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】Vue3中监视watch和watchEffect使用（图文+代码）](https://blog.csdn.net/dxnn520/article/details/126463831)[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 ]