前言

對于那些開始學習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為您提供了構建偉大應用程序所需的超級能力。知道何時使用它們是構建用戶喜愛的內容的關鍵。方法、計算屬性和觀察者是您可用的超級能力的一部分。往前走，一定要好好利用它們！

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

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。