前面介绍过一篇 Web App 页面性能优化的文章，这是对普通页面的性能优化。针对 Vue 页面，还有一些特殊技巧。
使用v-show
使用v-show隐藏显示DOM，其大小和位置都不会改变，不会引起回流(reflow)与重绘(repaint)。v-if适用于在运行时很少改变条件，不需要频繁切换条件的情况。
使用 computed
computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容，它可以设置 getter 和 setter。watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
v-for 遍历加 key
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 / 复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
销毁清理
在组件销毁时清理它与其它实例的连接，解绑它的全部指令及事件监听器，有效防止内部泄漏。
在动态组件上使用 keep-alive
KeepAlive 包裹的组件实例能够被在它们第一次被渲染创建的时候缓存下来。当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
使用异步组件按需加载
动态路由、异步组件和 webpack 的 code-splitting 功能一起配合使用，将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。渐进式渲染能避免一次渲染由于 JS 执行时间过长导致渲染卡住的现象。
使用防抖、节流
使用 lodash debounce(也有可能是 throttle) 来直接控制高耗任务，防抖、节流在一定程度上可以减小再次渲染的次数，从而避免反复重渲染导致的性能问题。
使用非响应数据
不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）。把新提交的数据中的对象属性 data 手动变成了只读，这样也就会减少递归响应式的逻辑，相当于减少了这部分的性能损耗。数据量越大，这种优化的效果就会更明显。
子组件拆分
由于 Vue 的更新是组件粒度的，虽然每一帧都通过数据修改导致了父组件的重新渲染，但是子组件却不会重新渲染，因为它的内部没有任何响应式数据的变化。因此组件不会在每次渲染都执行耗时任务，自然执行的 JavaScript 时间就变少了。
使用函数式组件
由于函数式组件不需要实例化，无状态，没有生命周期，props 可以不用显示声明，所以没有在 props 里面声明的属性都会被自动隐式解析为 prop，所以渲染性能要好于普通组件。
使用虚拟组件
使用大数据列表时，因为使用虚拟列表/虚拟表格/虚拟滚动的实现方式，是只渲染视口内的 DOM，这样总共渲染的 DOM 数量就很少了，自然性能就会好很多。
大家平常工作都用到过哪些优化 Vue 页面性能的技巧呢？
Happy Coding!😁
评论 (0)