图解 Vue 异步更新原理

最新推荐文章于 2024-07-05 10:43:06 发布

孟思行

最新推荐文章于 2024-07-05 10:43:06 发布

阅读量908

点赞数 8

分类专栏：复习大纲文章标签： javascript vue.js reactjs html css

本文链接：https://blog.csdn.net/u011192674/article/details/108048082

版权

本文详细探讨Vue异步更新DOM的原理，从Data变化到Watcher如何在nextTick回调中执行更新，揭示Vue的更新队列和异步更新机制。通过对源码的分析，解释了为何需要nextTick获取最新DOM，并讨论了相关优化策略。

摘要由CSDN通过智能技术生成

上一篇《图解 Vue 响应式原理》中，我们通过 9 张流程图，理解了 Vue 的渲染流程，相信大家对整个 Vue 的渲染流程有了一定的了解，这一篇我们来重点关注一下 Vue 异步更新原理模块。

本文主要分析 Vue 从 Data 更新，到通知 Watcher 异步更新视图的流程，也就是下图中的橙色部分。

我们先来回顾一下图中的几个对象：

Data 对象：Vue 中的 data 方法中返回的对象。
Dep 对象：每一个 Data 属性都会创建一个 Dep，用来搜集所有使用到这个 Data 的 Watcher 对象。
Watcher 对象：主要用于渲染 DOM。

接下来，我们就开始分析这个流程。

Vue 异步更新 DOM 原理

很多同学都知道，Vue 中的数据更新是异步的，意味着我们在修改完 Data 之后，并不能立刻获取修改后的 DOM 元素。

例如：

<template>
  <div>
    <span id="text">{
  { message }}</span>
    <button @click="changeData">
      changeData
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello",
    };
  },
  methods: {
    changeData() {
      this.message = "hello world";
      const textContent = document.getElementById("text").textContent;
      // 直接获取，不是最新的
      console.log(textContent === "hello world"); // false
			// $nextTick 回调中，是最新的
      this.$nextTick(() => {
        const textContent = document.getElementById("text").textContent;
        console.warn(textContent === "hello world"); // true
      });
    },
  },
};
</script>

什么时候我们才能获取到真正的 DOM 元素？

答：在 Vue 的 nextTick 回调中。

这一点在 Vue 官网有详细的介绍，但你是否有想过，为什么 Vue 需要通过 nextTick 方法才能获取最新的 DOM？

带着这个疑问，我们直接看一下源码。

// 当一个 Data 更新时，会依次执行以下代码
// 1. 触发 Data.set
// 2. 调用 dep.notify
// 3. Dep 会遍历所有相关的 Watcher 执行 update 方法
class Watcher {
   
  // 4. 执行更新操作
  update() {
   
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
   
  // 5. 将当前 Watcher 添加到异步队列
  queue.push(watcher);
  // 6. 执行异步队列，并传入回调
  nextTick(flushSchedulerQueue);
}

// 更新视图的具体方法
function flushSchedulerQueue() {
   
  let watcher, id