前端性能优化(三) vue性能优化九法

前言

在VueConf US 大会上 Vue开发核心团队成员 Guillaume Chau 发表了一个名为Vue性能优化9法的主题。

演讲视频：http://www.youtube.com/watch?v=5B66qer8cZo

演讲文稿：https://slides.com/akryum/vueconfus-2019#/

演示网站：https://vue-9-perf-secrets.netlify.com

演示代码：https://github.com/Akryum/vue-9-perf-secrets

优化九法

1. 函数型组件
2. 子组件拆分
3. 局部变量
4. 活用v-show，减少v-if
5. 使用keep-alive
6. 活用延迟装载（Defer）
7. 分批处理（Time slicing）
8. 非响应模式
9. 仅渲染可视化部分

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="{