Vue 响应式流程

Sep 27 · 2 min

#前言

这个系列是用来记录笔者观看 Vue 源码的一些理解，可能理解会有些偏差，但过一段时间再看 Vue 源码，可能又会有新的理解，所以会反复勘误。

本文以 Vue 2.16.4 版本简述在数据更新时，Vue 响应式系统内部做了哪些事才让视图得以更新。

#从一个例子开始

  new Vue({
    el: "#app",
    template: `
      <div>
        <span>{{ name }}</span>
        <button @click="name = '李四'">
          点击更新视图
        </button>
      </div>
    `,
    data() {
      return {
        name: '张三'
      }
    },
  })
js

当我们点击按钮时，视图会发生更新，会触发 set 函数，收集依赖放入一个叫 subs 数组，最终调用 dep.notify 方法， notify 方法中会对 subs 依赖数组进行 update 操作，我们知道 Vue 的渲染机制是组件为单位，基于 JavaScript 的事件循环机制异步渲染的，所以在数据变化后，我们不能立刻更新视图，而是将它保存在一个队列 queue 中，我们执行 queueWatcher 方法，将渲染 watcher 放入队列中。

之后会执行 nextTick 方法将 flushSchedulerQueue 方法（最终执行队列的函数）作为参数传入，并放入一个 callback 数组中，在 nextTick 方法中比较关键的方法就是 timerFunc 方法了，在这里，它会对根据环境判断来降级选取适合的宏/微任务来对视图进行异步更新的操作，降级策略如下：

Promise > MutationObserver > setImmediate > setTimeout

之后等待页面的代码全都 mutation 变动完成后， flushCallbacks 才会执行，它通过循环 callbacks 来分别执行 flushSchedulerQueue ，它会循环执行 watcher queue 去执行 watcher.get 方法，里面的 this.getter 实际上就是 updateComponent 方法。

let updateComponent = () => {
  vm._update(vm._render(), hydrating)
}
js

可以看到它会先执行 vm._render 方法，会经过3个步骤生成 Render 函数：

  • parse 生成 AST 树
  • optimize 为 AST 树加上 static 属性
  • generate 将 AST 树转换为 render 函数

具体过程可以在这里可以看到

之后就会执行 vm._update 方法，最终经过 patch 方法，给 DOM 打上 "补丁"，修改页面上的数据。

#总结

image

笔者在看完源码后画了这张流程图，希望对你理解 Vue 响应式流程会一定帮助。

​

CC BY-NC-SA 4.0 © Razzh