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}` } } })
原文鏈接：https://www.jianshu.com/p/4f2c995b64bc