Vue3中的deep computed你了解多少？

什么是Vue3中的deep computed呀？

在Vue3里呀，computed是用来创建计算属性的，它能根据依赖数据的变化自动重新计算结果哦，而deep computed呢，其实就是在处理复杂数据结构（比如嵌套很深的对象或者数组）的时候,能够深入到这些数据结构内部去进行计算属性相关的操作啦。

比如说，咱们有一个对象，里面又嵌套了好多层的其他对象或者数组，普通的computed可能就只能处理最外层的数据变化情况，但deep computed就不一样啦，它能察觉到里面深层次的那些数据的改动,然后准确地重新计算相关的属性值呢。

举个例子哈，假如有个用户信息的对象,像这样：

const userInfo = reactive({
  name: '小明',
  age: 20,
  hobbies: ['篮球', '音乐'],
  address: {
    city: '北京',
    district: '朝阳区',
    details: {
      street: 'XX街',
      building: 'XX号楼'
    }
  }
});

要是咱们想根据这个用户信息里面深层次的比如地址详情里的街道名称变化来更新一个显示完整地址的计算属性，这时候就可能需要用到deep computed啦，它能时刻关注到 userInfo.address.details.street 这种深层次数据的改变哦。

啥时候该用Vue3的deep computed呢？

当你的数据结构比较复杂，存在多层嵌套，并且你需要根据这些嵌套数据内部的某个值的变化来更新某个计算出来的结果时，那就得考虑用deep computed啦。

就好比刚刚说的用户信息那个例子，如果我们要生成一个完整地址的字符串，格式是 “城市 + 区 + 街道 + 楼号”，像 “北京朝阳区XX街XX号楼” 这样，而且只要里面任何一层地址相关的数据变了，这个完整地址的字符串都要跟着更新准确的话，那普通的computed可能就搞不定啦，因为它没办法那么细致地关注到深层次的变化呀，这时候deep computed就派上用场啦，它能深入到 userInfo.address 甚至更深层次的 userInfo.address.details 里面去，只要相关的数据一变,就能立马重新计算出正确的完整地址字符串呢。

还有一种情况哦，假如你有一个数组，数组里面每个元素又是一个复杂的对象，对象里面还有嵌套的属性，你要根据这些嵌套属性的某种组合情况来计算出一个总的结果，比如计算数组里所有对象的某个嵌套属性值的总和呀，而且当任何一个对象里面的那个嵌套属性值变了，总和也要跟着变准确，这时候deep computed也能很好地满足需求哦。

那Vue3里怎么实现deep computed呀？

在Vue3中实现deep computed呢,其实可以借助Vue的响应式系统相关的一些方法哦。

一种常见的做法是，我们可以自己写一个函数来深度监听数据的变化并且进行相应的计算啦，比如说，我们还是以刚才的用户信息那个例子来,要实现根据地址详情里的街道名称变化来更新完整地址的计算属性。

首先呢，我们要引入 watchEffect 这个函数哦，它可以自动追踪它内部用到的响应式数据的变化,然后在数据变化时重新执行相关的函数体。

import { reactive, watchEffect } from 'vue';
const userInfo = reactive({
  // 这里是前面定义过的用户信息对象内容哦
});
const fullAddress = () => {
  let addressStr = '';
  addressStr += userInfo.address.city;
  addressStr += userInfo.address.district;
  addressStr += userInfo.address.details.street;
  addressStr += userInfo.address.details.building;
  return addressStr;
};
const fullAddressComputed = watchEffect(fullAddress);

在这个例子里呀，watchEffect 就相当于帮我们实现了类似deep computed的功能啦，它会一直盯着 userInfo 里面相关的那些深层次的地址信息数据，只要有变化，就会重新执行 fullAddress 这个函数来更新 fullAddressComputed 的值哦。

当然啦，还有其他一些更巧妙或者根据具体项目情况更合适的实现方式呢,不过总体思路就是要利用好Vue3的响应式系统的一些特性来深度监听和计算相关的数据啦。

deep computed和普通computed有啥区别呀？

区别还真不少呢。

首先呀，普通computed主要是针对简单的数据或者数据结构的最外层进行计算属性的操作哦，比如说，有个简单的变量 count，我们用普通computed根据 count 的值来计算它的双倍值，这就很简单，只要 count 一变,计算属性就会重新计算出双倍值。

但是呢，deep computed是专门针对复杂的、有多层嵌套的数据结构的哦，就像前面说的用户信息对象那样,它能深入到里面去关注那些深层次的属性变化来重新计算相关的值。

其次呢，在实现方式上也有点不同啦，普通computed我们直接用Vue3提供的 computed 函数就可以很方便地创建啦,像这样：

import { reactive, computed } from 'vue';
const count = reactive(5);
const doubleCount = computed(() => count * 2);

而deep computed呢，就像我们前面说的，往往需要借助一些其他的响应式系统相关的方法，watchEffect 之类的来实现那种深度监听和计算的效果哦。

再就是在性能方面啦，普通computed在数据没有变化的时候，它是不会重新计算的，因为它能准确判断出依赖的数据是否有变动，而deep computed呢，因为要深入到复杂数据结构内部去监听变化，相对来说可能在某些情况下会稍微多消耗一点点性能哦，不过只要合理使用,这种性能影响通常也是可以接受的啦。

呢，它们各有各的用处，要根据具体的数据情况和计算需求来选择到底是用普通computed还是deep computed哦。

使用Vue3的deep computed要注意啥呢？

使用deep computed的时候呀,有这么几个方面要留意一下哦。

一是性能方面啦，前面也提到过，因为它要深入到复杂数据结构内部去监听变化，所以如果数据结构特别庞大或者嵌套特别深，可能会导致一定的性能损耗呢，所以在使用的时候要尽量确保确实需要这种深度监听和计算的功能哦，不然要是能用普通computed解决的简单问题，就别用deep computed啦,免得影响整体的性能表现。

二是数据的一致性问题呀，当你用deep computed根据深层次的数据变化来更新计算属性的时候，要保证你所依赖的数据在整个应用的运行过程中是保持一致的哦，比如说，你不能一会儿从一个数据源获取数据来更新计算属性，一会儿又从另一个数据源获取类似的数据但格式或者含义有点不一样，这样就可能导致deep computed计算出来的结果不准确啦。

三是代码的可读性和维护性哦，因为deep computed实现起来相对普通computed可能会复杂一些，尤其是在借助一些其他响应式系统相关的方法的时候，所以要注意写好注释呀，让代码的逻辑清晰明了,这样以后自己或者其他开发人员在维护代码的时候就能比较轻松地理解啦。

呢，使用Vue3的deep computed要谨慎一些，充分考虑各方面的因素，这样才能让它在项目中发挥出应有的作用,又不会带来一些不必要的麻烦哦。