FE.SRC-Vue data changes cause performance problems and optimization solutions of update components

background

In a message list, there is timing data, which is updated every second. When using the Vue Devtool Flash Updates plugin to observe the update timing of the component, it is found that regardless of whether the data of a sub-item in the list changes, the entire list will be re-updated (below). Since the sub-components in the update will be re-updated, and the performance of the entire list will be affected by the timing per second.

The expectation is that if a certain sub-item timing data changes, only a certain sub-item should be updated, and the expectation is as follows

Troubleshooting process

• Direction: Check whether there are other props in the transmission of parent-child components that cause changes, and exclude properties one by one

  • Result: It is found that there are no properties that can affect the component itself, only the list array itself, which will still trigger

• Direction: Manually do useMemo processing for each component in the list to the sub-item

  • Result: Cached from the inside to the outside, and found dozens of parent components cached, one of the array elements changed, the list received by the child component will still be affected

• Direction: Check the data changes of state getters in vuex, the similarities and differences of state and getters in components to see if it will cause unnecessary updates

  • Vuex inspection results: The date and time data in vuex's getters will cause unnecessary refreshes, resulting in updates every second even if there is no timing display, and the vuex state will be modified when it changes. can solve the problem.
  • Vue inspection result: If only a property of the array element in the component state is modified, it is updated locally. But if an element in the array is modified, the list will still update the entire

in conclusion

About Array<Object> list rendering:

• Vue.$set( state.arr , i , val ) will trigger the update of the entire list component
• Change to Vue.$set( state.arr[i] , k , val ) will not

About Vuex getters:

• The getters that getters depend on are updated. Unlike react, which has a useMemo mechanism, the update will be triggered even if the value of the underlying type remains unchanged.
• The state that getters depends on is updated, and the underlying type value remains unchanged and will not trigger the update