一文带你摸透vue2数据响应式原理

前言

写这篇博客之前，还是想感慨一下尤大大的精明厉害之处。

​​vue​​​的发展大家有目共睹，这一切离不开​​vue​​​数据响应式的发明，尽管​​vue2​​​的数据响应式处理还有一些问题，但这些问题都在​​vue3​​​中进行了解决，那我为什么还要写​​vue2​​​的数据响应式原理，而不直接写​​vue3​​的数据响应式原理呢？

因为​​vue2​​​在​​vue​​的发展中是个里程碑的存在，它的一些原理和思想对之后的​​vue​​​发展奠定了基础，不管之后​​vue​​​怎么变化，这些原理也不会变，这就是本篇博文中书写​​vue2​​数据响应式原理的原因。

开始之前先附上尤大大的总结：在getter中收集依赖，在setter中触发依赖。

开始研究前先创建​​index.html​​​和​​index.js​​​两个文件，在​​index.html​​​文件中引入​​index.js​​​文件，之后我们将在​​index.js​​​文件中书写代码，运行​​index.html​​文件查看效果。

一个完整的响应式应该包括：

• 数据劫持
• 收集依赖
• 发布订阅

数据劫持

为什么需要数据劫持？​​vue​​​中当我们对一个响应式数据进行更改时我们需要监听到这个响应式数据的变化，这就需要用到​​Object.defineProperty()​​​或者​​ES6​​​的​​Proxy​​​来对数据的更改操作进行劫持，之后进行一些操作后将数据更改的结果反馈给用户，这就实现了简单的响应式数据，​​vue2​​​使用的是​​Object.defineProperty()​​​所有我们这里只讲​​Object.defineProperty()​​。

Object.defineProperty()

​​Object.defineProperty()​​ 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

• ​​obj​​ 要定义属性的对象。
• ​​prop​​ 要定义或修改的属性的名称或 Symbol 。
• ​​descriptor​​ 要定义或修改的属性描述符。

先看一个小实例：

let obj = {};
Object.defineProperty(obj, "a", {
    value: 3,
});
Object.defineProperty(obj, "b", {
    value: "我是obj的b",
});
console.log(obj.a);
console.log(obj.b);

打印结果：

这里我们定义了一个​​obj​​的空对象，然后利用​​Object.defineProperty()​​向​​obj​​中添加了​​a、b​​两个属性，之后我们在访问​​obj.a​​和​​obj.b​​时就能打印出结果。

因为​​obj​​​本身是个空对象，所以这里​​Object.defineProperty()​​​通过在​​obj​​​对象上定义​​a、b​​​新属性时就实现了数据劫持，将我们处理的​​a、b​​反馈给了用户

看到这里大家应该已经明白​​Object.defineProperty()​​的基本作用以及数据劫持的原理了。

但是这个时候大家可能会有一个问题，为什么要用​​Object.defineProperty()​​​对​​obj​​​新增属性而不直接在定义​​obj​​时定义好属性呢？

因为在使用​​Object.defineProperty()​​时我们可以对新增的属性添加一些特别的功能：

​​configurable​​

• 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。该属性详解 默认为 false。

​​enumerable​​

• 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
  默认为 false。
  数据描述符还具有以下可选键值：

​​value​​

• 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。
  默认为 undefined。

​​writable​​

• 当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符 (en-US)改变。
  默认为 false。
  存取描述符还具有以下可选键值：

​​get​​

• 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
  默认为 undefined。

​​set​​

• 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
  默认为 undefined。

例如：上面那个代码的例子我们试着修改a属性：

let obj = {};
Object.defineProperty(obj, "a", {
    value: 3,

});
console.log(obj.a);
obj.a = 9;
console.log(obj.a);

可以看到a并没有被修改，这就是因为​​writable​​配置默认为false，我们修改一下​​writable​​配置：

let obj = {};
Object.defineProperty(obj, "a", {
    value: 3,
    //是否可写：是否可更改
    writable: true,
});
console.log(obj.a);
obj.a = 9;
console.log(obj.a);

可以看到a可以被修改了，这就是使用​​Object.defineProperty()​​来定义obj对象属性的原因：为了能够对新增的这个属性进行一些配置。

对​​Object.defineProperty()​​了解之后我们就可以对其进行封装，形成一个可以侦听到对象变化的函数：

defineReactive

function defineReactive(data, key, val) {
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        // 读取key时触发 getter
        get: function() {
            return val;
        },
        //更改key时触发 setter
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
        },
    });
}

这里的​​defineReactive​​​用来对 ​​Object.defineProperty​​​进行封装。从函数名字可以看出，其作用是定义一个响应式数据。也就是在这个函数中进行变化追踪，封装后只需要传入​​data​​​、​​key​​​和​​val​​就行了。

封装后之后，每当从​​data​​​的​​key​​​中读取数据时，​​get​​​函数会被触发；每当​​data​​​中的​​key​​​改变时，​​set​​函数会被触发

这里再看开头尤大大的那句话在getter中收集依赖，在setter中触发依赖。

你应该就能明白我们之后需要在​​defineReactive​​​的​​get​​​函数中收集依赖，在​​set​​函数中触发依赖，也就是在访问对象的属性时收集依赖，在更新对象的属性时触发依赖，什么是依赖，我们之后再说。

这里演示一下 ​​defineReactive​​的用法：

function defineReactive(data, key, val) {
    Object.defineProperty(data, key, {
        //可枚举
        enumerable: true,
        //可以被配置，比如delete
        configurable: true,
        // 读取key时触发 getter
        get: function() {
            console.log(`你试图访问${data}的${key}属性，它的值为：${val}`);
            return val;
        },
        //更改key时触发 setter
        set: function(newVal) {
            console.log(`你试图改变${data}的${key}属性，它的新值为：${newVal}`);
            if (val === newVal) {
                return;
            }
            val = newVal;
        },
    });
}

let obj = {
    a: 6,
    b: 9,
};
//将obj变成响应式数据
console.log(obj);
defineReactive(obj, "a", 6);
defineReactive(obj, "b", 9);
console.log(obj);

console.log("a", obj.a);
console.log("b", obj.b);
obj.a = "改变后的a";
console.log(obj.a);

这样​​obj​​的​​a​​和​​b​​就都变成响应式的了

这里有个有意思的点就是在将​​obj​​中的属性使用​​defineReactive​​变成响应式数据前后打印出的​​obj​​不同，但当它们展开后又是相等的：

但是这里你可能会发现​​defineReactive​​​函数好像只能将对象的第一层数据变成响应式的，如果​​obj​​是多层嵌套：

let obj = {
    a: {
        b: {
            m: {
                n: 66,
            },
        },
    },
};

这时我们该怎么使用​​defineReactive​​函数呢？

上面我们通过​​defineReactive(obj, "a", 6);​​​处理了​​a​​​属性，这个​​6​​​是​​a​​​属性的值，但如果​​obj​​​嵌套了，​​a​​​就不是一个确定的值了，而是一个对象，此时​​defineReactive​​的第三个参数怎么传呢？

这样？

defineReactive(obj, "a", {
    b: {
        m: {
            n: 66,
        },
    },
});

这样显然是不对的，正确的做法是不传！只需稍微更改一下​​defineReactive​​函数：

function defineReactive(data, key, val) {
    if (arguments.length == 2) {
        val = data[key];
    }
    Object.defineProperty(data, key, {
        //省略
    });
}

这个时候：

defineReactive(obj, "a");
console.log(obj.a.b.m.n);

只显示试图访问​​a​​属性，但我们具体在访问​​n​​属性，这样数据响应就不够准确了。

为什么呢？

因为​​defineReactive​​​第二个参数我们传的是​​a​​​，即侦听的是​​a​​​而不是​​n​​，怎么办呢？

这样？​​defineReactive(obj, "a.b.m.n")​​，这显然扯淡！

为了递归侦测对象的全部属性，即将对象的每一层属性全都变成响应式数据我们需要引入​​Observer​​​类和​​observe​​​函数（注意​​observer​​​函数不带​​r​​）

我们之后要用到​​es6​​的​​import​​导入语法，需要对现在的文件做一下处理：
​​index.html​​在引入​​index.js​​文件时加上​​type="module"​​

<script type="module" src="index.js"></script>

之后​​vscode​​安装​​Live Server​​，之后在​​index.html​​右键选择​​Open with Live Server​​打开即可

先提前看一下我们之后进行操作后的文件目录：

介绍一下各文件：

• ​​index.html​​

  入口文件，测试所用

• ​​index.js​​

  js主文件，测试所用

• ​​observe.js​​

  ​​observe​​函数，整个响应式系统的入口，判断指定的对象身上是否含有代表响应式数据的‘​​__ob__​​’属性，如果没有则​​new Observer()​​

• ​​Observer.js​​

  ​​Observer​​类，将​​new​​出的自己这个实例绑定到指定对象的​​__ob__​​属性上，并遍历对象的子属性调用​​defineReactive​​

• ​​defineReactive.js​​

  侦测对象内的指定属性，利用​​Object.defineProperty​​将其变成响应式数据，并调用​​observe​​函数形成递归调用。

• ​​utils.js​​

  工具函数，含有​​def​​函数：将指定值绑定到指定对象的指定属性上，并可自定义​​enumerable​​配置

我们先从​​index.js​​文件开始：

import observe from "./observe.js";
let obj = {
    a: {
        b: {
            m: {
                n: 66,
            },
        },
    },
    b: 99,
};

observe(obj);
obj.b++;
obj.a.b.m.n++;

可以看到这里我们引入了​​observe.js​​​，使用​​observe(obj)​​​将​​obj​​​这个对象的各个层级的所有属性都变成了响应式的，所以这里这个​​observe()​​​函数的作用就很明确了，那么我们就继续深入，看一下这个​​observe()​​函数是怎么做到将一个对象的各个层级的属性变成响应式的。

observe.js

import Observer from "./Observer.js";
export default function observe(value) {
    //如果value不是对象
    if (typeof value !== "object") {
        return;
    }
    let ob;
    if (typeof value.__ob__ !== "undefined") {
        ob = value.__ob__;
    } else {
        ob = new Observer(value);
    }
    return ob;
}

​​observe​​​函数首先在传入的值为​​object​​​对象的情况下，判断了它有没有​​__ob__​​​这个属性，如果有就赋值给​​ob​​​，如果没有就​​new​​​了一个​​Observer​​​实例赋值给了​​ob​​​，之后​​observe​​​函数将​​ob​​返回了。

看到这里我们并没有发现​​observe​​函数是怎样将一个对象的各个层级的属性变成响应式的，但是它​​new​​了一个​​Observer​​实例，那么我们就能

大胆猜测：

• 将一个对象的各个层级的属性变成响应式的活是​​Observer​​实例干的
• 而这个​​__ob__​​应该就是​​Observer​​实例！。

那​​__ob__​​有什么用呢？用处就是可以进行一个响应式数据的判断依据，如果一个数据已经含有​​__ob__​​​这个属性，那么就不再​​new Observer(value)​​，避免重复侦测​​value​​的变化。

至于​​observe​​​最后为什么要返回一个​​ob​​不用纠结！不用纠结！不用纠结！这个之后在研究数组的响应式处理和收集依赖时可能会用到，现在这里其实不返回也行。

顺着我们的猜测继续深入去看，但是在看​​Observer.js​​​之前我们先看​​utils.js​​：

utils.js

export const def = function(obj, key, value, enumerable) {
    Object.defineProperty(obj, key, {
        value,
        enumerable,
        writable: true,
        configurable: true,
    });
};

​​utils.js​​​就是一个简单的工具文件，它里面导出了一个​​def​​​函数，​​def​​​函数通过​​defineProperty​​​将传入的​​value​​​赋值给传入的​​obj​​​的​​key​​​属性，并且可以根据传入的​​enumerable​​​来配置​​key​​属性是否可以被枚举。

Observer.js

import { def } from "./utils.js";
import defineReactive from "./defineReactive.js";
export default class Observer {
    constructor(value) {
            console.log(value);
            console.log("我是this", this);
            //构造函数中的this不是表示类本身，而是表示实例
            //给实例添加了__ob__属性，值是这次new的实例
            def(value, "__ob__", this, false);
            //Observer类的目的是：将一个正常的object转换为
            //每个层级的属性都是响应式的object
            this.walk(value);
        }
        //遍历
    walk(value) {
        for (let k in value) {
            defineReactive(value, k);
        }
    }
}

​​Observer​​是一个类，它干了什么呢？

它调用了​​utils.js​​​中的​​def​​​函数，并传入了​​value, "__ob__", this, false​​​，作用就是利用​​def​​​函数将​​this​​​绑定到了​​value​​​的​​__ob__​​​属性上，并且​​__ob__​​这个属性不可被枚举。

绑定的这个​​this​​指的就是当前的​​Observer​​ 这个实例，通过打印我们可以看到：

这就印证了我们在看​​observe.js​​时的猜测：《这个​​__ob__​​应该就是​​Observer​​实例 》

并且前面我们也猜测《将一个对象的各个层级的属性变成响应式的活是​​Observer​​实例干的》

当我们看到​​Observer​​​ 类的​​walk​​​调用了​​defineReactive​​​，我们的猜测就全部印证了，因为我们知道​​defineReactive​​的作用不就是将一个数据变成响应式的吗？

看到这你应该有了大致的理解，让我们继续看下去：

​​observe​​​在​​new Observer​​​ 类的时候会调用​​walk​​​函数，​​walk​​​函数会遍历传来的​​value​​​的​​key​​​，然后调用​​defineReactive​​​将​​value​​​的这些​​key​​​变成响应式的，这就是为什么前面我们通过​​observe(obj)​​​能够将​​obj​​变成响应式的了。

但是从这里我们还不能发现它们能够将​​value​​这个对象参数的所有层的属性都变成响应式的，因为​​walk​​​通过​​for in​​​遍历​​value​​的属性只能遍历一层，那么怎么办呢？

到这里我们就剩一个我们最熟悉的​​defineReactive.js​​还没有看，会不会是它里面做了一些什么，能够让咱们分析的这个过程对一个对象的子属性也执行一遍，即递归调用，那么我们就赶紧来看一下这个​​defineReactive.js​​：

defineReactive.js

import observe from "./observe.js";
export default function defineReactive(data, key, val) {
    if (arguments.length == 2) {
        val = data[key];
    }
    //子元素要进行observe，至此形成了递归调用。（多个函数循环调用）
    let childOb = observe(val);
    Object.defineProperty(data, key, {
        //可枚举
        enumerable: true,
        //可以被配置，比如delete
        configurable: true,
        // 读取key时触发 getter
        get: function() {
            console.log(`你试图访问${data}的${key}属性，它的值为：${val}`);
            return val;
        },
        //更改key时触发 setter
        set: function(newVal) {
            console.log(`你试图改变${data}的${key}属性，它的新值为：${newVal}`);
            if (val === newVal) {
                return;
            }
            val = newVal;
            childOb = observe(newVal);
        },
    });
}

当我们看到​​defineReactive.js​​​中又引入了​​observe​​​ ，我们就应该恍然大悟了，除了入口文件​​index.js​​​，我们第一个分析的就是​​observe​​​，分析到最后​​defineReactive​​​又调用了​​observe​​，这不就是一个循环调用吗！

看到​​defineReactive​​执行了：

let childOb = observe(val);

当然现在也可以不让​​observe(val)​​​的返回值赋给​​childOb​​​ ，我们这里赋值给​​childOb​​是为了之后能用到，这里不用纠结为什么。

​​defineReactive​​​在对指定对象的​​key​​​进行响应式处理的时候先执行了​​observe(val)​​​，这个​​val​​​就是这个​​key​​​对应得的值，即​​data[key]​​​，如果这个值也是一个对象，那么​​observe​​就会对其再次进行处理，以此类推，循环调用，就将一个对象所有层的属性转换成了响应式数据。

并且在​​set​​​方法中，当设置了一个新值​​newVal​​​后，对这个新值也执行一下​​observe​​，使新的数据也变成响应式数据。

总结一下

整个过程：

1. ​​observe(obj)​​判断到​​obj​​不含​​__ob__​​这个属性，知道了​​obj​​还不是响应式数据，所以在​​observe​​函数内执行了​​new Observer(obj)​​（因为​​obj​​是传入的参数，所以之后的​​value​​都是指这个​​obj​​）
2. ​​new Observer(obj)​​将​​new​​出的这个​​Observer​​实例通过​​def函数​​绑定到了​​obj​​的​​__ob__​​不可枚举属性上，然后调用​​walk(obj)​​遍历​​obj​​上含有的第一层属性，逐个执行​​defineReactive(obj, k)​​ （​​k​​指遍历到的属性）
3. ​​defineReactive​​将​​obj​​上的这些属性（上一步遍历到的所有​​k​​）变成了响应式数据，​​defineReactive(obj, k​​)内又执行了​​observe(obj['k'])​​ 使用​​observe​​对​​k​​属性的​​值​​再次执行这整个过程，形成一个循环的过程。

自此​​obj​​​本身和它的所有对象属性上都有了这个​​__ob__​​​属性，后续如果​​observe(obj)​​​再执行就不会再​​new Observer(obj)​​了。

收集依赖

依赖是谁？Watcher！

前面说了在getter中收集依赖，在setter中触发依赖。

那依赖是谁呢？我们需要在访问数据时收集谁，更新数据时触发谁呢？

这个依赖其实就是我们定义的一个类：Watcher

什么是Watcher？

Watcher是个中介角色，数据发生变化时通知它，它再通知其他地方。

关于Wather，可以先看vue2中watch侦听的使用方式：

vm.$watch('a.b.c',function (newVal,oldVal) {
    //....
})

​​关于vm.$watch的vue2官方文档​​

持续更新中…