vue中的computed和watch不同

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

})

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

computed是用于定义基于数据之上的数据。

而watch是你想在某个数据变化时做一些事情，如果做的事情是更新其他数据，那其实与把这个要更新的数据项定义成computed是

一样的，这个时候用computed更有可读性，虽然技术上讲watch也可以实现。

但你也可以在被watch的数据变化时做其他事情啊，比如调用一个方法，这个是computed做不到也不应该做的。

总结：

• 1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的

• 2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

在写法上有一个区别。computed返回state处理后结果，watch是赋值行为，修改state。

正如文档建议说 执行异步操作或开销较大的操作时使用watch。

我理解是

1. 执行异步操作不能串行返回结果，使用watch。

2. 开销较大的操作，避免堵塞主线程，使用watch。

3. 简单且串行返回的，使用computed