Vue笔记-2

computed 和 watch 的区别

• computed为计算属性，watch为监听属性。
• computed依赖于其他属性来计算得出最后的值；watch是去监听一个值的变化，然后执行相对应的函数。
• computed：默认缓存，当其所依赖的函数属性不改变，则不会重新计算，在调用当前函数时仍从缓存中读取；计算属性一旦依赖，则无法取消，即定义后无法更改其get函数；必须使用return返回；不支持异步计算数据。
• watch：在每次监听的值发生变化时都会执行回调；使用watch时，返回一个unwatch可随时取消，取消后当数据再次发生变动时，不会再执行我们的回调函数；watch的回调里会传入监听属性的新旧值，通过这两个值可以做一些新操作，不一定非要用return返回；支持异步设置数据；watch的内部函数不能使用箭头含函数，若使用箭头函数的this则会继承window，为全局对象，无法指向Vue实例。
• computed的响应是deep:true，在计算过程中用到的对象的属性发生变化可以被监听到；watch的响应默认是deep: false。immediate同。

  computed: {
    fullName: function () {
      // this.name 的属性 firstName/lastName 变化时 fullName 会响应。
      return this.name.firstName + ' ' + this.name.lastName
    }
  },
  
  watch: {
    name: function () {
      // this.name 的属性 firstName/lastName 变化时不会触发。
    },
    deep: false // 默认是false
  }