Vue3中如何使用deep watcher？

在Vue3的开发过程中，deep watcher（深度监听）是一个非常实用的功能，它能帮助开发者监听对象或数组内部深层次的变化，下面我们就来详细探讨Vue3中如何使用deep watcher。

什么是deep watcher？

在Vue中，watcher（监听器）用于观察数据的变化并执行相应的操作，而deep watcher则是一种特殊的监听器，它不仅可以监听数据的直接变化，还能深入监听对象或数组内部嵌套数据的变化，当我们有一个复杂的对象，其内部某个深层属性发生改变时，普通的watcher可能无法感知到这种变化，而deep watcher就能做到。

为什么需要deep watcher？

在实际项目中，我们经常会遇到处理复杂数据结构的情况，比如一个包含多层嵌套对象和数组的状态数据，以一个电商购物车为例，购物车中的商品列表可能是一个数组，每个商品又是一个对象，包含商品的各种属性如名称、价格、数量等，甚至商品对象中还可能有嵌套的对象用于存储商品的详细规格信息，当用户修改商品数量或者某个规格时，如果没有deep watcher，我们很难及时捕捉到这些深层次的变化，从而无法及时更新购物车的总价等相关数据显示，deep watcher对于确保复杂数据结构的实时响应和处理至关重要。

在Vue3中如何使用deep watcher？

在Vue3中，使用watch函数来创建监听器，通过设置deep选项为true来开启深度监听,下面通过一个简单的示例代码来演示：

<template>
  <div>
    <input v-model="user.name" type="text" placeholder="输入姓名">
    <input v-model="user.age" type="number" placeholder="输入年龄">
    <pre>{{ user }}</pre>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref({
  name: '张三',
  age: 20,
  address: {
    city: '北京',
    street: '长安街'
  }
});
watch(user, (newValue, oldValue) => {
  console.log('用户信息变化了：', newValue, oldValue);
}, {
  deep: true
});
</script>

在上述代码中，我们定义了一个user的响应式对象，它包含了name、age以及嵌套的address对象，通过watch函数监听user对象，并且设置deep: true开启深度监听，这样，无论user对象的直接属性（如name、age）还是嵌套属性（如address.city）发生变化，都会触发监听器的回调函数,并在控制台打印出变化后的新值和旧值。

使用deep watcher有哪些注意事项？

1. 性能问题：由于deep watcher会递归遍历对象或数组的所有属性，深度监听会带来一定的性能开销，尤其是在监听非常庞大复杂的数据结构时，这种开销可能会比较明显，在使用deep watcher时，要确保确实有必要对整个数据结构进行深度监听，如果只是需要监听某个特定的深层属性变化，可以考虑采用其他更轻量级的方式，比如计算属性结合普通的watcher，如果我们只关心user.address.city的变化,可以这样做：

<template>
  <div>
    <input v-model="user.address.city" type="text" placeholder="输入城市">
    <pre>{{ user }}</pre>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref({
  name: '张三',
  age: 20,
  address: {
    city: '北京',
    street: '长安街'
  }
});
const city = computed(() => user.value.address.city);
watch(city, (newValue, oldValue) => {
  console.log('城市变化了：', newValue, oldValue);
});
</script>

这样只监听city的变化，避免了对整个user对象进行深度监听带来的性能损耗。

2. 新旧值比较：开启深度监听后，由于对象内部深层次属性变化频繁，在监听器回调函数中获取到的newValue和oldValue可能并不是你期望的那样直观，当对象内部某个深层属性变化时，newValue和oldValue可能看起来是完全相同的对象，因为它们的引用没有改变，只是内部属性改变了，为了准确比较新旧值的差异，可能需要使用一些工具函数，如lodash的isEqual方法。

<template>
  <div>
    <input v-model="user.address.city" type="text" placeholder="输入城市">
    <pre>{{ user }}</pre>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { isEqual } from 'lodash';
const user = ref({
  name: '张三',
  age: 20,
  address: {
    city: '北京',
    street: '长安街'
  }
});
watch(user, (newValue, oldValue) => {
  if (!isEqual(newValue, oldValue)) {
    console.log('用户信息有实际变化：', newValue, oldValue);
  }
}, {
  deep: true
});
</script>

3. 监听数组变化：当使用deep watcher监听数组时，也要注意一些特殊情况，数组的一些变异方法（如push、pop、splice等）会触发数组的变化，从而被deep watcher监听到，但如果是通过索引直接修改数组元素，在Vue3中，默认情况下不会触发响应式更新，除非使用Vue.set（在Vue3中是import { set } from 'vue'; set(target, propertyName, value)）来进行修改。

<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="changeItem">修改项目</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref, watch, set } from 'vue';
const list = ref(['苹果', '香蕉']);
watch(list, (newValue, oldValue) => {
  console.log('数组变化了：', newValue, oldValue);
}, {
  deep: true
});
const addItem = () => {
  list.value.push('橙子');
};
const changeItem = () => {
  // 这种直接通过索引修改的方式默认不会触发响应式更新和监听器
  // list.value[0] = '草莓'; 
  // 使用set方法来修改
  set(list.value, 0, '草莓');
};
</script>

如何在组件间使用deep watcher传递数据变化？

在Vue3的组件化开发中，我们经常需要在不同组件之间共享数据并监听其变化，假设我们有一个父组件和一个子组件，父组件传递一个复杂对象给子组件,并且希望在子组件中对这个对象进行深度监听。

父组件代码如下：

<template>
  <div>
    <child :data="parentData"></child>
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>
<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
const parentData = ref({
  message: '初始消息',
  details: {
    count: 0
  }
});
const updateParentData = () => {
  parentData.value.message = '更新后的消息';
  parentData.value.details.count++;
};
</script>

子组件代码如下：

<template>
  <div>
    <p>{{ data.message }}</p>
    <p>{{ data.details.count }}</p>
  </div>
</template>
<script setup>
import { watch } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});
watch(props.data, (newValue, oldValue) => {
  console.log('子组件监听到数据变化：', newValue, oldValue);
}, {
  deep: true
});
</script>

在上述代码中，父组件将parentData传递给子组件，子组件通过props接收并使用deep watcher监听其变化，当父组件更新parentData时,子组件能够及时感知到变化并执行相应的操作。

通过以上对Vue3中deep watcher的详细介绍，相信你对如何使用deep watcher以及在使用过程中的注意事项有了更清晰的认识，在实际项目开发中，合理运用deep watcher可以有效地处理复杂数据结构的变化监听，提升应用的交互性和响应性。