vue computed watch区别

1.区别

1.1 watch对象里面属性是data/props里面的值，compted对象里面属性是新的自定义字段或data里面的值

1.2 watch监听的是data/props里的值，值发生变化即触发，没有缓存

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

1.3 computed监听的也是data里的值，新定义的属性或data里的值，依赖监听的值进行计算；

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

有缓存，当计算逻辑复杂耗费性能的方法可以使用computed；

有get set方法，可以通过set新定义的属性或data里的中，触发get方法执行；

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。