Vue的优化

Vue前端开发到第一阶段，就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章，将介绍几种在实践过程中可以用到的性能优化技巧

函数型组件

由于组件的生命周期处理在框架层面上十分耗时，所以，建议平常尽量使用函数型组件。这样，可以避免不必要的性能损失。只要在模板上声明functional属性，就可以实现函数式组件了：

<template functional>
    <div>
        <div v-if="value" class="on"></div>
        <section v-else class="off"></section>
    </div>
</template>

<script>
    export default {
        props: ['value']
    }
</script>

子组件拆分

另一个优化技巧是，将复杂的耗时计算处理放在子组件中进行处理：

<template>
    <div :style="{opacity: number / 300 }">
        <ChildComp />
    </div>
</template>

<script>
    export default {
        props: ['number'],
        components: {
            ChilComp: {
                methods: {
                    heavy() {
                        // heavy task
                    }
                },
                render(h) {
                    return h('div', this.heavy())
                }
            }
        }
    }
</script>

局部变量

平常在引用computed数据进行计算的时候，可以多使用局部变量，这样可以避免多次重复计算。

<template>
  <div :style="{ opacity: start / 300 }">{{ result }}</div>
</template>

<script>
export default {
  props: ['start'],
  computed: {
    base () {
      return 42
    },
    result () {
      // 赋值给局部变量，防止重复计算
      const base = this.base;
      let result = start
      for (let i = 0; i < 1000; i++) {
        result += Math.sqrt(Math.cos(Math.sin(base))) + base * base + base + base * 2 + base * 3
      }
      return result
    },
  },
}
</script>

活用v-show,减少v-if

对于需要频繁切换的视图来说，使用v-show比v-if更加节约性能。因为v-show可以避免dom节点的销毁和重建，所以我们可以将如下的例子

<template functional>
    <div class="cell">
        <div v-if="props.value" class="on">
            <Heavy :n="10000" />
        </div>
        <section v-else class="off">
            <Heavy :n="10000" />
        </section>
    </div>
</template>

改写为

<template functional>
    <div class="cell">
        <div v-show="props.value" class="on">
            <Heavy :n="10000" />
        </div>
        <section v-show="!props.value" class="off">
            <Heavy :n="10000" />
        </section>
    </div>
</template>

使用keep-alive

另外一种很常用的优化技巧是使用keep-alive，通常是在路由切换组件中使用：

<template>
    <div id="app">
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

使用keep-alive后，可以保留组件状态并且避免重新渲染。

活用延迟加载（defer)

<template>
  <div class="deferred-off">
    <VueIcon icon="fitness_center" class="gigantic"/>

    <h2>I'm an heavy page</h2>

    <Heavy v-for="n in 8" :key="n"/>

    <Heavy class="super-heavy" :n="9999999"/>
  </div>
</template>

<template>
  <div class="deferred-on">
    <VueIcon icon="fitness_center" class="gigantic"/>

    <h2>I'm an heavy page</h2>

    <template v-if="defer(2)">
      <Heavy v-for="n in 8" :key="n"/>
    </template>

    <Heavy v-if="defer(3)" class="super-heavy" :n="9999999"/>
  </div>
</template>

<script>
import Defer from '@/mixins/Defer'
export default {
  mixins: [
    Defer(),
  ],
}
</script>

分批处理(time slicing)

下面这个性能优化的点是前端通用的，可以用requestAnimationFrame分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染。

比如下面这个例子：

fetchItems({ commit }, { items }) {
    commit('clearItems');
    commit('addItems', items)
}

可以改写为：

fetchItems({ commit }, { items, splitCount }) {
    commit('clearItems');
    //新建一个队列
    const queue = new JobQueue();
    splitArray(items, splitCount).forEach(chunk => queue.addJob(done => {
        // 分片
        requestAnimationFrame(() => {
            commit('addItems', chunk);
            done()
        });
    }));
    
    // 等待所有数据处理完毕
    awiat queue.start();
}

非响应式模式(non-reactive)

对于复杂的数据结构，我们可以显式声明为非响应式，这样可以避免很多不必要的计算，从而提高性能：

const data = items.map(item => optimizeItem(item));

function optimizeItem (item) {
    const itemData = {
        id: uid ++,
        vote: 0
    };
    Object.defineProperty(itemData, 'data', {
        // mark as non-reactive
        configurable: false,
        value: item
    });
    return itemData
}

仅渲染可视化部分

对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分。

来看一下下面这个例子：

<div class="items no-v">
    <FetchItemViewFunctional v-for="item of items" :key="item.id" :item="item" @vote="voteItem(item)">
    </FetchItemViewFunctional>
</div>

这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿。此时大家可以利用vue-virtual-scroller这个组件，进行优化：

<recycle-scroller
    class="item"
    :items="items"
    :item-size="24"              
>
    <template v-slot="{item}">
        <FetchItemView :item="item" @vote="voteItem(item)"/>
    </template>
</recycle-scroller>

这样，可以大大提升组件的流畅度和性能。