watch和computed

对于任何复杂逻辑，你都应当使用计算属性computed。

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

computed的值不可以在data中定义和赋值。

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

注意：对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

 以上摘自：
Vue 2.0学习笔记： Vue中的computed属性_Vue, Vue学习笔记, 会员专栏 教程_W3cplus © w3cplus.com

摘自：https://segmentfault.com/a/1190000012948175（看太多，更迷糊）

实例：

 简单总结：

watch：监控已有的属性,一旦属性发生了改变就去自动调用对应的方法

computed：监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2.watch不会缓存数据，每次打开页面都会重新加载一次，
但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）

摘自：Vue--使用watch、computed、filter方法来监控 - QinXiao.Shou - 博客园