答題思路：根據題目描述，這裡主要**
vue**層面的優化
一、路由懶載入
const
router
=new
vuerouter(]
})二、k
eep-alive
快取頁面
id=>
三、使用
v-show
復用dom
class
="cell"
>
v-show
="value"
class
="on"
>:n=
"10000"
/>
v-show
="!value"
class
="off"
>:n=
"10000"
/> 四、
v-for
遍歷避免同時使用
v-if
五、長列表效能優化
1. 如果列表是純粹的資料展示，不會有任何改變，就不需要做響應化
export
default),
async
created
() }
2.如果是大資料長列表，可採用虛擬滾動，只渲染少部分區域的內容
class
="items"
:items
="items"
:item-size
="24"
>
v-slot=""
>
:item
="item"
@vote
="voteitem(item)"
/>
六、事件的銷毀
vue
元件銷毀時，會自動解綁它的全部指令及事件***，但是僅限於元件本身的事件。
created() ,
beforedestroy()
七、懶載入
對於過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域
內的先不做載入，
等到滾動到可視區域後再去載入。
v-lazy
="/static/img/1.png"
>
vue-lazyload
八、第三方外掛程式按需引入 像
element-ui
這樣的第三方元件庫可以按需引入避免體積太大。
import
vuefrom
'vue'
import
from
'element-ui'
vue.use
(button)
vue.
use(
select)
九、無狀態的元件標記為函式式元件
functional
>
class
="cell"
>
v-if
="props.value"
class
="on"
>
v-else
class
="off"
>
十、子元件分割
十一、變數本地化
:style=""
>}
十二、ssr
8 Vue學習 fetch請求
1 import from api getdata 從api getdata.js中import login函式。看一下如下的getdata.js檔案，其中export了login函式，所以其他地方可以呼叫。import fetch from config fetch export const lo...
vue訓練營4 vue中的diff演算法
原始碼分析1 diff的必要性，src core instance lifecycle.jslifecycle.js mountcomponent 元件中可能存在很多個 data 中的key使用 原始碼分析2 diff的執行方式，src core vdom patch.js patchvnode p...
Vue全解8 Vue表單輸入繫結v model
vue 全解 0 vue 例項 vue 全解 1 構造選項 options 之 data vue 全解 2 vue 模板語法摘要 vue 全解 3 vue 的 data 和資料響應式 vue 全解 4 options 之生命週期鉤子 created mounted updated destroyed...