Vue源码分析之Observer实现过程

导语：

本文是对 Vue 官方文档深入响应式原理（https://cn.vuejs.org/v2/guide/reactivity.html）的理解，并通过源码还原实现过程。

响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是 Watcher、Dep、Observer。本文主要解读 Observer 。

这篇文章讲解上篇文章没有覆盖到的 Observer 部分的内容，还是先看官网这张图：

Observer 最主要的作用就是实现了上图中touch -Data(getter) - Collect as Dependency这段过程，也就是依赖收集的过程。

还是以下面的代码为例子进行梳理：

（注：左右滑动即可查看完整代码，下同）

在源码中，通过还原Vue 进行实例化的过程，从开始一步一步到Observer 类的源码依次为（省略了很多不在本篇文章讨论的代码）：

在initData 方法中，开始了对data 项中的数据进行“观察”，会将所有数据的变成observable 的。接下来看observe 方法的代码：

observe 方法的作用是给data 创建一个Observer 实例并返回，如果data 有ob属性了，说明已经有Observer 实例了，则返回现有的实例。Vue 的响应式数据都会有一个ob的属性，里面存放了该属性的Observer 实例，防止重复绑定。再来看new Observer(value) 过程中发生了什么：

通过源码可以看到，实例化Observer 过程中主要是做了两个判断。如果是数组，则对数组里面的每一项再次调用oberser 方法进行观察；如果是非数组的对象，遍历对象的每一个属性，对其调用defineReactive 方法。这里的defineReactive 方法就是核心！通过使用Object.defineProperty 方法对每一个需要被观察的属性添加get/set，完成依赖收集。依赖收集过后，每个属性都会有一个Dep 来保存所有Watcher 对象。按照文章最开始的例子来讲，就是对firstName和fullName分别添加了get/set，并且它们各自有一个Dep 实例来保存各自观察它们的所有Watcher 对象。下面是defineReactive 的源码：

按照源码中的中文注释，应该可以明白defineReactive 执行的过程中做了哪些工作。其实整个过程就是递归，为每个属性添加getter/setter。对于getter/setter，同样也需要对每一个属性进行递归（判断子对象）的完成观察者模式。对于getter，用来完成依赖收集，即源码中的dep.depend()。对于setter，一旦一个数据触发其set方法，便会发布更新消息，通知这个数据的所有观察者也要发生改变。即源码中的dep.notify()。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue2.0 资源文件assets和static的区别详解

Angular 5.x 学习笔记之Router(路由)应用

React Router v4 入坑指南