91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

分享幾個Vue的實現技巧

發布時間:2021-01-21 15:12:32 來源:億速云 閱讀:165 作者:Leah 欄目:開發技術

今天就跟大家聊聊有關分享幾個Vue的實現技巧,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。

1. 始終在 `v-for` 中使用 `:key`

在需要操縱數據時,將key屬性與v-for指令一起使用可以讓程序保持恒定且可預測是很有必要的。這樣Vue就可以跟蹤組件狀態,并對不同的元素有一個常量引用。在使用動畫或Vue轉換時,如果沒有key ,Vue只會嘗試使DOM盡可能高效。這或許會導致v-for中的元素出現亂序,或行為難以預測。如果我們對每個元素都有唯一的鍵引用,就能更好地預測Vue應用程序將如何精確地處理DOM操作。

2. 使用駝峰式聲明 props,并在模板中使用短橫線命名來訪問 props

最佳做法只是遵循每種語言的約定。在 JS 中,駝峰式聲明是標準,在HTML中,是短橫線命名。Vue 已經提供了駝峰式聲明和短橫線命名之間轉換,所以除了實際聲明它們之外,我們不用擔心任何事情。

3. 在事件中使用短橫線命名

在發出定制事件時,最好使用短橫線命名,這是因為在父組件中,我們使用相同的語法來偵聽該事件。所以為了確保我們各組件之間的一致性,讓你的代碼更具可讀性,請在兩個地方都堅持使用短橫線命名。

4. 函數式組件

函數式組件是無狀態,它無法實例化,沒有任何的生命周期和方法。創建函數式組件也很簡單,只需要在模板添加 functional 聲明即可。一般適合只依賴于外部數據的變化而變化的組件,因其輕量,渲染性能也會有所提高。組件需要的一切都是通過 context 參數傳遞。它是一個上下文對象,具體屬性查看文檔。這里 props 是一個包含所有綁定屬性的對象。

5. 重用相同路由的組件

開發小伙伴們常常會遇到多個路由解析為同一個Vue組件的情況。問題是,Vue出于性能原因,默認情況下共享組件將不會重新渲染,如果你嘗試在使用相同組件的路由之間進行切換,則不會發生任何變化。如果你依然希望重新渲染這些組件,就可以通過在 router-view 組件中提供 :key 屬性來實現。

6. $createElement

一般情況下,每個Vue實例都可以訪問 $createElement 方法來創建和返回虛擬節點。例如,可以利用它在可以通過v-html指令傳遞的方法中使用標記。在函數組件中,可以將此方法作為渲染函數中的第一個參數進行訪問。

7. 使用JSX

由于Vue CLI 3默認支持使用JSX,因此現在你可以使用JSX編寫代碼。如果尚未使用Vue CLI 3,則可以使用 babel-plugin-transform-vue-jsx 獲得JSX支持。

8. 作用域插槽實現 UI 和業務邏輯的分離

我們常常會想復用一個組件的業務邏輯,但是不想使用該組件的 UI時,可以使用作用域插槽實現 UI 和業務邏輯的分離。作用域插槽大致的思路是將 DOM 結構交給調用方去決定,組件內部只關注業務邏輯,最后將數據和事件等通過 :item ="item" 的方式傳遞給父組件去處理和調用,實現 UI 和業務邏輯的分離。再結合渲染函數,就可以實現無渲染組件的效果。

看完上述內容,你們對分享幾個Vue的實現技巧有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

岑溪市| 温泉县| 普兰店市| 杂多县| 吴旗县| 承德市| 修文县| 大英县| 吉木乃县| 特克斯县| 平武县| 集贤县| 东海县| 通辽市| 金塔县| 宜丰县| 呈贡县| 嘉定区| 商水县| 资源县| 师宗县| 得荣县| 邵武市| 四平市| 斗六市| 庆安县| 曲沃县| 肇源县| 明光市| 平乡县| 河西区| 尼玛县| 黄陵县| 通辽市| 汽车| 贵港市| 二连浩特市| 且末县| 英德市| 宁武县| 若尔盖县|