九种Vue性能优化方法

Vue前端开发到第一阶段，就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章，将介绍几种在实践过程中可以用到的性能优化技巧（文中例子来自https://www.youtube.com/watch?v=5B66qer8cZo）。

函数型组件

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

子组件拆分

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

局部变量

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

活用v-show,减少v-if

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

改写为

使用keep-alive

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

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

活用延迟加载（defer)

分批处理(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
}

仅渲染可视化部分

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

来看一下下面这个例子：

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

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

——本文首发于个人公众号，转载请注明出处———

微信扫描二维码，关注我的公众号

最后，欢迎大家关注我的公众号，一起学习交流。

参考资料

https://www.youtube.com/watch?v=5B66qer8cZo