Vue异步更新机制如何实现详解？

本文共计1425个文字，预计阅读时间需要6分钟。

目录 + 收集去重后的watcher进行更新 + 实现nextTick方法 + 测试demo详解 + 前言：本文将详细讲解整体的更新过程，并手动实现Vue的异步更新逻辑相关代码。+ 收集去重后的watcher进行更新 + 这部分内容将详细介绍。

目录

• 收集去重后的watcher进行更新
• 实现nextTick方法
• 测试demo详解

前言：

本文将详细讲解具体的更新过程，并手写实现Vue的异步更新逻辑相关代码。

收集去重后的watcher进行更新

这里先回顾一下依赖收集的相关知识：

• 页面首次挂载，会从vm实例上获取data中的值，从而调用属性的get方法来收集watcher
• 当vm实例上的属性更新它的值时，会执行收集到的watcher的update方法

看下之前完成的代码：

class Watcher { // some code ... update () { // 直接执行更新操作 this.get() } }

那么watcher的update到底应该如何被执行呢？这就是本文的重点。