Vue 中Watched 和 Computed 的区别

• computed用来监控自己定义的变量，该变量不在data里面声明。
• 直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
  计算属性默认只有getter，不过在需要时你也可以提供一个setter
• watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。
• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以
• watched 是从从每一个源头去定义行为，computed是从最终的结果去定义行为。如下：
  watched 会导致重复计算，使用computed比较好
  watched 可以做到异步，这是computed无法做到的，各有优点。

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 vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})