watch和computed都是以Vue的依賴追蹤機制為基礎，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴資料）發生變化的時候，所有依賴這個資料的“相關”資料“自動”發生變化，也就是自動呼叫相關的函式去實現資料的變動。

methods用來定義函式，它需要手動呼叫才能執行，需要像”fuc()”這樣去呼叫它（假設函式為fuc）

computed是計算屬性，事實上和data物件裡的資料屬性是同一類的（使用上），在取值的時候，用this.fullName去取用，就和取data一樣（不要當成函式呼叫！！）

watch和computed各自處理的資料關係場景不同 
1. watch擅長處理的場景：一個數據影響多個數據 
2. computed擅長處理的場景：一個數據受多個數據影響 

computed 和 methods相比，computed有快取，效能開銷小，何謂computed快取呢？
在改變number（任一跟computed中不相關的資料）時，整個應用會重新渲染，如果使用的是getName ()方法，則這個方法會被重複呼叫
而computed不會重新計算，只有依賴的值有變化時（該案例中，number不是computed依賴的值），才會去重新計算，這就是computed的快取 

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p>FullName: {{fullName}}</p>
      <p><input type="text" v-model="number"></p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
      <p>LastName: <input type="text" v-model="lastName"></p>
      <p>Name: <input type="text" v-model="name"></p>
      <p>Obj.a: <input type="text" v-model="obj.a"></p>
    </div>
  `,
  data: {
    firstName: 'Wang',
    lastName: 'HaiLi',
    number: 0,
    fullName: '',
    obj: {
      a: 0
    }
  },
  computed: {
    name: {
      get () {
        console.log('new name')
        return `${this.firstName} ${this.lastName}`
      },
      set (name) {
        const names = name.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  },
  watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
        // this.obj.a += 1 // 不要在watch和computed修改當前值，會無限迴圈
      },
      immediate: true // 預設只有資料改變才會監聽，第一次不會執行,設定true則第一次也能執行
      // deep: true
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})
 

與君共勉：再牛逼的夢想，也抵不住傻逼般的堅持！