Vue中computed、methods和watch之間的區別

對於那些開始學習Vue的人來講，對於方法、計算屬性和觀察者之間的區別有點混淆。

儘管一般可使用它們中的每個來完成或多或少相同的事情，但瞭解每一個人在哪裏賽過其餘人仍是很重要的。

在這個快速提示中，咱們將瞭解Vue應用程序的這三個重要方面及其用例。咱們將經過使用這三種方法中的每一種構建相同的搜索組件來實現這一點。

Methods 在一個方法中，或多或少是您所指望的——一個對象屬性的函數。您可使用方法對發生在DOM中的事件做出反應，或者能夠從組件中的其餘位置調用它們，例如，從計算屬性或觀察者中調用它們。方法用於對公共功能進行分組-例如，處理表單提交，或構建可重用的功能，如發出Ajax請求。

在Vue實例中的methods對象內建立方法：

new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})
複製代碼

當您想在模板中使用它時，您能夠這樣作：

<div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>
複製代碼

咱們使用v-on指令將事件處理程序附加到dom元素，該元素也能夠縮寫爲@符號。 如今，每次單擊按鈕時都會調用handleSubmit方法。對於要傳遞方法體中須要的參數的實例，能夠執行如下操做：

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

這裏咱們傳遞一個事件對象，例如，它容許咱們在表單提交的狀況下阻止瀏覽器的默認操做。

可是，當咱們使用一個指令來附加事件時，咱們可使用一個修飾符來更優雅地實現相同的事情：@click.stop=「handleSubmit」。

如今咱們來看一個使用方法過濾數組中數據列表的示例。

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: 在演示中，咱們要呈現一個數據列表和一個搜索框。每當用戶在搜索框中輸入值時，所呈現的數據都會發生更改。模板將以下所示：

<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方法，每次用戶在搜索字段中鍵入內容時都會調用該方法。咱們須要建立方法和數據：

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方法使用輸入字段的值更新列出的項。須要注意的一點是，在methods對象中，不須要使用this.handlesearch引用該方法（正如在react中必須作的那樣）

Computed Properties

雖然上面示例中的搜索能夠按預期工做，但更優雅的解決方案是使用計算屬性。計算屬性對於從現有源組合新數據很是方便，與方法相比，它們的一大優勢是緩存了輸出。這意味着，若是獨立於計算屬性的某些內容在頁面上發生更改，而且從新呈現UI，則會返回緩存的結果，而且不會從新計算計算計算屬性，從而避免了可能代價高昂的操做。

計算屬性使咱們可以使用咱們可用的數據進行即時計算。在本例中，咱們有一個須要排序的項目數組。咱們但願在用戶在輸入字段中輸入值時進行排序。

咱們的模板看起來幾乎與前面的迭代相同，除了咱們正在傳遞v-for指令一個計算屬性（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>
  
複製代碼

腳本部分略有不一樣。咱們聲明瞭數據屬性中的語言（之前這是一個空數組），而不是方法，咱們將邏輯移入了計算屬性：

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計算屬性將包含包含輸入字段值的項數組。在第一次渲染時（當輸入字段爲空時），將渲染整個數組。當用戶在字段中輸入值時，filteredList將返回一個數組，其中包含輸入到字段中的值。

使用計算屬性時，要計算的數據必須可用，不然將致使應用程序出錯

computed屬性建立了一個新的filteredlist屬性，這就是爲何咱們能夠在模板中引用它。每次依賴項執行此操做時，filteredlist的值都會更改。這裏容易改變的依賴項是輸入值。

最後，請注意，計算屬性容許咱們在模板中建立一個變量，該變量是由一個或多個數據屬性構建的。一個常見的例子是從這樣一個用戶的名字和姓氏建立一個全名：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}
複製代碼

在模板中，您能夠執行全名。每當名字或姓氏的值更改時，全名的值將更改。

Watchers Watchers對於但願響應已發生的更改（例如，屬性或數據屬性）執行操做的狀況很是有用。正如Vue文檔所提到的，當您想要執行異步或昂貴的操做以響應不斷變化的數據時，這是最有用的。

在搜索示例中，咱們能夠返回到方法示例，併爲輸入數據屬性設置一個觀察程序。而後咱們能夠對輸入值的任何變化做出反應。

首先，讓咱們恢復模板以使用語言數據屬性：

<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實例將以下所示：

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
    }
  }
})
複製代碼

這裏，我將觀察者設置爲一個對象（而不是一個函數）。這是爲了我能夠指定一個即時屬性，它將致使觀察程序在組件被裝載後當即觸發。這會產生填充列表的效果。而後運行的函數在handler屬性中。

總結： 正如他們所說，擁有強大的力量，責任重大。Vue爲您提供了構建偉大應用程序所需的超級能力。知道什麼時候使用它們是構建用戶喜好的內容的關鍵。方法、計算屬性和觀察者是您可用的超級能力的一部分。往前走，必定要好好利用它們！

原文地址：www.sitepoint.com/the-differe…添加連接描述