Vue中Computed屬性、Methods和Watch之間的差異

對於那些剛開始學習Vue的人來說，方法，計算屬性和觀察者之間的差異讓人有些困惑。儘管經常可以使用它們中的每一個來完成或多或少相同的事情，但是知道它們在哪些方面優於其他的是很重要的。

在這個快速技巧中，我們將研究Vue應用程式的這三個重要方面及其用例。我們將使用這三種方法中的每一種構建相同的搜尋元件。

方法

方法或多或少是你所期望的--一個函數，它是一個物件的屬性。 你可以使用方法對DOM中發生的事件做出反應，也可以從元件中的其他位置（例如，在計算屬性或觀察程式中）呼叫它們。 方法用於對常用功能進行分組--例如，用於處理表單提交或構建可重用功能，例如發出Ajax請求。

你可以在methods物件內部的Vue範例中建立方法：

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"。

現在，讓我們看一個使用方法篩選陣列中的資料列表的範例。

在演示中，我們要呈現資料列表和搜尋方塊。每當使用者在搜尋方塊中輸入值時，呈現的資料都會更改。模板將如下所示：

<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中必須這樣做）。

計算屬性

儘管以上範例中的搜尋按預期工作，但更優雅的解決方案是使用計算屬性。 計算屬性對於從現有資源中組合新資料非常方便，並且與方法相比，它們的一大優點是可以快取其輸出。 這意味著，如果頁面上與計算屬性無關的某些內容發生更改，並且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>

指令碼部分略有不同。我們在data屬性中宣告語言（以前這是一個空陣列），而不是將方法轉移到計算屬性中的方法：

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將返回一個陣列，其中包含在欄位中輸入的值。

當使用計算屬性時，要計算的資料必須可用，否則將導致應用程式錯誤。

計算屬性建立了一個新的filteredList屬性，這就是為什麼我們可以在模板中參照它的原因。每次依賴項發生變化時，filteredList的值就會發生變化。這裡容易改變的依賴關係是input的值。

最後，請注意，計算屬性使我們可以建立一個變數，以在由一個或多個資料屬性構建的模板中使用。一個常見的範例是fullName從使用者的名字和姓氏建立一個，如下所示：

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

在模板中，您可以執行{{fullName}}。每當第一個或最後一個名稱的值發生變化時，fullName的值就會發生變化。

觀察者

當您希望對發生的更改(例如，對一個道具或資料屬性)執行一個操作時，觀察者非常有用。正如Vue檔案所述，當您希望執行非同步或昂貴的操作來響應資料更改時，這是最有用的。

在我們的搜尋範例中，我們可以返回到方法範例，併為input data屬性設定一個監視程式。然後，我們可以對input值的任何變化做出反應。

首先，讓我們還原模板以利用languages data屬性：

<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
    }
  }})

在這裡，我已經將觀察者作為物件（而不是函數）。這樣，我可以指定一個immediate屬性，該屬性將導致觀察者在安裝元件後立即觸發。這具有填充列表的效果。然後，執行的函數在該handler屬性中。

結論

正如他們所說，強大的力量伴隨著巨大的責任。Vue為您提供了構建出色應用程式所需的超能力。知道何時使用它們是建立使用者喜愛的關鍵。方法、計算屬性和觀察者是您可以使用的超能力的一部分。展望未來，一定要好好利用它們!

相關推薦：

更多程式設計相關知識，請存取：！！

以上就是Vue中Computed屬性、Methods和Watch之間的差異的詳細內容，更多請關注TW511.COM其它相關文章！