摘自《剖析Vue.js内部运行机制》

Vue.js是一款MVVM框架，数据模型仅仅是普通的JavaScript对象，但是对这些对象进行操作时，却能影响对应视图，它的核心实现就是响应式系统。尽管我们在使用Vue.js 进行开发时不会直接修改响应式系统，但是理解它的实现有助于避开一些常见的坑，也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。

Object.defineProperty

首先我们来介绍一下 Object.defineProperty，Vue.js 就是基于它实现响应式系统的。

/*    obj: 目标对象    prop: 需要操作的目标对象的属性名    descriptor: 描述符        return value 传入对象*/Object.defineProperty(obj, prop, descriptor)

descriptor的一些属性：

• enumerable：属性是否可枚举，默认false。
• configurable：属性是否可以被修改或者删除，默认 false。
• get：获取属性的方法。
• set：设置属性的方法。

实现 observer （可观察的）

知道了Object.defineProperty 以后，我们来用它使对象变成可观察的。

首先我们定义一个cb函数，这个函数用来模拟视图更新，调用它即代表更新视图，内部可以是一些更新视图的方法。

function cb (val) {    /* 渲染视图 */    console.log("视图更新啦～");}

然后我们定义一个defineReactive，这个方法通过 Object.defineProperty来实现对对象的响应式化，入参是一个obj（需要绑定的对象）、key（obj 的某一个属性），val（具体的值）。经过 defineReactive处理以后，我们的obj的 key属性在读的时候会触发reactiveGetter方法，而在该属性被写的时候则会触发 reactiveSetter方法。

function defineReactive (obj, key, val) {    Object.defineProperty(obj, key, {        enumerable: true,       /* 属性可枚举 */        configurable: true,     /* 属性可被修改或删除 */        get: function reactiveGetter () {            return val;         /* 实际上会依赖收集，下一小节会讲 */        },        set: function reactiveSetter (newVal) {            if (newVal === val) return;            cb(newVal);        }    });}

当然这是不够的，我们需要在上面再封装一层 observer。这个函数传入一个value（需要响应式化的对象），通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive 处理。

function observer (value) {    if (!value || (typeof value !== 'object')) {        return;    }        Object.keys(value).forEach((key) => {        defineReactive(value, key, value[key]);    });}

最后，让我们用observer来封装一个Vue吧！

在Vue的构造函数中，对 options 的 data 进行处理，这里的 data想必大家很熟悉，就是平时我们在写Vue 项目时组件中的data属性（实际上是一个函数，这里当作一个对象来简单处理）。

class Vue {    /* Vue 构造类 */    constructor(options) {        this._data = options.data;        observer(this._data);    }}

这样我们只要 new一个Vue对象，就会将 data中的数据进行响应式化。如果我们对data的属性进行下面的操作，就会触发 cb 方法更新视图。

let o = new Vue({    data: {        test: "I am test."    }});o._data.test = "hello,world.";  /* 视图更新啦～ */

至此，响应式原理已经介绍完了，接下来让我们学习响应式系统的另一部分 ——依赖收集。

响应式系统的依赖收集追踪原理

栗子一：

我们现在有这么一个 Vue对象。

new Vue({    template:         `<div>            <span>{{text1}}</span>             <span>{{text2}}</span>         <div>`,    data: {        text1: 'text1',        text2: 'text2',        text3: 'text3'    }});

然后我们做了这么一个操作。

this.text3 = 'modify text3';

我们修改了 data中 text3 的数据，但是因为视图中并不需要用到 text3，所以我们并不需要触发上一章所讲的cb函数来更新视图，调用cb显然是不正确的。

栗子二：

let globalObj = {    text1: 'text1'};let o1 = new Vue({    template:        `<div>            <span>{{text1}}</span>         <div>`,    data: globalObj});let o2 = new Vue({    template:        `<div>            <span>{{text1}}</span>         <div>`,    data: globalObj});

这个时候，我们执行了如下操作。

globalObj.text1 = 'hello,text1';

我们应该需要通知o1以及o2两个 vm实例进行视图的更新，依赖收集会让text1这个数据知道：“有两个地方依赖我的数据，我变化的时候需要通知它们”。

接下来我们来介绍一下依赖收集是如何实现的。

订阅者 Dep

首先我们来实现一个订阅者Dep，它的主要作用是用来存放Watcher观察者对象。

class Dep {    constructor () {        /* 用来存放 Watcher 对象的数组 */        this.subs = [];    }    /* 在 subs 中添加一个 Watcher 对象 */    addSub (sub) {        this.subs.push(sub);    }    /* 通知所有 Watcher 对象更新视图 */    notify () {        this.subs.forEach((sub) => {            sub.update();        })    }}

为了便于理解我们只实现了添加的部分代码，主要是两件事情：

• 用 addSub方法可以在目前的Dep对象中增加一个Watcher 的订阅操作；
• 用 notify方法通知目前Dep 对象的subs中的所有 Watcher对象触发更新操作。

观察者 Watcher

class Watcher {    constructor () {        /* 在 new 一个 Watcher 对象时将该对象赋值给 Dep.target，在 get 中会用到 */        Dep.target = this;    }    /* 更新视图的方法 */    update () {        console.log("视图更新啦～");    }}Dep.target = null;

依赖收集

接下来我们修改一下defineReactive以及Vue的构造函数，来完成依赖收集。

我们在闭包中增加了一个Dep 类的对象，用来收集 Watcher对象。在对象被读的时候，会触发reactiveGetter函数把当前的 Watcher对象（存放在Dep.target中）收集到Dep 类中去。之后如果当该对象被写的时候，则会触发 reactiveSetter方法，通知 Dep类调用 notify来触发所有Watcher 对象的 update 方法更新对应视图。

function defineReactive (obj, key, val) {    /* 一个 Dep 类对象 */    const dep = new Dep();        Object.defineProperty(obj, key, {        enumerable: true,        configurable: true,        get: function reactiveGetter () {            /* 将 Dep.target（即当前的 Watcher 对象存入 dep 的 subs 中） */            dep.addSub(Dep.target);            return val;                 },        set: function reactiveSetter (newVal) {            if (newVal === val) return;            /* 在 set 的时候触发 dep 的 notify 来通知所有的 Watcher 对象更新视图 */            dep.notify();        }    });}class Vue {    constructor(options) {        this._data = options.data;        observer(this._data);        /* 新建一个 Watcher 观察者对象，这时候 Dep.target 会指向这个 Watcher 对象 */        new Watcher();        /* 在这里模拟 render 的过程，为了触发 test 属性的 get 函数 */        console.log('render~', this._data.test);    }}

总结

首先在 observer 的过程中会注册get方法，该方法用来进行依赖收集。在它的闭包中会有一个Dep 对象，这个对象用来存放Watcher对象的实例。其实依赖收集的过程就是把Watcher实例存放到对应的 Dep 对象中去。

get方法可以让当前的Watcher对象（Dep.target）存放到它的subs 中（addSub ）方法，在数据变化时，set会调用Dep对象的 notify方法通知它内部所有的Watcher 对象进行视图更新。这是Object.defineProperty 的 set/get方法处理的事情，那么依赖收集的前提条件还有两个：

• 触发 get方法；
• 新建一个Watcher对象。

这个我们在Vue 的构造类中处理。新建一个Watcher 对象只需要new出来，这时候Dep.target 已经指向了这个new出来的 Watcher 对象来。

而触发 get方法也很简单，实际上只要把 render function进行渲染，那么其中的依赖的对象都会被读取，这里我们通过打印来模拟这个过程，读取 test来触发get 进行依赖收集。

原著是一个有趣的人,若有侵权,请通知删除