const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import('./Foo.vue') } ]
})
<template>
<div id="app"> <keep-alive> <router-view/> </keep-alive> </div>
</template>
<template>
<div class="cell"> <!--這種情況用v-show復(fù)用DOM扫倡，比v-if效果好--> <div v-show="value" class="on"> <Heavy :n="10000"/>
</div>
<section v-show="!value" class="off"> <Heavy :n="10000"/>
</section>
</div>
</template>
- v-for 遍歷避免同時(shí)使用v-if
- 長列表優(yōu)化
如果列表是純粹的數(shù)據(jù)展示,不會(huì)改變,就不需要做響應(yīng)式
export default { data: () => ({ users: []
}),
async created() {
const users = await axios.get("/api/users"); this.users = Object.freeze(users);
}
};
- 如果大數(shù)據(jù)列表,可采取虛擬滾動(dòng),只渲染小部分區(qū)域內(nèi)容
<recycle-scroller class="items" :items="items" :item-size="24"
>
<template v-slot="{ item }"> <FetchItemView :item="item" @vote="voteItem(item)" />
</template> </recycle-scroller>
<img v-lazy="/static/img/1.png">
- 第三方插件按需引入
- 無狀態(tài)組件標(biāo)記為函數(shù)組件
- 子組件分割
- 變量本地化
