Methods 在一個方法中，或多或少是您所期望的——一個對象屬性的函數。您可以使用方法對發生在DOM中的事件作出反應，或者可以從組件中的其他位置調用它們，例如，從計算屬性或觀察者中調用它們。方法用於對公共功能進行分組-例如，處理表單提交，或構建可重用的功能，如發出Ajax請求。
在Vue實例中的methods對象內創建方法：
new Vue({
el: "#app",
methods: {
handleSubmit() {}
}
})
當您想在模板中使用它時，您可以這樣做：
<button>
Submit
/<button>
我們使用v-on指令將事件處理程序附加到dom元素，該元素也可以縮寫為@符號。 現在，每次單擊按鈕時都會調用handleSubmit方法。對於要傳遞方法體中需要的參數的實例，可以執行以下操作：
<button>
Submit
/<button>
這裡我們傳遞一個事件對象，例如，它允許我們在表單提交的情況下阻止瀏覽器的默認操作。
但是，當我們使用一個指令來附加事件時，我們可以使用一個修飾符來更優雅地實現相同的事情：@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: 在演示中，我們要呈現一個數據列表和一個搜索框。每當用戶在搜索框中輸入值時，所呈現的數據都會發生更改。模板將如下所示：
Language Search
type="text"
v-model="input"
@keyup="handleSearch"
placeholder="Enter language"
class="form-control"
/>
- {{ item }}
如您所見，我們引用的是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）：
Language Search
type="text"
v-model="input"
placeholder="Enter language"
class="form-control"
/>
- {{ item }}
腳本部分略有不同。我們聲明瞭數據屬性中的語言（以前這是一個空數組），而不是方法，我們將邏輯移入了計算屬性：
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文檔所提到的，當您想要執行異步或昂貴的操作以響應不斷變化的數據時，這是最有用的。
在搜索示例中，我們可以返回到方法示例，併為輸入數據屬性設置一個觀察程序。然後我們可以對輸入值的任何變化作出反應。
首先，讓我們恢復模板以使用語言數據屬性：
Language Search
type="text"
v-model="input"
placeholder="Enter language"
class="form-control"
/>
- {{ item }}
然後我們的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屬性中。
閱讀更多 破影閣 的文章
