從作用機制和性質上看待methods,watch和computed的關係

首先要說，methods,watch和computed都是以函式為基礎的，但各自卻都不同
而從作用機制和性質上看,methods和watch/computed不太一樣，所以我接下來的介紹主要有兩個對比：
1.methods和(watch/computed)的對比
2.watch和computed的對比
作用機制上
1.watch和computed都是以Vue的依賴追蹤機制為基礎的，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴資料）發生變化的時候，所有依賴這個資料的“相關”資料“自動”發生變化，也就是自動呼叫相關的函式去實現資料的變動。
2.對methods:methods裡面是用來定義函式的，很顯然，它需要手動呼叫才能執行。而不像watch和computed那樣，“自動執行”預先定義的函式
【總結】：methods裡面定義的函式，是需要主動呼叫的，而和watch和computed相關的函式，會自動呼叫,完成我們希望完成的作用
從性質上看
1.methods裡面定義的是函式，你顯然需要像”fuc()”這樣去呼叫它（假設函式為fuc）
2.computed是計算屬性，事實上和和data物件裡的資料屬性是同一類的（使用上）,
例如：

computed:{
  fullName: function () { return this.firstName + lastName }
}

你在取的時候，用this.fullName去取用，就和取data一樣（不要當成函式呼叫！！）
3.watch:類似於監聽機制+事件機制：
例如：

watch: {
    firstName: function (val) { this.fullName = val + this.lastName }
}

firstName的改變是這個特殊“事件”被觸發的條件，而firstName對應的函式就相當於監聽到事件發生後執行的方法
watch和computed的對比
說了這麼多，下面先對watch和computed

首先它們都是以Vue的依賴追蹤機制為基礎的，它們的共同點是：都是希望在依賴資料發生改變的時候，被依賴的資料根據預先定義好的函式，發生“自動”的變化
我們當然可以自己寫程式碼完成這一切，但卻很可能造成寫法混亂，程式碼冗餘的情況。Vue為我們提供了這樣一個方便的介面，統一規則
但watch和computed也有明顯不同的地方：
watch和computed各自處理的資料關係場景不同
1.watch擅長處理的場景：一個數據影響多個數據
2.computed擅長處理的場景：一個數據受多個數據影響
watch擅長處理的場景：一個數據影響多個數據

對於watch，我們先從一個場景說起
在《海賊王》裡面，主角團隊的名稱叫做：“草帽海賊團”
所以我們把船員依次稱為：
草帽海賊團索隆,草帽海賊團娜美,以此類推。。。
我們希望：當船團名稱發生變更的時候，這艘船上所有船員的名字一起變更！！
例如：
有一天，船長路飛為了加強團隊建設，弘揚海賊文化，決定“草帽海賊團”改名為“橡膠海賊團”（路飛是橡膠惡魔果實能力者）
我們程式碼如下：

    var vm = new Vue({
     el: '#app',
     /*
      data選項中的資料：
      1.haiZeiTuan_Name --> 海賊團名稱
      2.船員的名稱 = 海賊團名稱（草帽海賊團） + 船員名稱（例如索隆）

  這些資料裡存在這種關係：
  （多個）船員名稱資料 --> 依賴於 --> （1個)海賊團名稱資料
  一個數據變化 ---> 多個數據全部變化
 */
 data: {
  haiZeiTuan_Name: '草帽海賊團',
  suoLong: '草帽海賊團索隆',
  naMei: '草帽海賊團娜美',
  xiangJiShi: '草帽海賊團香吉士'
 },
 /*
  在watch中，一旦haiZeiTuan_Name（海賊團名稱）發生改變
  data選項中的船員名稱全部會自動改變 （suoLong，naMei，xiangJiShi）
  並把它們打印出來
 */
 watch: {
  haiZeiTuan_Name: function (newName) {
   this.suoLong = newName + '索隆'
   this.naMei = newName + '娜美'
   this.xiangJiShi = newName + '香吉士'
   console.log(this.suoLong)
   console.log(this.naMei)
   console.log(this.xiangJiShi)
  }
 }
})

// 更改watch選項中監控的主資料
vm.haiZeiTuan_Name = '橡膠海賊團'

demo:

於是船員們的稱號字首都被統一修改了！(原本是“草帽海賊團”)
但是我們的路飛船長又突發奇想：我這麼喜歡吃肉，乾脆我們叫做“肉肉海賊團”好了吧！
我們把最下面的程式碼改為：
// 更改watch選項中監控的主資料
vm.haiZeiTuan_Name = '肉肉海賊團'
demo:

computed擅長處理的場景：一個數據受多個數據影響

我們再從一個場景說起
路飛的全名叫做：蒙奇-D-路飛，他想成為海賊王，但路飛的爺爺卡普（海軍英雄）因此感到非常惱怒，於是把“路飛”改成了叫“海軍王”，希望他能改變志向
程式碼如下：
var vm = new Vue({
 el: '#app',
 /*
  data選項中的資料：firstName，secName,thirdName
  computed監控的資料：lufei_Name
  兩者關係： lufei_Name = firstName + secName + thirdName
  所以等式右邊三個資料任一改變，都會直接修改 lufei_Name
 */
 data: {
  // 路飛的全名：蒙奇·D·路飛
  firstName: '蒙奇',
  secName: 'D',
  thirdName: '路飛'
 },
 computed: {
  luFei_Name: function () {
   return this.firstName + this.secName + this.thirdName
  }
 }
})

// 將“路飛”改為“海軍王”
vm.thirdName = '海軍王'
// 列印路飛的全名
console.log(vm.luFei_Name)
demo:

 但是：
有一天，路飛的逗逼爺爺卡普，一不小心發現可能把族譜搞錯了，實際上，他們不是“D”之一族，而是“H”一族，也就是說，“蒙奇-D-路飛”可能要叫做“蒙奇-H-路飛”了
將最後一段程式碼改為如下：
// 將“D”改為“H”
vm.secName = 'H'
// 列印路飛的全名
console.log(vm.luFei_Name)
demo：

methods不處理資料邏輯關係，只提供可呼叫的函式
相比於watch/computed，methods不處理資料邏輯關係，只提供可呼叫的函式 
new Vue({
 el: '#app',
 template: '<div id="app"><p>{{ say() }}</p></div>',
 methods: {
  say: function () {
   return '我要成為海賊王'
  }
 }
})

從功能的互補上看待methods,watch和computed的關係

在很多時候，computed是用來處理你使用watch和methods的時候無法處理，或者是處理起來並不太恰當的情況的
利用computed處理methods存在的重複計算情況