Vue-计算属性和侦听器

一、计算属性computed

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。

计算属性默认只有getter，不过在需要时你也可以提供一个setter

二、侦听器watch

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。

watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据。

handler方法和immediate属性：

如果需要监听一个对象，可以使用handler。

watch因为是根据data中数据的变动才会执行，所以想要一开始就执行，可以使用immediate：true

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，那么我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了，如下：

  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，
    // 如果设置了false，那么效果和上边例子一样
    immediate: true,
    deep: true // 深度监听
  }
}

这样的方法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

三、computed和watch的区别

1.computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。并且computed需要return自定义方法名。

2.watch：监测的是属性值（data中的数据）， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。

除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。