当前位置: 首页 > Web前端 > vue.js

FE.SRC-Vue数据变化导致更新组件性能问题及优化解决方案

时间:2023-03-31 20:23:27 vue.js

背景在一个消息列表中,有一个定时数据,会每秒更新一次。在使用VueDevtoolFlashUpdates插件观察组件的更新时机时,发现无论列表中某个子项的数据是否发生变化,整个列表都会再次更新(下图)。由于更新时子组件会再次更新,每秒的计时会影响整个列表的性能。期望是如果某个子项的时序数据发生变化,应该只更新某个子项。期望是检查流程的方向如下图所示:检查父子组件的传递中是否还有其他props引起了变化,将properties一一排除。结果:找不到属性影响组件本身,只剩下list数组本身,方向依然会被触发:从list到subitem的每个组件手动useMemo处理结果:从里到外缓存,发现有几十个父组件缓存,其中一个数组元素发生变化,子组件接收到的列表仍然会受到影响。方向:查看vuex中的stategetters数据变化,组件中state和getters的异同,看看会不会引起不必要的更新。vuex排查结果:vuexgetters中的日期时间数据会造成不必要的刷新,即使没有定时显示也会每秒更新一次,然后在变化时修改vuex状态。可以解决问题。Vue排查结果:如果只修改了组件状态中数组元素的一个属性,则部分更新。但是如果数组中的某个元素被修改,列表仍然会作为一个整体更新。关于Array列表渲染的结论:Vue.$set(state.arr,i,val)会触发整个列表组件更新为Vue.$set(state.arr[i],k,val)不会更新Vuex的getters:getters依赖的getters。不像react有useMemo机制,即使底层类型的值不变,也会触发updategetters依赖的state更新。type值不变,不会触发update