watch

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

computed: {
  fullName: {
      // getter 一般都只会使用到get
      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]
      }
  }
}

watch

watch区别于computed可监听虚拟的数据，例如路由；
监听的数据必须是在data中定义了的。
常用于监听某一个变量的值，从而去改变其他一个或多个变量。
watch中可以做异步操作（表单值）

computed

计算属性，若数据大消耗大考虑使用watch。
拥有缓存，若依赖数据没改变则使用缓存，一旦依赖数据改变则会重新计算并return
多个变量都会影响某个值时，在computed中定义并计算后return。（购物车）

methods

顾名思义，方法必须调用才会返回值 写法必须加()调用
且方法只会在页面初次渲染时调用一次，并没有响应性，当数据改变时，需要主动再次调用。

updated

生命周期钩子函数
data中的任何数据改变并且页面加载完毕后都会执行updated中的代码
不要在此钩子函数中做更改数据状态的操作，会导致死循环，可以做dom的一些处理，类似于数据更新后下拉页面的操作。
若是需要统一处理的可以在此处理，但是需考虑消耗。