本文主要写Vue代码层面的优化。
路由懒加载
const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import('./Foo.vue') }
]
})
使用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>
keep-alive缓存页面
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
具体使用可以看这篇文章：利用Vue中keep-alive，快速实现页面缓存
v-for 遍历避免同时使用 v-if
可通过计算属性提前过滤掉那些不需要显示的项
<template>
<ul>
<li v-for="user in activeUsers" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>
<script>
export default {
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive;
});
},
},
};
</script>
长列表性能优化
- 如果列表是纯粹的数据展示,不会有任何改变,就不需要做响应化 可以使用Object.freeze()方法冻结对象
export default {
data: () => ({
users: [],
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
};
- 如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域的内容 可以使用 vue-virtual-scroller、vue-virtual-scroll-list 等虚拟滚动插件
<recycle-scroller class="items" :items="items" :item-size="24">
<template v-slot="{ item }">
<FetchItemView :item="item" @vote="voteItem(item)" />
</template>
</recycle-scroller>
事件销毁
Vue 组件销毁时,会自动解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。
created() {
this.timer = setInterval(this.refresh, 2000);
},
beforeDestroy() {
clearInterval(this.timer);
},
图片懒加载
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。 可以使用vue-lazyload 图片懒加载插件
<img v-lazy="/static/img/1.png">
第三方插件按需引入
像element-ui这样的第三方组件库可以按需引入避免体积太大。
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
具体看各官方文档
无状态的组件标记为函数式组件
适用于展示类组件，没有实例状态的组件。
<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>
子组件分割
对于比较耗时的任务。如果里面有动态内容的话，会经常的变，抽离成独立的组件，自己管自己，不会影响其它的地方，否则的话，整个页面都需要重新的渲染。
<template>
<div>
<ChildComp />
</div>
</template>
<script>
export default {
components: {
ChildComp: {
methods: {
heavy() {
/* 耗时任务 */
},
},
render(h) {
return h("div", this.heavy());
},
},
},
};
</script>
变量本地化
<template>
<div :style="{ opacity: start / 300 }">
{{ result }}
</div>
</template>
<script>
import { heavy } from "@/utils";
export default {
props: ["start"],
computed: {
base() {
return 42;
},
result() {
const base = this.base; // 不要频繁引用this.base
let result = this.start;
for (let i = 0; i < 1000; i++) {
result += heavy(base);//不会去引用this.base,效率高一些
}
return result;
},
},
};
</script>
