路由懒加载
const router = new VueRouter({
routes: [{ path: '/foo', component: () => import('./Foo.vue') }]
})
Keep-alive
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
使用 v-show 复用 DOM
<template>
<div class="cell">
<!--这种情况用v-show复用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 遍历避免同时使用 v-if
虚拟滚动
vue-virtual-scroller
vue-virtual-scroll-list
副作用函数及时清除
created() {
this.timer = setInterval(this.refresh, 2000)
}
beforeDestroy() {
clearInterval(this.timer)
}
图片懒加载
<img v-lazy="/static/img/1.png">
第三方插件按需引入
无状态的组件标记为函数式组件
<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>