avatar

目录
Vue 性能优化

函数型组件

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

函数型组件

子组件拆分

另一个优化技巧是,将复杂的耗时计算处理放在子组件中进行处理,未优化前,只要组件 Update 一次都会调用 heavy(),所以性能比较低;复杂的业务拆分到子组件后,父组组件 Update 对子组件无影响:

子组件拆分

拓展:Vue 的父组件和子组件生命周期钩子函数执行顺序

  • 加载渲染过程:
    父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted → 父 mounted
  • 子组件更新过程:
    父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated
  • 父组件更新过程
    父 beforeUpdate → 父 updated
  • 销毁过程:
    父 beforeDestroy → 子 beforeDestroy → 子 destroyed → 父 destroyed

Vue 生命周期、Vue 的父组件和子组件生命周期钩子函数执行顺序、生命周期内调用异步请求

再拓展:子组件怎么知道父组件更新了状态?
vue 父组件数据更新,子组件没有变化
按我的理解,该文章的写法其实是错误的,props:["parendData"] 是可以直接按 data 状态用法使用的,没必要再 this.msg = this.parendData 赋值一下,父组件修改了 parendData 子组件会响应的,至于改文中说的无效,还是生命周期问题,父组件更新不会触发子组件任何生命周期钩子

局部变量

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

局部变量

活用 v-show,减少 v-if

对于需要频繁切换的视图来说,使用 v-show 比 v-if 更加节约性能。因为 v-show 可以避免 DOM 节点的销毁和重建

活用 v-show,减少 v-if

  • v-show
    v-show

  • v-if
    v-if

扩展:display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间,不能点击
但 HTML 节点(DOM 树)并没有真的被删除
DOM 树:表示页面的结构
渲染树:表示页面的节点如何显示
DOM 树 + CSSOM 树 = 渲染树 (Render Tree)
构建渲染树,这个过程称为“重排”,将重新构建的渲染树渲染到屏幕上,这个过程就是“重绘”

参考

使用 keep-alive

另外一种很常用的优化技巧是使用 keep-alive,通常是在路由切换组件中使用:
使用 keep-alive 后,可以保留组件状态并且避免重新渲染。

使用 keep-alive

活用延迟加载(Defer)

这里主要是优化 UI 的渲染

活用延迟加载(Defer)

分批处理(Time slicing)

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

分批处理(time slicing)

非响应式模式(non-reactive)

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

非响应式模式(non-reactive)

仅渲染可视化部分

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

仅渲染可视化部分

参考:vue-virtual-scroller 组件

优化心得

优化心得

资料:

文章作者: Tim
文章链接: http://w3ctim.com/post/7ef8af61.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tim

评论