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為您提供了構建偉大應用程式所需的超級能力。知道何時使用它們是構建使用者喜愛的內容的關鍵。方法、計算屬性和觀察者是您可用的超級能力的一部分。往前走，一定要好好利用它們！
原文地址：https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/ 新增連結描述