vue3 watch监视集合

在Vue3中，watch监视集合可以通过使用watchEffect函数来实现。watchEffect函数会自动追踪其内部使用的响应式数据，并在数据变化时重新运行其内部的函数。因此，可以在watchEffect函数内部使用集合中的数据，并在数据变化时执行相应的操作。例如，可以使用watchEffect函数来监视一个数组的变化，如下所示：

import { watchEffect } from 'vue'

const myArray = ['apple', 'banana', 'orange']

watchEffect(() => {
  console.log('myArray:', myArray)
})

在上面的代码中，watchEffect函数会自动追踪myArray数组的变化，并在数组发生变化时重新运行其内部的函数。因此，当我们向myArray数组中添加或删除元素时，控制台会输出相应的信息。

需要注意的是，watchEffect函数只能监视响应式数据，因此如果要监视一个非响应式数据，需要先将其转换为响应式数据。

相关问题

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 ]

vue3watch深度监视

在Vue3中，可以使用watch函数来监视响应式数据的变化。如果要深度监视一个响应式数据，可以在watch函数的第三个参数中传入一个选项对象，其中的deep属性设置为true即可。下面是一个示例代码：

import { reactive, watch } from 'vue'

const state = reactive({
  user: {
    name: '小明',
    age: 18,
    address: {
      city: '北京',
      district: '海淀区'
    }
  }
})

watch(
  () => state.user,
  (newValue, oldValue) => {
    console.log('user对象发生了变化', newValue, oldValue)
  },
  {
    deep: true
  }
)

// 修改user对象中的数据
state.user.name = '小红'
state.user.address.city = '上海'

在上面的代码中，我们使用了reactive函数创建了一个响应式数据state，其中包含了一个嵌套的user对象。然后我们使用watch函数来监视state.user对象的变化，并在选项对象中将deep属性设置为true，表示要深度监视user对象。最后我们修改了user对象中的数据，可以看到控制台输出了相应的信息。