Vue看了就會(huì)的8個(gè)小技巧
1. 始終在 `v-for` 中使用 `:key`
在需要操縱數(shù)據(jù)時(shí)，將key屬性與v-for指令一起使用可以讓程序保持恒定且可預(yù)測(cè)是很有必要的。這樣Vue就可以跟蹤組件狀態(tài)，并對(duì)不同的元素有一個(gè)常量引用。在使用動(dòng)畫(huà)或Vue轉(zhuǎn)換時(shí)，如果沒(méi)有key ，Vue只會(huì)嘗試使DOM盡可能高效。這或許會(huì)導(dǎo)致v-for中的元素出現(xiàn)亂序，或行為難以預(yù)測(cè)。如果我們對(duì)每個(gè)元素都有唯一的鍵引用，就能更好地預(yù)測(cè)Vue應(yīng)用程序?qū)⑷绾尉_地處理DOM操作。
2. 使用駝峰式聲明 props，并在模板中使用短橫線(xiàn)命名來(lái)訪(fǎng)問(wèn) props
最佳做法只是遵循每種語(yǔ)言的約定。在 JS 中，駝峰式聲明是標(biāo)準(zhǔn)，在HTML中，是短橫線(xiàn)命名。Vue 已經(jīng)提供了駝峰式聲明和短橫線(xiàn)命名之間轉(zhuǎn)換，所以除了實(shí)際聲明它們之外，我們不用擔(dān)心任何事情。
3. 在事件中使用短橫線(xiàn)命名
在發(fā)出定制事件時(shí)，最好使用短橫線(xiàn)命名，這是因?yàn)樵诟附M件中，我們使用相同的語(yǔ)法來(lái)偵聽(tīng)該事件。所以為了確保我們各組件之間的一致性，讓你的代碼更具可讀性，請(qǐng)?jiān)趦蓚€(gè)地方都堅(jiān)持使用短橫線(xiàn)命名。
4. 函數(shù)式組件
函數(shù)式組件是無(wú)狀態(tài)，它無(wú)法實(shí)例化，沒(méi)有任何的生命周期和方法。創(chuàng)建函數(shù)式組件也很簡(jiǎn)單，只需要在模板添加 functional 聲明即可。一般適合只依賴(lài)于外部數(shù)據(jù)的變化而變化的組件，因其輕量，渲染性能也會(huì)有所提高。組件需要的一切都是通過(guò) context 參數(shù)傳遞。它是一個(gè)上下文對(duì)象，具體屬性查看文檔。這里 props 是一個(gè)包含所有綁定屬性的對(duì)象。
5. 重用相同路由的組件
開(kāi)發(fā)小伙伴們常常會(huì)遇到多個(gè)路由解析為同一個(gè)Vue組件的情況。問(wèn)題是，Vue出于性能原因，默認(rèn)情況下共享組件將不會(huì)重新渲染，如果你嘗試在使用相同組件的路由之間進(jìn)行切換，則不會(huì)發(fā)生任何變化。如果你依然希望重新渲染這些組件，就可以通過(guò)在 router-view 組件中提供 :key 屬性來(lái)實(shí)現(xiàn)。
6. $createElement
一般情況下，每個(gè)Vue實(shí)例都可以訪(fǎng)問(wèn) $createElement 方法來(lái)創(chuàng)建和返回虛擬節(jié)點(diǎn)。例如，可以利用它在可以通過(guò)v-html指令傳遞的方法中使用標(biāo)記。在函數(shù)組件中，可以將此方法作為渲染函數(shù)中的第一個(gè)參數(shù)進(jìn)行訪(fǎng)問(wèn)。
7. 使用JSX
由于Vue CLI 3默認(rèn)支持使用JSX，因此現(xiàn)在你可以使用JSX編寫(xiě)代碼。如果尚未使用Vue CLI 3，則可以使用 babel-plugin-transform-vue-jsx 獲得JSX支持。
8. 作用域插槽實(shí)現(xiàn) UI 和業(yè)務(wù)邏輯的分離
我們常常會(huì)想復(fù)用一個(gè)組件的業(yè)務(wù)邏輯，但是不想使用該組件的 UI時(shí)，可以使用作用域插槽實(shí)現(xiàn) UI 和業(yè)務(wù)邏輯的分離。作用域插槽大致的思路是將 DOM 結(jié)構(gòu)交給調(diào)用方去決定，組件內(nèi)部只關(guān)注業(yè)務(wù)邏輯，最后將數(shù)據(jù)和事件等通過(guò) :item ="item" 的方式傳遞給父組件去處理和調(diào)用，實(shí)現(xiàn) UI 和業(yè)務(wù)邏輯的分離。再結(jié)合渲染函數(shù)，就可以實(shí)現(xiàn)無(wú)渲染組件的效果。
以上就是Vue看了就會(huì)的8個(gè)小技巧的詳細(xì)內(nèi)容，更多關(guān)于vue 技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了深入理解vue的使用，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
vue 使用lodash實(shí)現(xiàn)對(duì)象數(shù)組深拷貝操作
這篇文章主要介紹了vue 使用lodash實(shí)現(xiàn)對(duì)象數(shù)組深拷貝操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了vue 動(dòng)態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標(biāo)簽添加背景圖片，需要的朋友參考下吧2018-08-08
Vue-router路由判斷頁(yè)面未登錄跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue-router路由判斷頁(yè)面未登錄跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了vue-cli腳手架安裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue項(xiàng)目部署到Apache服務(wù)器中遇到的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目部署到Apache中遇到的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度
這篇文章主要介紹了vue 實(shí)現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)?lái)一篇Vue自定義事件(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
有的時(shí)候項(xiàng)目需要在頁(yè)面使用快捷鍵，而且需要對(duì)快捷鍵進(jìn)行維護(hù)。本文將為大家展示Vue實(shí)現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下2022-04-04
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對(duì)AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過(guò)程。新的AST可以是原語(yǔ)言或原DSL的描述，也可以是其他語(yǔ)言或其他DSL的描述。例如，我們可以對(duì)模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01