Vue看了就會的8個小技巧
1. 始終在 `v-for` 中使用 `:key`
在需要操縱數(shù)據(jù)時，將key屬性與v-for指令一起使用可以讓程序保持恒定且可預(yù)測是很有必要的。這樣Vue就可以跟蹤組件狀態(tài)，并對不同的元素有一個常量引用。在使用動畫或Vue轉(zhuǎn)換時，如果沒有key ，Vue只會嘗試使DOM盡可能高效。這或許會導(dǎo)致v-for中的元素出現(xiàn)亂序，或行為難以預(yù)測。如果我們對每個元素都有唯一的鍵引用，就能更好地預(yù)測Vue應(yīng)用程序?qū)⑷绾尉_地處理DOM操作。
2. 使用駝峰式聲明 props，并在模板中使用短橫線命名來訪問 props
最佳做法只是遵循每種語言的約定。在 JS 中，駝峰式聲明是標(biāo)準(zhǔn)，在HTML中，是短橫線命名。Vue 已經(jīng)提供了駝峰式聲明和短橫線命名之間轉(zhuǎn)換，所以除了實際聲明它們之外，我們不用擔(dān)心任何事情。
3. 在事件中使用短橫線命名
在發(fā)出定制事件時，最好使用短橫線命名，這是因為在父組件中，我們使用相同的語法來偵聽該事件。所以為了確保我們各組件之間的一致性，讓你的代碼更具可讀性，請在兩個地方都堅持使用短橫線命名。
4. 函數(shù)式組件
函數(shù)式組件是無狀態(tài)，它無法實例化，沒有任何的生命周期和方法。創(chuàng)建函數(shù)式組件也很簡單，只需要在模板添加 functional 聲明即可。一般適合只依賴于外部數(shù)據(jù)的變化而變化的組件，因其輕量，渲染性能也會有所提高。組件需要的一切都是通過 context 參數(shù)傳遞。它是一個上下文對象，具體屬性查看文檔。這里 props 是一個包含所有綁定屬性的對象。
5. 重用相同路由的組件
開發(fā)小伙伴們常常會遇到多個路由解析為同一個Vue組件的情況。問題是，Vue出于性能原因，默認(rèn)情況下共享組件將不會重新渲染，如果你嘗試在使用相同組件的路由之間進(jìn)行切換，則不會發(fā)生任何變化。如果你依然希望重新渲染這些組件，就可以通過在 router-view 組件中提供 :key 屬性來實現(xiàn)。
6. $createElement
一般情況下，每個Vue實例都可以訪問 $createElement 方法來創(chuàng)建和返回虛擬節(jié)點。例如，可以利用它在可以通過v-html指令傳遞的方法中使用標(biāo)記。在函數(shù)組件中，可以將此方法作為渲染函數(shù)中的第一個參數(shù)進(jìn)行訪問。
7. 使用JSX
由于Vue CLI 3默認(rèn)支持使用JSX，因此現(xiàn)在你可以使用JSX編寫代碼。如果尚未使用Vue CLI 3，則可以使用 babel-plugin-transform-vue-jsx 獲得JSX支持。
8. 作用域插槽實現(xiàn) UI 和業(yè)務(wù)邏輯的分離
我們常常會想復(fù)用一個組件的業(yè)務(wù)邏輯，但是不想使用該組件的 UI時，可以使用作用域插槽實現(xiàn) UI 和業(yè)務(wù)邏輯的分離。作用域插槽大致的思路是將 DOM 結(jié)構(gòu)交給調(diào)用方去決定，組件內(nèi)部只關(guān)注業(yè)務(wù)邏輯，最后將數(shù)據(jù)和事件等通過 :item ="item" 的方式傳遞給父組件去處理和調(diào)用，實現(xiàn) UI 和業(yè)務(wù)邏輯的分離。再結(jié)合渲染函數(shù)，就可以實現(xiàn)無渲染組件的效果。
以上就是Vue看了就會的8個小技巧的詳細(xì)內(nèi)容，更多關(guān)于vue 技巧的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中this.$http.post()跨域和請求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請求參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗證的相關(guān)資料,Vue可以通過使用組件化的方式來實現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue自定義組件search-box，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式
這篇文章主要介紹了Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程,Cesium是一個強(qiáng)大的JavaScript庫,支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下2023-12-12
基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04
今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
Vue中JS動畫與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動畫與Velocity.js的結(jié)合使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09