由深入浅出 Vue 响应式 （一） 和 （二） 的介绍，我们可以画一个大的代码结构图：

我们已经分析了 initState 中的 initData（图右上部分） ，它会将我们的 data 属性转换为 getter / setter。也分析了 mount 的流程，它会编译你的模板到 render 函数，并且创建一个渲染 watcher 来做响应更新。

computed 属性初始化（绿框部分）处于 initState 的流程，晚于 initData ，但早于 mount 的流程，总的来看是从 new Vue 到 dom 的大流程内。

我再次故意强调这个流程的重要性，因为从 Vue 响应式的角度来看，绕来绕去仍然是两个大流程：从 new Vue 到 dom 的初始化， 数据变化时如何响应（只不过computed 的变化是其依赖的变化，而不是 computed 属性本身）。拆分这两个阶段使得我们更好理解 Vue computed 属性的工作原理。

Vue nextTick 是 Vue 内部非常重要的机制。本文假设你已经了解 microtask 和 macrotask 的区别，将从以下三个角度来介绍 nextTick：

1. 静态方法 Vue.nextTick 挂载
2. 实例方法 Vue.prototype.$nextTick 挂载
3. nextTick 源码分析。

场景

假如要写一个文件解析器。针对不同的文件类型调用不同的方法。如果用一个函数来表达，可能会写出如下代码：

1
2
3
4
5

function fileParser(fileType) {
  if (fileType === 'js') jsParser();
  if (fileType === 'txt') txtParser();
  // ....
}

每增加一种类型，我们需要修改我们的 fileParser 函数，增加一个条件判断。这样不够优雅。

数据驱动开发是 Vue 的一大特征。

那么什么是数据驱动呢？在 Vue 的概念下，我们可以通过 data 来初始化页面；后续可以通过操作data 的值，来改变页面。整个过程都是围绕 data 来变化，所以称之为数据驱动，其中操作数据更新页面又常被称为响应式。

在 深入浅出 Vue 数据驱动 （一） 中，我们已经介绍了初始化的部分，本节主要介绍响应式是如何实现的。

数据驱动开发，与传统的 jQuery 开发相比，有很多优势。最明显的两点是：

1. 不需要关注 dom。不仅不需要关注如何初始化dom，也不需要关心状态变更时如何处理dom。整个流程围绕着如何操作数据。
2. 可以方便做优化。因为整个流程都是数据，加上配合 vdom 对底层的抽象，我们可以做类似于 diff patch 算法的优化。多了层抽象意味着有了很多优化空间。

在做UI 编程时，通常有两个流程需要考虑：

• 第一次进来时如何展示。
• 当后续有变化时如何展示。

这是一个动态的时间序的考量。对应在 Vue 的流程中：

• 从 new Vue 到 dom。
• 数据变化时更新 dom（很多人称之为响应式）。

本节主要分析从 new Vue 到最终 dom 的过程。