對於那些剛開始學習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之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
