Vue中常見的效能優化

2022-02-21 14:24:26 字數 559 閱讀 8295

1. 不要將所有的資料都放到data中,data中的資料都會增加gettersetter,又會收集watcher,這樣還佔記憶體。不需要響應式的資料我們可以定義在例項上。

2.在v-for繫結事件的時候可以使用事件**,將事件繫結到外層元素上。

3. 使用keep-alive快取元件,防止元件來回的建立和銷毀這樣浪費效能。

4.使用v-show代替v-if指令。

5.key最好保證唯一性,提高 dom-diff 的復用效能。

7.localstorage,sessionstorage。

8.預渲染外掛程式 prerender-spa-plugin

打包優化:

1)使用 cdn 載入第三方模組

3)splitchunks 抽離公共檔案

4)sourcemap 生成原始碼對映

5)壓縮和快取

Vue常見的效能優化

6 事件銷毀 7 懶載入 8 第三方外掛程式按需引入 9 無狀態的元件標記為函式式元件 10 子元件分割 11 變數本地化 12 ssr const router newvuerouter keep alive div template cell 這種情況用 v show 復用 dom,比 v if...

vue中常見的指令

v text 把指定的資料渲染到指令所在的節點只能渲染純文字 類似於innertext v html 把指定的資料渲染到指令所在的節點,可以渲染html的結構,innerhtml v on 給元素繫結事件 v if 滿足條件的話,元素顯示 v show 滿足條件的話元素顯示 v cloak 解決差值...

vue中常見指令

一 檢視輸出指令 作用 把 model繫結到view v text和v html v text例項 這個將不會隨msg屬性的改變而改變 v html例項 二 屬性繫結指令 作用 把model動態繫結view v bind 是 vue中,提供的用於繫結屬性 title 的指令 四 v model 作用...