Why is the update of DOM in Vue asynchronous?

In Vue, the update of DOM is an asynchronous mechanism to optimize performance and improve user experience. This mechanism is called " asynchronous update queue ".

Vue's asynchronous update queue mechanism is the key to its efficient rendering. It reduces unnecessary DOM operations and improves performance by merging multiple data changes into one batch. The following is the general workflow of Vue's asynchronous update queue mechanism:

1. Data change triggers update: When the data in the Vue component changes, Vue will mark the component that needs to be updated as "need to update", and add these update operations to the update queue.

2. Execution update queue: In each event loop (Event Loop) cycle, Vue will execute a DOM update queue. This means that DOM updates are not performed immediately, but in the next event loop.

3. Merge update operation: If multiple data changes occur within the same event loop cycle, Vue will merge these changes into one update operation. This can avoid multiple DOM updates and improve rendering efficiency.

4. Generate virtual DOM: For components that need to be updated, Vue will generate a new virtual DOM according to the new state.

5. Compare differences: Vue will compare the old and new virtual DOM to find out the parts that need to be updated. This process is called the "Diff algorithm" and is used to determine which DOM nodes actually need to be modified.

6. Perform DOM update: Using the found diff, Vue performs the actual DOM update operation, rendering the page to the new state.

The advantages of Vue's asynchronous update queue mechanism are:

1. Performance optimization: Batch updates can reduce frequent DOM operations, thereby improving performance. If every data change triggers DOM update immediately, it may cause frequent redrawing and reflow, affecting the fluency and performance of the page.

2. Reduce repeated updates: If multiple data changes occur in the same event loop, Vue will merge them into one update to avoid multiple unnecessary DOM updates.

3. Prevent over-rendering: In some cases, a component's data may change multiple times in the same event loop. If every change triggers an immediate DOM update, it can lead to unnecessary re-renders.

4. Improve user experience: Asynchronous updates can ensure that Vue performs DOM updates at the right time, thereby reducing the blocking of the main thread and ensuring the responsiveness of the user interface.

In Vue, asynchronous updates are implemented through the event loop mechanism. When you modify the data of the component, Vue will put the DOM update task into the microtask queue, wait until the current task is executed (usually the execution of JavaScript code), and then execute the tasks in the microtask queue to complete the DOM update.

If you need to get the updated DOM result under certain circumstances, you can use $nextTickthe method provided by Vue, which allows you to execute the callback function and get the updated DOM after the DOM update is completed.

<template>
  <div>
    <p ref="message">{
    
    {
    
     message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      message: "Hello, Vue!"
    };
  },
  methods: {
    
    
    changeMessage() {
    
    
      this.message = "Updated Message";
      this.logMessage();
    },
    logMessage() {
    
    
      console.log("nextTick方法外:", this.$refs.message.textContent);//在这访问到的是未更新的DOM
      this.$nextTick(() => {
    
    
        // 在 DOM 更新后执行的操作
        const updatedMessage = this.$refs.message.textContent;//获取到的是更新后的DOM
        console.log("nextTick方法里:", updatedMessage);
      });
    }
  }
};
</script>

The result is as follows: