Vue-侦听器实现嵌套数据结构的自动计算

一、 侦听器的使用

侦听器的使用很简单，官方文档提供的示例也很清晰，但是就是案例过于简单，针对复杂点的数据结构不知道怎么处理，经过多次实践，找到了解决方法。

案例
页面展示

需求是页面填写项费用的时候，自动计算总计。

  costList: [
        {
          mealCost: "",
          parkingCost: "",
          etcCost: "",
          rentCost:"",
          totalCost:"",
        },
      ],

使用侦听器，去设置totalCost的值：

watch:{
    carList: {
      handler(newValue, oldValue) {
        for (let i = 0; i < newValue.length; i++) {
          this.carList[i].totalCoste = parseFloat(this.carList[i].etcCost || 0) + parseFloat(this.carList[i].rentCost || 0) +
            parseFloat(this.carList[i].mealCost || 0) + parseFloat(this.carList[i].hotelcharge || 0) +
            parseFloat(this.carList[i].parkingCost || 0)
        }
      },
      deep: true
    }
  },

come with question：

计算属性和侦听器的区别是什么？
通过查看官方文档，不难发现，计算属性和侦听器在使用上是很相似的，都可以动态根据值的变化去实时更新计算。

计算属性的特点：
针对上个例子，如果其中一项费用发生了变化，就会重新计算一个总值，保存到缓存中，计算属性是一个函数，计算的结果会保存到函数返回中。如果费用未发生改变，则从缓存中取。特别的，如果每次费用发成改变触发重新计算，那么就会重新创建变量保存到计算属性中。

侦听器的特点：

侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。
注意：
一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

两者的使用场景：
1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况
2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算，不会创建变量保存结果
也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器
那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。
3).computed的结果是通过return返回的，而watch不需要return。
4).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

补充：
watch只会监听数据的值是否发生改变，而不会监听地址的变化，如果需要监听引用类型的数据变化，需要深度监听：obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
在特殊的情况下(更改数组中的数据时，数组已经更改，但是视图没有更新)，watch无法监听数组的变化,更改数组必须要用splice()或者$set。

参考原文链接：https://blog.csdn.net/itcast_cs/article/details/102802310