图解Vue异步更新原理

本文转载自微信公众号「 前端日志」，作者 前端日志。转载本文请联系 前端日志公众号。

为企业提供网站设计、成都网站制作、网站优化、全网营销推广、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

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

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

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

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

Vue 异步更新 DOM 原理

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

例如：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

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

答：在 Vue 的 nextTick 回调中。

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

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

 
 
 
 
    
  
  
  
  
  1. // 当一个 Data 更新时，会依次执行以下代码 
    2. 
  
  
  
  
  2. // 1. 触发 Data.set 
    3. 
  
  
  
  
  3. // 2. 调用 dep.notify 
    4. 
  
  
  
  
  4. // 3. Dep 会遍历所有相关的 Watcher 执行 update 方法 
    5. 
  
  
  
  
  5. class Watcher { 
    6. 
  
  
  
  
  6.   // 4. 执行更新操作 
    7. 
  
  
  
  
  7.   update() { 
    8. 
  
  
  
  
  8.     queueWatcher(this); 
    9. 
  
  
  
  
  9.   } 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. const queue = []; 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. function queueWatcher(watcher: Watcher) { 
    15. 
  
  
  
  
  15.   // 5. 将当前 Watcher 添加到异步队列 
    16. 
  
  
  
  
  16.   queue.push(watcher); 
    17. 
  
  
  
  
  17.   // 6. 执行异步队列，并传入回调 
    18. 
  
  
  
  
  18.   nextTick(flushSchedulerQueue); 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. // 更新视图的具体方法 
    22. 
  
  
  
  
  22. function flushSchedulerQueue() { 
    23. 
  
  
  
  
  23.   let watcher, id; 
    24. 
  
  
  
  
  24.   // 排序，先渲染父节点，再渲染子节点 
    25. 
  
  
  
  
  25.   // 这样可以避免不必要的子节点渲染，如：父节点中 v-if 为 false 的子节点，就不用渲染了 
    26. 
  
  
  
  
  26.   queue.sort((a, b) => a.id - b.id); 
    27. 
  
  
  
  
  27.   // 遍历所有 Watcher 进行批量更新。 
    28. 
  
  
  
  
  28.   for (index = 0; index < queue.length; index++) { 
    29. 
  
  
  
  
  29.     watcher = queue[index]; 
    30. 
  
  
  
  
  30.     // 更新 DOM 
    31. 
  
  
  
  
  31.     watcher.run(); 
    32. 
  
  
  
  
  32.   } 
    33. 
  
  
  
  
  33. } 
    34.

根据上面的代码，我们可以得出这样一个流程图：

图中可以看到，Vue 在调用 Watcher 更新视图时，并不会直接进行更新，而是把需要更新的 Watcher 加入到 Queue 队列里，然后把具体的更新方法 flushSchedulerQueue 传给 nextTick 进行调用。

接下来，我们分析一下 nextTick。

 
 
 
 
    
  
  
  
  
  1. const callbacks = []; 
    2. 
  
  
  
  
  2. let timerFunc; 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. function nextTick(cb?: Function, ctx?: Object) { 
    5. 
  
  
  
  
  5.   let _resolve; 
    6. 
  
  
  
  
  6.   // 1.将传入的 flushSchedulerQueue 方法添加到回调数组 
    7. 
  
  
  
  
  7.   callbacks.push(() => { 
    8. 
  
  
  
  
  8.     cb.call(ctx); 
    9. 
  
  
  
  
  9.   }); 
    10. 
  
  
  
  
  10.   // 2.执行异步任务 
    11. 
  
  
  
  
  11.   // 此方法会根据浏览器兼容性，选用不同的异步策略 
    12. 
  
  
  
  
  12.   timerFunc(); 
    13. 
  
  
  
  
  13. } 
    14.

可以看到，nextTick 函数非常简单，它只是将传入的 flushSchedulerQueue 添加到 callbacks 数组中，然后执行了 timerFunc 方法。

接下来，我们分析一下 timerFunc 方法。

 
 
 
 
    
  
  
  
  
  1. let timerFunc; 
    2. 
  
  
  
  
  2. // 判断是否兼容 Promise 
    3. 
  
  
  
  
  3. if (typeof Promise !== "undefined") { 
    4. 
  
  
  
  
  4.   timerFunc = () => { 
    5. 
  
  
  
  
  5.     Promise.resolve().then(flushCallbacks); 
    6. 
  
  
  
  
  6.   }; 
    7. 
  
  
  
  
  7.   // 判断是否兼容 MutationObserver 
    8. 
  
  
  
  
  8.   // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver 
    9. 
  
  
  
  
  9. } else if (typeof MutationObserver !== "undefined") { 
    10. 
  
  
  
  
  10.   let counter = 1; 
    11. 
  
  
  
  
  11.   const observer = new MutationObserver(flushCallbacks); 
    12. 
  
  
  
  
  12.   const textNode = document.createTextNode(String(counter)); 
    13. 
  
  
  
  
  13.   observer.observe(textNode, { 
    14. 
  
  
  
  
  14.     characterData: true, 
    15. 
  
  
  
  
  15.   }); 
    16. 
  
  
  
  
  16.   timerFunc = () => { 
    17. 
  
  
  
  
  17.     counter = (counter + 1) % 2; 
    18. 
  
  
  
  
  18.     textNode.data = String(counter); 
    19. 
  
  
  
  
  19.   }; 
    20. 
  
  
  
  
  20.   // 判断是否兼容 setImmediate 
    21. 
  
  
  
  
  21.   // 该方法存在一些 IE 浏览器中 
    22. 
  
  
  
  
  22. } else if (typeof setImmediate !== "undefined") { 
    23. 
  
  
  
  
  23.   // 这是一个宏任务，但相比 setTimeout 要更好 
    24. 
  
  
  
  
  24.   timerFunc = () => { 
    25. 
  
  
  
  
  25.     setImmediate(flushCallbacks); 
    26. 
  
  
  
  
  26.   }; 
    27. 
  
  
  
  
  27. } else { 
    28. 
  
  
  
  
  28.   // 如果以上方法都不知道，使用 setTimeout 0 
    29. 
  
  
  
  
  29.   timerFunc = () => { 
    30. 
  
  
  
  
  30.     setTimeout(flushCallbacks, 0); 
    31. 
  
  
  
  
  31.   }; 
    32. 
  
  
  
  
  32. } 
    33. 
  
  
  
  
  33.  
    34. 
  
  
  
  
  34. // 异步执行完后，执行所有的回调方法，也就是执行 flushSchedulerQueue 
    35. 
  
  
  
  
  35. function flushCallbacks() { 
    36. 
  
  
  
  
  36.   for (let i = 0; i < copies.length; i++) { 
    37. 
  
  
  
  
  37.     callbacks[i](); 
    38. 
  
  
  
  
  38.   } 
    39. 
  
  
  
  
  39. } 
    40.

可以看到，timerFunc 是根据浏览器兼容性创建的一个异步方法，它执行完成之后，会调用 flushSchedulerQueue 方法进行具体的 DOM 更新。

分析到这里，我们就可以得到一张整体的流程图了。

接下来，我们来完善一些判断逻辑。

  • 判断 has 标识，避免在一个 Queue 中添加相同的 Watcher。
  • 判断 waiting 标识，让所有的 Watcher 都在一个 tick 内进行更新。
  • 判断 flushing 标识，处理 Watcher 渲染时，可能产生的新 Watcher。

如：触发了 v-if 的条件，新增的 Watcher 渲染。

结合以上判断，最终的流程图如下：

最后，我们分析一下，为什么 this.$nextTick 能够获取更新后的 DOM?

 
 
 
 
    
  
  
  
  
  1. // 我们使用 this.$nextTick 其实就是调用 nextTick 方法 
    2. 
  
  
  
  
  2. Vue.prototype.$nextTick = function (fn: Function) { 
    3. 
  
  
  
  
  3.   return nextTick(fn, this); 
    4. 
  
  
  
  
  4. }; 
    5.

可以看到，调用 this.$nextTick 其实就是调用了图中的 nextTick 方法，在异步队列中执行回调函数。根据先来后到原则，修改 Data 触发的更新异步队列会先得到执行，执行完成后就生成了新的 DOM ，接下来执行 this.$nextTick 的回调函数时，能获取到更新后的 DOM 元素了。

由于 nextTick 只是单纯通过 Promise 、SetTimeout 等方法模拟的异步任务，所以也可以手动执行一个异步任务，来实现和 this.$nextTick 相同的效果。

 
 
 
 
    
  
  
  
  
  1. this.message = "hello world"; 
    2. 
  
  
  
  
  2. // 手动执行一个异步任务，也能获取最新的 DOM 
    3. 
  
  
  
  
  3. Promise.resolve().then(() => { 
    4. 
  
  
  
  
  4.   const textContent = document.getElementById("text").textContent; 
    5. 
  
  
  
  
  5.   console.log(textContent === "hello world"); // true 
    6. 
  
  
  
  
  6. }); 
    7. 
  
  
  
  
  7. setTimeout(() => { 
    8. 
  
  
  
  
  8.   const textContent = document.getElementById("text").textContent; 
    9. 
  
  
  
  
  9.   console.log(textContent === "hello world"); // true 
    10. 
  
  
  
  
  10. }); 
    11.

思考与总结

本文从源码的角度，介绍了 Vue 异步更新的原理，来简单回顾一下吧。

修改 Vue 中的 Data 时，就会触发所有和这个 Data 相关的 Watcher 进行更新。

首先，会将所有的 Watcher 加入队列 Queue。

然后，调用 nextTick 方法，执行异步任务。

在异步任务的回调中，对 Queue 中的 Watcher 进行排序，然后执行对应的 DOM 更新。

分享文章：图解Vue异步更新原理
网页路径：http://www.shufengxianlan.com/qtweb/news11/149111.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

动态网站知识

同城分类信息

商城网站建设公司　　 　犀浦门窗定制　　 　梦港之夜　　 　成都棕树电信机房　　 　成都花箱厂家　　 　广汉锦华建材　　 　成发金汇　　 　网站推广　　 　成都微信开发　　 　成都未宇聚　　 　电信机房托管服务器　　 　关键词排名　　 　网站解决方案　　 　德阳电信机房　　 　租用服务器　　 　盐亭网站建设　　 　德阳定制网站建设　　 　成都画册设计公司　　 　安卓开发　　 　禾巨建站