computed

主要用来计算，缓存值，当所依赖的值发生了变化才会更新

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch

主要用来监听data、props发生一些变化，然后执行一些自定义的回调

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