Vue-computed 和 watch

computed

计算属性
计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值
如果不使用 computed，只能将字符串拼接

var vm = new Vue({
  el: '#app',
  template: `
    

      Name: {{firstName + ' ' + lastName}}
    
  `,
  data: {
    firstName: 'Rain',
    lastName: 'Shigure'
  }
})

如果使用 computed

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

watch

监听数据的变化,当数据的值发生变化时,立即执行对应的函数
以上函数如果用watch实现

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
    }
  }
})

可见computed的代码简单得多
所以当需要在数据变化时执行异步或开销较大的操作时,才使用watch
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的