vue2数据响应式原理——数据劫持(对象篇)

举报
Ailjx 发表于 2022/09/16 16:13:47 2022/09/16
【摘要】 前言通过上一篇想必你已经对Object.defineProperty()有了一定的理解,这一篇我们就在前面的基础上探讨如何通过Object.defineProperty()来对对象,甚至是嵌套的对象进行数据劫持,以便我们能够侦听到对象的变化。对Object.defineProperty()了解之后我们就可以对其进行封装,形成一个可以侦听到对象变化的函数: 数据劫持(对象篇) defineR...

前言

通过上一篇想必你已经对Object.defineProperty()有了一定的理解,这一篇我们就在前面的基础上探讨如何通过Object.defineProperty()来对对象,甚至是嵌套的对象进行数据劫持,以便我们能够侦听到对象的变化。

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进行封装。从函数名字可以看出,其作用是定义一个响应式数据。也就是在这个函数中进行变化追踪,封装后只需要传入datakeyval就行了。

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

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

你应该就能明白我们之后需要在defineReactiveget函数中收集依赖,在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);

在这里插入图片描述
这样objab就都变成响应式的了

这里有个有意思的点就是在将obj中的属性使用defineReactive变成响应式数据前后打印出的obj不同,但当它们展开后又是相等的:
在这里插入图片描述

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

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

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

上面我们通过defineReactive(obj, "a", 6);处理了a属性,这个6a属性的值,但如果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

我们之后要用到es6import导入语法,需要对现在的文件做一下处理:
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赋值给传入的objkey属性,并且可以根据传入的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的作用不就是将一个数据变成响应式的吗?

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

observenew Observer 类的时候会调用walk函数,walk函数会遍历传来的valuekey,然后调用defineReactivevalue的这些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. defineReactiveobj上的这些属性(上一步遍历到的所有k)变成了响应式数据,defineReactive(obj, k)内又执行了observe(obj['k']) 使用observek属性的再次执行这整个过程,形成一个循环的过程。

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

说到这里后细心的你可能会发现,上面我们所做的操作在对数组的响应式处理中会有一些问题,比如:

let obj = {
    c: [1, 2, 3],
};
observe(obj);
obj.c.push(9);

在这里插入图片描述

可以看到,我们使用push方法向obj.c数组中添加了一个元素9,但是通过控制台我们发现,我们以上的处理并没有侦测到数组的改变,所以我们接下来就来看怎么对数组进行处理:[vue2数据响应式原理之数据劫持(数组篇)]

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。