Vue中computed、methods與watch的區(qū)別總結(jié)

在演示中，我們要呈現(xiàn)一個(gè)數(shù)據(jù)列表和一個(gè)搜索框。每當(dāng)用戶在搜索框中輸入值時(shí)，所呈現(xiàn)的數(shù)據(jù)都會(huì)發(fā)生更改。模板將如下所示：

<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方法，每次用戶在搜索字段中鍵入內(nèi)容時(shí)都會(huì)調(diào)用該方法。我們需要?jiǎng)?chuàng)建方法和數(shù)據(jù)：

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方法使用輸入字段的值更新列出的項(xiàng)。需要注意的一點(diǎn)是，在methods對(duì)象中，不需要使用this.handlesearch引用該方法（正如在react中必須做的那樣）

Computed Properties

雖然上面示例中的搜索可以按預(yù)期工作，但更優(yōu)雅的解決方案是使用計(jì)算屬性。計(jì)算屬性對(duì)于從現(xiàn)有源組合新數(shù)據(jù)非常方便，與方法相比，它們的一大優(yōu)點(diǎn)是緩存了輸出。這意味著，如果獨(dú)立于計(jì)算屬性的某些內(nèi)容在頁(yè)面上發(fā)生更改，并且重新呈現(xiàn)UI，則會(huì)返回緩存的結(jié)果，并且不會(huì)重新計(jì)算計(jì)算計(jì)算屬性，從而避免了可能代價(jià)高昂的操作。

計(jì)算屬性使我們能夠使用我們可用的數(shù)據(jù)進(jìn)行即時(shí)計(jì)算。在本例中，我們有一個(gè)需要排序的項(xiàng)目數(shù)組。我們希望在用戶在輸入字段中輸入值時(shí)進(jìn)行排序。

我們的模板看起來(lái)幾乎與前面的迭代相同，除了我們正在傳遞v-for指令一個(gè)計(jì)算屬性（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>

腳本部分略有不同。我們聲明了數(shù)據(jù)屬性中的語(yǔ)言（以前這是一個(gè)空數(shù)組），而不是方法，我們將邏輯移入了計(jì)算屬性：

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計(jì)算屬性將包含包含輸入字段值的項(xiàng)數(shù)組。在第一次渲染時(shí)（當(dāng)輸入字段為空時(shí)），將渲染整個(gè)數(shù)組。當(dāng)用戶在字段中輸入值時(shí)，filteredList將返回一個(gè)數(shù)組，其中包含輸入到字段中的值。

使用計(jì)算屬性時(shí)，要計(jì)算的數(shù)據(jù)必須可用，否則將導(dǎo)致應(yīng)用程序出錯(cuò)

computed屬性創(chuàng)建了一個(gè)新的filteredlist屬性，這就是為什么我們可以在模板中引用它。每次依賴項(xiàng)執(zhí)行此操作時(shí)，filteredlist的值都會(huì)更改。這里容易改變的依賴項(xiàng)是輸入值。

最后，請(qǐng)注意，計(jì)算屬性允許我們?cè)谀０逯袆?chuàng)建一個(gè)變量，該變量是由一個(gè)或多個(gè)數(shù)據(jù)屬性構(gòu)建的。一個(gè)常見的例子是從這樣一個(gè)用戶的名字和姓氏創(chuàng)建一個(gè)全名：

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

在模板中，您可以執(zhí)行全名。每當(dāng)名字或姓氏的值更改時(shí)，全名的值將更改。

Watchers

Watchers對(duì)于希望響應(yīng)已發(fā)生的更改（例如，屬性或數(shù)據(jù)屬性）執(zhí)行操作的情況非常有用。正如Vue文檔所提到的，當(dāng)您想要執(zhí)行異步或昂貴的操作以響應(yīng)不斷變化的數(shù)據(jù)時(shí)，這是最有用的。

在搜索示例中，我們可以返回到方法示例，并為輸入數(shù)據(jù)屬性設(shè)置一個(gè)觀察程序。然后我們可以對(duì)輸入值的任何變化作出反應(yīng)。

首先，讓我們恢復(fù)模板以使用語(yǔ)言數(shù)據(jù)屬性：

<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實(shí)例將如下所示：

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

這里，我將觀察者設(shè)置為一個(gè)對(duì)象（而不是一個(gè)函數(shù)）。這是為了我可以指定一個(gè)即時(shí)屬性，它將導(dǎo)致觀察程序在組件被裝載后立即觸發(fā)。這會(huì)產(chǎn)生填充列表的效果。然后運(yùn)行的函數(shù)在handler屬性中。

總結(jié)：

正如他們所說(shuō)，擁有強(qiáng)大的力量，責(zé)任重大。Vue為您提供了構(gòu)建偉大應(yīng)用程序所需的超級(jí)能力。知道何時(shí)使用它們是構(gòu)建用戶喜愛的內(nèi)容的關(guān)鍵。方法、計(jì)算屬性和觀察者是您可用的超級(jí)能力的一部分。往前走，一定要好好利用它們！

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

好了，

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com