vue document获取不到id_图解 Vue 异步更新原理

最新推荐文章于 2024-06-15 13:26:04 发布

weixin_39872334

最新推荐文章于 2024-06-15 13:26:04 发布

阅读量1.1k

点赞数

本文深入解析Vue异步更新DOM的流程，从Data更新到Watcher异步渲染。通过分析源码，揭示Vue为何需要nextTick来获取最新DOM，并探讨相关判断逻辑。最后总结Vue数据变更时的更新步骤。

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

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

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

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

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

Vue 异步更新 DOM 原理

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

例如：

 {
    { message }} changeData

什么时候我们才能获取到真正的 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. 将当前 Watche