本篇文章為大家展示了Vue中computed、methods、watch三者的區(qū)別是什么,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你,你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有惠陽免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。Methods
在一個方法中,或多或少是您所期望的——一個對象屬性的函數(shù)。您可以使用方法對發(fā)生在DOM中的事件作出反應(yīng),或者可以從組件中的其他位置調(diào)用它們,例如,從計算屬性或觀察者中調(diào)用它們。方法用于對公共功能進(jìn)行分組-例如,處理表單提交,或構(gòu)建可重用的功能,如發(fā)出Ajax請求。
在Vue實例中的methods對象內(nèi)創(chuàng)建方法:
new Vue({ el: "#app", methods: { handleSubmit() {} } })
當(dāng)您想在模板中使用它時,您可以這樣做:
<div id="app"> <button @click="handleSubmit"> Submit </button> </div>
我們使用v-on指令將事件處理程序附加到dom元素,該元素也可以縮寫為@符號。
現(xiàn)在,每次單擊按鈕時都會調(diào)用handleSubmit方法。對于要傳遞方法體中需要的參數(shù)的實例,可以執(zhí)行以下操作:
<div id="app"> <button @click="handleSubmit(event)"> Submit </button> </div>
這里我們傳遞一個事件對象,例如,它允許我們在表單提交的情況下阻止瀏覽器的默認(rèn)操作。
但是,當(dāng)我們使用一個指令來附加事件時,我們可以使用一個修飾符來更優(yōu)雅地實現(xiàn)相同的事情: @click.stop=“handleSubmit”
。
現(xiàn)在我們來看一個使用方法過濾數(shù)組中數(shù)據(jù)列表的示例。
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:
在演示中,我們要呈現(xiàn)一個數(shù)據(jù)列表和一個搜索框。每當(dāng)用戶在搜索框中輸入值時,所呈現(xiàn)的數(shù)據(jù)都會發(fā)生更改。模板將如下所示:
<div id="app"> <h3>Language Search</h3> <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)容時都會調(diào)用該方法。我們需要創(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方法使用輸入字段的值更新列出的項。需要注意的一點是,在methods對象中,不需要使用this.handlesearch引用該方法(正如在react中必須做的那樣)
Computed Properties
雖然上面示例中的搜索可以按預(yù)期工作,但更優(yōu)雅的解決方案是使用計算屬性。計算屬性對于從現(xiàn)有源組合新數(shù)據(jù)非常方便,與方法相比,它們的一大優(yōu)點是緩存了輸出。這意味著,如果獨立于計算屬性的某些內(nèi)容在頁面上發(fā)生更改,并且重新呈現(xiàn)UI,則會返回緩存的結(jié)果,并且不會重新計算計算計算屬性,從而避免了可能代價高昂的操作。
計算屬性使我們能夠使用我們可用的數(shù)據(jù)進(jìn)行即時計算。在本例中,我們有一個需要排序的項目數(shù)組。我們希望在用戶在輸入字段中輸入值時進(jìn)行排序。
我們的模板看起來幾乎與前面的迭代相同,除了我們正在傳遞v-for指令一個計算屬性(filteredlist):
<div id="app"> <h3>Language Search</h3> <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ù)屬性中的語言(以前這是一個空數(shù)組),而不是方法,我們將邏輯移入了計算屬性:
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計算屬性將包含包含輸入字段值的項數(shù)組。在第一次渲染時(當(dāng)輸入字段為空時),將渲染整個數(shù)組。當(dāng)用戶在字段中輸入值時,filteredList將返回一個數(shù)組,其中包含輸入到字段中的值。
使用計算屬性時,要計算的數(shù)據(jù)必須可用,否則將導(dǎo)致應(yīng)用程序出錯
computed屬性創(chuàng)建了一個新的filteredlist屬性,這就是為什么我們可以在模板中引用它。每次依賴項執(zhí)行此操作時,filteredlist的值都會更改。這里容易改變的依賴項是輸入值。
最后,請注意,計算屬性允許我們在模板中創(chuàng)建一個變量,該變量是由一個或多個數(shù)據(jù)屬性構(gòu)建的。一個常見的例子是從這樣一個用戶的名字和姓氏創(chuàng)建一個全名:
computed: { fullName() { return `${this.firstName} ${this.lastName}` } }
在模板中,您可以執(zhí)行全名。每當(dāng)名字或姓氏的值更改時,全名的值將更改。
Watchers
Watchers對于希望響應(yīng)已發(fā)生的更改(例如,屬性或數(shù)據(jù)屬性)執(zhí)行操作的情況非常有用。正如Vue文檔所提到的,當(dāng)您想要執(zhí)行異步或昂貴的操作以響應(yīng)不斷變化的數(shù)據(jù)時,這是最有用的。
在搜索示例中,我們可以返回到方法示例,并為輸入數(shù)據(jù)屬性設(shè)置一個觀察程序。然后我們可以對輸入值的任何變化作出反應(yīng)。
首先,讓我們恢復(fù)模板以使用語言數(shù)據(jù)屬性:
<div id="app"> <h3>Language Search</h3> <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 } } })
這里,我將觀察者設(shè)置為一個對象(而不是一個函數(shù))。這是為了我可以指定一個即時屬性,它將導(dǎo)致觀察程序在組件被裝載后立即觸發(fā)。這會產(chǎn)生填充列表的效果。然后運行的函數(shù)在handler屬性中。
上述內(nèi)容就是Vue中computed、methods、watch三者的區(qū)別是什么,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標(biāo)題:Vue中computed、methods、watch三者的區(qū)別是什么-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://bm7419.com/article26/dgdijg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、網(wǎng)站策劃、網(wǎng)頁設(shè)計公司、面包屑導(dǎo)航、網(wǎng)站設(shè)計公司、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容