對(duì)于那些開始學(xué)習(xí)Vue的人來說屉来，對(duì)于方法、計(jì)算屬性和觀察者之間的區(qū)別有點(diǎn)混淆狈癞。

盡管通城芽浚可以使用它們中的每一個(gè)來完成或多或少相同的事情，但了解每個(gè)人在哪里勝過其他人還是很重要的蝶桶。

在這個(gè)快速提示中慨绳，我們將了解Vue應(yīng)用程序的這三個(gè)重要方面及其用例。我們將通過使用這三種方法中的每一種構(gòu)建相同的搜索組件來實(shí)現(xiàn)這一點(diǎn)真竖。

Methods
在一個(gè)方法中脐雪，或多或少是您所期望的——一個(gè)對(duì)象屬性的函數(shù)。您可以使用方法對(duì)發(fā)生在DOM中的事件作出反應(yīng)恢共，或者可以從組件中的其他位置調(diào)用它們战秋，例如，從計(jì)算屬性或觀察者中調(diào)用它們讨韭。方法用于對(duì)公共功能進(jìn)行分組-例如脂信，處理表單提交，或構(gòu)建可重用的功能透硝，如發(fā)出Ajax請(qǐng)求狰闪。

在Vue實(shí)例中的methods對(duì)象內(nèi)創(chuàng)建方法：

new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})

當(dāng)您想在模板中使用它時(shí)，您可以這樣做：

<div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>

我們使用v-on指令將事件處理程序附加到dom元素濒生，該元素也可以縮寫為@符號(hào)埋泵。
現(xiàn)在，每次單擊按鈕時(shí)都會(huì)調(diào)用handleSubmit方法。對(duì)于要傳遞方法體中需要的參數(shù)的實(shí)例丽声，可以執(zhí)行以下操作：

<div id="app">
  <button @click="handleSubmit(event)">
    Submit
  </button>
</div>

這里我們傳遞一個(gè)事件對(duì)象礁蔗，例如，它允許我們?cè)诒韱翁峤坏那闆r下阻止瀏覽器的默認(rèn)操作雁社。

但是瘦麸，當(dāng)我們使用一個(gè)指令來附加事件時(shí)，我們可以使用一個(gè)修飾符來更優(yōu)雅地實(shí)現(xiàn)相同的事情：@click.stop=“handleSubmit”歧胁。

現(xiàn)在我們來看一個(gè)使用方法過濾數(shù)組中數(shù)據(jù)列表的示例。

In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this:
在演示中厉碟，我們要呈現(xiàn)一個(gè)數(shù)據(jù)列表和一個(gè)搜索框喊巍。每當(dāng)用戶在搜索框中輸入值時(shí)，所呈現(xiàn)的數(shù)據(jù)都會(huì)發(fā)生更改箍鼓。模板將如下所示：

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      @keyup="handleSearch"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

如您所見崭参，我們引用的是handlesearch方法，每次用戶在搜索字段中鍵入內(nèi)容時(shí)都會(huì)調(diào)用該方法款咖。我們需要?jiǎng)?chuàng)建方法和數(shù)據(jù)：

new Vue({
  el: '#app',
  data() {
    return {
      input: '',
      languages: []
    }
  },
  methods: {
    handleSearch() {
      this.languages = [
        'JavaScript',
        'Ruby',
        'Scala',
        'Python',
        'Java',
        'Kotlin',
        'Elixir'
      ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
    }
  },
  created() { this.handleSearch() }
})

handlesearch方法使用輸入字段的值更新列出的項(xiàng)何暮。需要注意的一點(diǎn)是，在methods對(duì)象中铐殃，不需要使用this.handlesearch引用該方法（正如在react中必須做的那樣）

Computed Properties

雖然上面示例中的搜索可以按預(yù)期工作海洼，但更優(yōu)雅的解決方案是使用計(jì)算屬性。計(jì)算屬性對(duì)于從現(xiàn)有源組合新數(shù)據(jù)非常方便富腊，與方法相比坏逢，它們的一大優(yōu)點(diǎn)是緩存了輸出。這意味著赘被，如果獨(dú)立于計(jì)算屬性的某些內(nèi)容在頁面上發(fā)生更改韧拒，并且重新呈現(xiàn)UI巴比，則會(huì)返回緩存的結(jié)果，并且不會(huì)重新計(jì)算計(jì)算計(jì)算屬性，從而避免了可能代價(jià)高昂的操作斑鸦。

計(jì)算屬性使我們能夠使用我們可用的數(shù)據(jù)進(jìn)行即時(shí)計(jì)算。在本例中怎顾，我們有一個(gè)需要排序的項(xiàng)目數(shù)組捉撮。我們希望在用戶在輸入字段中輸入值時(shí)進(jìn)行排序。

我們的模板看起來幾乎與前面的迭代相同球化，除了我們正在傳遞v-for指令一個(gè)計(jì)算屬性（filteredlist）：

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in filteredList" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>
  

腳本部分略有不同秽晚。我們聲明了數(shù)據(jù)屬性中的語言（以前這是一個(gè)空數(shù)組），而不是方法筒愚，我們將邏輯移入了計(jì)算屬性：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: [
        "JavaScript",
        "Ruby",
        "Scala",
        "Python",
        "Java",
        "Kotlin",
        "Elixir"
      ]
    }
  },
  computed: {
    filteredList() {
      return this.languages.filter((item) => {
        return item.toLowerCase().includes(this.input.toLowerCase())
      })
    }
  }
})

filteredList計(jì)算屬性將包含包含輸入字段值的項(xiàng)數(shù)組赴蝇。在第一次渲染時(shí)（當(dāng)輸入字段為空時(shí)），將渲染整個(gè)數(shù)組巢掺。當(dāng)用戶在字段中輸入值時(shí)句伶，filteredList將返回一個(gè)數(shù)組劲蜻，其中包含輸入到字段中的值。

使用計(jì)算屬性時(shí)考余，要計(jì)算的數(shù)據(jù)必須可用先嬉，否則將導(dǎo)致應(yīng)用程序出錯(cuò)

computed屬性創(chuàng)建了一個(gè)新的filteredlist屬性，這就是為什么我們可以在模板中引用它楚堤。每次依賴項(xiàng)執(zhí)行此操作時(shí)疫蔓，filteredlist的值都會(huì)更改。這里容易改變的依賴項(xiàng)是輸入值身冬。

最后衅胀，請(qǐng)注意，計(jì)算屬性允許我們?cè)谀０逯袆?chuàng)建一個(gè)變量酥筝，該變量是由一個(gè)或多個(gè)數(shù)據(jù)屬性構(gòu)建的滚躯。一個(gè)常見的例子是從這樣一個(gè)用戶的名字和姓氏創(chuàng)建一個(gè)全名：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

在模板中，您可以執(zhí)行全名嘿歌。每當(dāng)名字或姓氏的值更改時(shí)掸掏，全名的值將更改。

Watchers
Watchers對(duì)于希望響應(yīng)已發(fā)生的更改（例如宙帝，屬性或數(shù)據(jù)屬性）執(zhí)行操作的情況非常有用丧凤。正如Vue文檔所提到的，當(dāng)您想要執(zhí)行異步或昂貴的操作以響應(yīng)不斷變化的數(shù)據(jù)時(shí)茄唐，這是最有用的息裸。

在搜索示例中，我們可以返回到方法示例沪编，并為輸入數(shù)據(jù)屬性設(shè)置一個(gè)觀察程序呼盆。然后我們可以對(duì)輸入值的任何變化作出反應(yīng)。

首先蚁廓，讓我們恢復(fù)模板以使用語言數(shù)據(jù)屬性：

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

然后我們的Vue實(shí)例將如下所示：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }
})

這里访圃，我將觀察者設(shè)置為一個(gè)對(duì)象（而不是一個(gè)函數(shù)）。這是為了我可以指定一個(gè)即時(shí)屬性相嵌，它將導(dǎo)致觀察程序在組件被裝載后立即觸發(fā)腿时。這會(huì)產(chǎn)生填充列表的效果。然后運(yùn)行的函數(shù)在handler屬性中饭宾。

總結(jié)：
正如他們所說批糟，擁有強(qiáng)大的力量，責(zé)任重大看铆。Vue為您提供了構(gòu)建偉大應(yīng)用程序所需的超級(jí)能力徽鼎。知道何時(shí)使用它們是構(gòu)建用戶喜愛的內(nèi)容的關(guān)鍵。方法、計(jì)算屬性和觀察者是您可用的超級(jí)能力的一部分否淤。往前走悄但，一定要好好利用它們！

原文地址：https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/添加鏈接描述