前言
在VueConf US 大会上 Vue开发核心团队成员 Guillaume Chau 发表了一个名为Vue性能优化9法的主题。
演讲视频:http://www.youtube.com/watch?v=5B66qer8cZo
演讲文稿:https://slides.com/akryum/vueconfus-2019#/
优化九法
- 函数型组件
- 子组件拆分
- 局部变量
- 活用v-show,减少v-if
- 使用keep-alive
- 活用延迟装载(Defer)
- 分批处理(Time slicing)
- 非响应模式
- 仅渲染可视化部分
1.函数型组件
函数型组件中,生命周期的耗时处理将不再操作,会作为一个函数进行处理,所以整体页面的效率会提高。适用于只依赖外部数据传递而变化的组件,组件内部没有任何生命周期函数的要处理。
优化前:
<template>
<div class="cell">
<div v-if="value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
优化后:
<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标签中加上functional属性 <template functional>
2.子组件拆分
把一些比较重的计算,比如循环处理,拆分到子组件中去实现。
优化前:
<template>
<div :style="{
opacity: number / 300 }">
<div>{
{ heavy() }}</div>
</div>
</template>
<script>
export default {
props: ['number'],
methods: {
heavy () {
/* HEAVY TASK */ }
}
}
</script>
优化后:
<template>
<div :style="{