computed与watch的理解

computed

特点：

• 当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。

• 当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。

• 后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。（有缓存机制）

   var vm = new Vue({  
       el: '#app',  
       data: {  
           num: 10,  
           price: 8.8,  
       },  
       computed: {  
           total: function () {  
               return this.num * this.price  
           }  
       }  
   })
  

  • 定义一个total计算属性，当使用插值表达式{{total}}时，会去执行total这个计算属性。
  • 在total计算属性中，使用this.num * this.price得到一个total总价作为计算属性的结果，最后会将计算出来的总价88缓存起来。
  • 当我们下一次使用插值表达式{{total}}或者其他方式使用计算属性total的时候，就会检查计算属性中使用的this.num或者this.price有没有发生变化
  • 如果this.num或者this.price没有发生变化，直接获取缓存的总结88作为计算属性的结果。
  • 如果this.num或者this.price任何一项发生了变化，那么就会重新计算并得到一个总结结果，并重新将结果进行缓存。

注意：

每次计算的结果缓存的时候，都会重新创建一个变量保存结果。

watch

特点：

• 当我们定义一个侦听器的时候，侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。

• 定义两个侦听器，侦听num和price的变化，当改变num或者price的时候，会触发对应的侦听器。

• 在两个侦听器中，刚好做的都是将最新的num乘以最新的price得到一个总价并赋值给data中的total。

  var vm = new Vue({  
      el: '#app',  
      data: {  
          num: 10,  
          price: 8.8,  
      },  
      watch: {  
          num: function (val) {  
              this.total = val * this.price  
          },
          price: function (val) {
              this.total = this.num * val
          }
      }  
  })
  

注意：

一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

总结

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

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

总体而言

• 在计算开销比较大(计算次数多或者异步处理)的时候，会使用watch得到计算结果。
• 其他情况建议使用计算属性computed，因为缓存节省多次计算的性能。