Vue源码：数据响应式原理(1)

2401_84093490

于 2024-05-14 23:00:49 发布

阅读量723

点赞数 16

分类专栏：程序员文章标签： vue.js javascript 原型模式

本文链接：https://blog.csdn.net/2401_84093490/article/details/138874070

版权

程序员专栏收录该内容

271 篇文章 0 订阅

订阅专栏

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

默认为undefined。

这里有一个小坑：用闭包存储get 和set 的值

在这里插入图片描述

defineReactive函数

===========================================================================

getter / setter需要变量周转才能工作

在这里插入图片描述

使用defineReactive函数不需要设置临时变量，而是用闭包

在这里插入图片描述

递归侦测对象全部属性

=====================================================================

在这里插入图片描述

数组的响应式处理

===================================================================

改写七个方法，以Array.prototype为原型，创建了一个arrayMethods对象，并且用es6的Object.setPrototypeOf方法，让数组的__proto__指向了arrayMethods，就可以调用新定义的七个函数方法。

在这里插入图片描述

import {def} from “./utils”;

// 得到Array.prototype

const arrayPrototype = Array.prototype;

// 以arrayPrototype为原型创建arrayMethods对象并暴露

export const arrayMethods = Object.create(arrayPrototype);

const methodsNeedChange = [

‘push’,

‘pop’,

‘shift’,

‘unshift’,

‘splice’,

‘sort’,

‘reverse’

]

methodsNeedChange.forEach(methodName => {

// 备份原来的方法，因为push、pop等7个函数的功能不能被剥夺

const original = arrayPrototype[methodName];

// 定义新的方法

def(arrayMethods, methodName, function () {

// 恢复原来的功能

const result = original.apply(this, arguments);

// 把类数组对象变为数组

const args = […arguments];

// 把这个数组身上的__ob__取出来，__ob__已经被添加了，为什么已经被添加了？

// 因为数组肯定不是最高层，比如obj.g属性是数组，obj不能是数组，第一次遍历obj这个对象的第一层的时候已经给g属性（就是这个数组）添加了__ob__属性

const ob = this.ob;

// 有三种方法push/unshift/splice能够插入新项，现在要把插入的新项也变成observe的

let inserted = [];

switch (methodName) {

case ‘push’:

case ‘unshift’:

inserted = args;

break;

case ‘splice’:

// splice格式是splice(下标，数量，插入的新项)

inserted = args.slice(2);

break;

}

// 判断有没有要插入的新项，让新项也变成响应的

if (inserted) ob.observeArray(inserted);

console.log(‘啦啦啦’);

return result;

}, false)

})

依赖收集

===============================================================

什么是依赖

需要用到数据的地方，称为依赖
Vue1.x，细粒度依赖，用到数据的DOM都是依赖
Vue2.x，中等粒度依赖，用到数组的组件是依赖
在getter中收集依赖，在setter中触发依赖

Dep类和Watcher类

把依赖收集的代码封装成一个Dep 类，它专门用来管理依赖，每个Observer 的实例，成员中都有一个Dep 的实例；
Watcher 是一个中介，数据发生变化时通过Watcher 中转，通知组件

依赖就是Watcher 。只有Watch触发的getter才会收集依赖，哪个

Watcher 触发了getter，就把哪个Watch收集到Dep中。

Dep 使用发布订阅模式，当数据发生变化时，会循环依赖列表，把所

有的Watcher 都通知一遍。

代码实现的巧妙之处：Watcher把自己设置到全局的一个指定位置，然后读取数据，因为读取了数据，所以会触发这个数据的getter。在getter 中就能得到当前正在读取数据的Watcher，并把这个Watcher 收集到Dep 中。

在这里插入图片描述

完整代码

===============================================================

在这里插入图片描述

index.js

import observe from “./observe”;

import Watcher from “./Watcher”;

let obj = {

a: {

m: {

n: 5

}

b: 5,

c: {

d: {

e: {

f: 666

}

g: [22, 33, 44, 55]

};

observe(obj);

new Watcher(obj, ‘a.m.n’, (val) => {

console.log(‘☆☆☆☆☆’, val);

})

obj.a.m.n = 1;

console.log(obj);

Observer.js

import {def} from ‘./utils’

import defineReactive from “./defineReactive”;

import {arrayMethods} from ‘./array’

import observe from “./observe”;

import Dep from “./Dep”;

export default class Observer {

constructor(value) {

// 每一个observer的实例身上，都有一个dep

this.dep = new Dep();

// 给实例（this，一定要注意，构造函数中的this不是表示类本身，而是表示实例）

// 给实例添加了一个__ob__属性，值是这次new的实例

def(value, ‘ob’, this, false);

// console.log(‘我是Observer构造器’, value);

// 不要忘记初心，Observer类的目的是：将一个正常的object转换为每个层级的属性都是响应式(可被侦测)的object

// 检查是数组还是对象

if (Array.isArray(value)) {

// 如果是数组，要非常强行的蛮干：将这个数组的原型，指向arrayMethods

Object.setPrototypeOf(value, arrayMethods);

// 让这个数组变得observe

this.observeArray(value);

} else {

this.walk(value);

}

// 遍历

walk(value) {

for (let v in value) {

defineReactive(value, v);

}

// 数组的特殊遍历

observeArray(arr) {

for (let i = 0, l = arr.length; i < l; i++) {

// 逐项进行observe

observe(arr[i]);

}

observe.js

import Observer from “./Observer”;

// 创建observe函数，注意函数的名字没有r

export default function observe(value) {

// 如果value不是对象，什么都不做

if (typeof value !== ‘object’) return;

// 定义ob

let ob;

ob = typeof value.ob !== ‘undefined’ ? value.ob : new Observer(value);

return ob;

}

defineReactive.js

import observe from “./observe”;

import Dep from “./Dep”;

export default function defineReactive(data, key, val) {

const dep = new Dep();

// console.log(‘我是defineReactive’, data, key)

if (arguments.length === 2) val = data[key];

// 子元素要进行observe，至此形成了递归。

// 这个递归不是函数调用自己，而是多个函数、类循环调用

let childOb = observe(val);

Object.defineProperty(data, key, {

// 可枚举

enumerable: true,

// 可以被配置，比如可以被外部delete

configurable: true,

get() {

console.log(你试图访问${key}属性);

// 如果现在处于依赖收集节点

if (Dep.target) {

dep.depend();

if (childOb) {

childOb.dep.depend();

}

return val;

set(newValue) {

console.log(你试图改变${key}属性, newValue);

if (val === newValue) return;

val = newValue;

// 当设置了新值，这个新值也需要被observe

childOb = observe(newValue);

// 发布订阅模式，通知dep

dep.notify();

}

})

}

utils.js

export const def = function (obj, key, value, enumerable) {

Object.defineProperty(obj, key, {

value,

enumerable,

writable: true,

configurable: true

})

};

array.js

import {def} from “./utils”;

// 得到Array.prototype

const arrayPrototype = Array.prototype;

// 以arrayPrototype为原型创建arrayMethods对象并暴露

export const arrayMethods = Object.create(arrayPrototype);

const methodsNeedChange = [

‘push’,

‘pop’,

‘shift’,

‘unshift’,

‘splice’,

‘sort’,

‘reverse’

]

methodsNeedChange.forEach(methodName => {

// 备份原来的方法，因为push、pop等7个函数的功能不能被剥夺

const original = arrayPrototype[methodName];

// 定义新的方法

def(arrayMethods, methodName, function () {

// 恢复原来的功能

const result = original.apply(this, arguments);

// 把类数组对象变为数组

const args = […arguments];

// 把这个数组身上的__ob__取出来，__ob__已经被添加了，为什么已经被添加了？

const ob = this.ob;

// 有三种方法push/unshift/splice能够插入新项，现在要把插入的新项也变成observe的

let inserted = [];

switch (methodName) {

case ‘push’:

case ‘unshift’:

inserted = args;

break;

case ‘splice’:

// splice格式是splice(下标，数量，插入的新项)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
数量，插入的新项)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-zBwfiN4A-1715698837839)]

[外链图片转存中…(img-DzB2dR5m-1715698837839)]

[外链图片转存中…(img-aycWD4w0-1715698837840)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84093490

关注

16
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Vue源码：数据响应式原理(1)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫