网络日志

FE.SRC-Vue数据变动引发update组件的性能问题与优化方案

背景

一个消息列表中,有个计时的数据,每秒都会更新。当使用Vue Devtool Flash Updates插件观察组件update时机时,发现不论列表中的某个子项数据是否有变动,都会导致整个列表重新update(下图)。由于update时里面子组件都会重新update,再加上每秒计时导致整个列表的性能收到影响。

期望是如果有某个子项计时数据变动,那应该只更新某个子项,期望如下图

排查过程

  • 方向:检查父子组件的传递中是否有其他props导致了变动,逐个排除属性

    • 结果:发现并没有属性能够影响组件本身,只剩列表数组本身,还是会触发
  • 方向:对列表到子项中的各个组件手动做useMemo处理

    • 结果:从内到外都做了缓存,发现几十父组件缓存,其中一个数组元素变动,子组件收到的列表还是会受影响
  • 方向:检查vuex中state getters数据变动,组件内state,getters的异同,看是否会引起不必要的更新

    • Vuex排查结果:vuex的getters中的日期时间数据会引起不必要的刷新,导致即使没有计时显示也会每秒update,改造成变动时再修改vuex state。可以解决问题。
    • Vue排查结果:如果只是组件state里的数组元素的某个属性修改,是局部更新的。但如果是数组中的一个元素被修改,列表还是会整个update

结论

关于 Array<Object> 列表渲染:

  • Vue.$set( state.arr , i , val ) 会触发整个列表组件的update
  • 改为Vue.$set( state.arr[i] , k , val ) 则不会

关于 Vuex 的 getters :

  • getters依赖的getters更新,不像react有useMemo机制,即使基础类型值不变也会触发update
  • getters依赖的state更新,基础类型值不变不会触发update