How to optimize list rendering performance in Vue3 combination API

1. Responsive data optimization

Avoid unnecessary responsive conversions

When using v-for for list rendering, try to avoid converting it into responsive data for data that does not change. For example, if the elements in the list contain some static properties (such as fixed labels, unchanged descriptions, etc.), these properties can be placed in a non-responsive object, and only key properties that need to be dynamically updated (such as user status, data values, etc.) are ref or reactive for responsive wrapping.

Suppose we have a user list where the user's name is fixed and the user's online status will change:

<template>
  <ul>
    <li v - for="user in userList">
      {{  }} - <span :class="{ online:  }">Status: {{ ? 'Online' : 'Offline' }}</span>
    </li>
  </ul>
</template>
<script setup>
import { reactive } from 'vue';
const userList = reactive([
  { name: 'Alice', isOnline: ref(true) },
  { name: 'Bob', isOnline: ref(false) }
]);
</script>

Here, `` is fixed and does not require responsive processing, but `` is responsively wrapped using `ref`, which reduces unnecessary responsive overhead.

Accurate update of responsive data

When updating some data in the list, try to update the responsive data as accurately as possible to avoid re-rendering the entire list. For example, if you only modify an attribute of an element in the list, you should update the attribute directly instead of reassigning the entire element.

For example, to update the online status of a user in the user list:

<script setup>
import { reactive } from 'vue';
const userList = reactive([
  { name: 'Alice', isOnline: ref(true) },
  { name: 'Bob', isOnline: ref(false) }
]);
const updateUserStatus = (index, newStatus) => {
  userList[index]. = newStatus;
};
</script>
<template>
  <ul>
    <li v - for="(user, index) in userList">
      {{  }} - <span :class="{ online:  }">Status: {{ ? 'Online' : 'Offline' }}</span>
      <button @click="updateUserStatus(index, true)">Set Online</button>
      <button @click="updateUserStatus(index, false)">Set Offline</button>
    </li>
  </ul>
</template>

By directly updating `userList[index].`, Vue can update the DOM more accurately, re-rendering only the affected parts, rather than the entire list.

2. Optimization of virtual DOM and Diff algorithms

Use key attribute

In the v - for directive, it is very important to provide a unique key attribute for each list item. The key attribute helps Vue identify each list item, so that when updating the list, Vue can more efficiently compare the old and new lists through the virtual DOM's Diff algorithm, and only re-render the necessary parts.

For example, when rendering a user list:

<template>
  <ul>
    <li v - for="user in userList" :key="">
      {{  }} - <span :class="{ online:  }">Status: {{ ? 'Online' : 'Offline' }}</span>
    </li>
  </ul>
</template>
<script setup>
import { reactive } from 'vue';
const userList = reactive([
  { id: 1, name: 'Alice', isOnline: ref(true) },
  { id: 2, name: 'Bob', isOnline: ref(false) }
]);
</script>

Here, `` is used as the `key` attribute. When the order of the list changes or some elements are added or deleted, Vue can quickly locate the changed elements according to `key` to improve update efficiency.

Understand how the Diff algorithm works

Vue's virtual DOM Diff algorithm compares nodes of new and old virtual DOM trees. When rendering a list, it matches the old and new nodes according to the key attribute. If the keys of the node are the same, it will further compare whether other attributes of the node have changed; if the keys are different, it will be considered as new node insertion or old node deletion.

For example, when inserting a new user in a list, the Diff algorithm will determine where the new node is inserted based on the new user's key (assuming the id is the key), and will only update the DOM of the affected node after the insertion position, rather than re-rendering the entire list.

3. Componentization and lazy loading optimization

Componentized list items

If each element in the list is complex and contains a lot of logic and DOM structures, you can encapsulate the list item into a separate component. In this way, Vue can manage updates for each component more efficiently when updating the list and can utilize the component's lifecycle hook to optimize performance.

For example, encapsulate the user list item into a UserListItem component:

<template>
  <li>
    {{  }} - <span :class="{ online:  }">Status: {{ ? 'Online' : 'Offline' }}</span>
  </li>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  user: Object
});
</script>

Then use `v - for` in the parent component to render this component:

<template>
  <ul>
    <UserListItem v - for="user in userList" :user="user" :key=""/>
  </ul>
</template>
<script setup>
import { reactive } from 'vue';
import UserListItem from './';
const userList = reactive([
  { id: 1, name: 'Alice', isOnline: ref(true) },
  { id: 2, name: 'Bob', isOnline: ref(false) }
]);
</script>

Lazy loading list item components

For long lists containing a large number of list items, consider using lazy loading techniques. That is, the component is loaded only when the list item enters the visual area. It can be implemented using some third-party libraries (such as vue - lazyload) or the browser's Intersection Observer API. This reduces the performance overhead during initial loading, especially in mobile devices or slower network environments.

The above is the detailed content on how to optimize list rendering performance in Vue3 combination API. For more information on optimization of Vue3 list rendering performance, please pay attention to my other related articles!