本文详细解析了Vue中实现响应式数据的原理，包括Observer、Dep、Watcher三者的关系，以及数组响应式处理的细节。递归侦测对象属性确保了数据的深层响应，而依赖收集和setter触发更新则确保了视图的正确同步。同时，文章还介绍了如何处理数组方法，以在调用如push、pop等方法时保持响应性。
递归侦测对象的全部属性
这里的递归不是指自己调用自己，而是指多个文件互相引用形成递归
目标对象
var obj = {
a: {
m : {
n: 3
}
},
b: 4,
c: 4
}
import Observer from './Observer.js'
//创建observe函数，函数的名字没有r
export default observe = function(value) {
//如果value不是对象什么都不做
if (typeof value !== 'object') return;
// 定义ob 存储observer类的实例
//定义ob
var ob;
if (typeof value.__ob__ !== 'undefined') {
// __ob__是用来存储Observer实例的
ob = value.__ob__;
} else {
ob = new Observer(value);
}
return obj;
}
import { def } from './utils.js'
import defineReative from './defineReactive.js'
//开头大写说明是一个类
//要思考一个类要如何被实例化
//Observer类是将一个正常的object转换为每个层级的属性都是响应式（可以被侦测的）的object
//这个类的目的是将一个正常的obj转换成每个层级的属性都是响应式的obj
export default class Observer {
constructor(value) {
//构造函数中的this表示的是实例
// 给实例添加了__ob__属性，值是这次new的实例
def(value, '__ob__', this, false);
this.walk(value);
}
//遍历
walk(value) {
//遍历value对象的每一个key，把每一个key都设置成definReative
for (let k in value) {
//拿出遍历后的子节点，并将子节点进行设置响应式侦听,就是后面的childOb
defineReative(value, k);
}
}
}
import observe from './oberve.js'
function defineReavtive(data, key, val) {
//给传入的值设置可监听并且给变化后的值设置可监听的函数
if (arguments.length == 2) {
val = data[key]; //外部不用传第三个参数,当data为一个对象的时候，此时val为data的child内容，对它再进行观察
}
//子元素要进行observer ，至此形成了递归，这个递归不是函数自己调用自己而是多个函数递归
//这个val是可监听的,子元素进行observe， 三个文件互相调用形成递归
let childOb = observe(val);
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: true, //可被配置，
get() {
console.log('调用get方法')
return val;
},
set(newValue) {
if (val == newValue) {
return;
}
val = newValue;
//当设置了新值，新值也要被observe,防止新值也是一个对象，如果新值是对象肯定要继续侦听
childOb = observe(newValue);
}
})
}
observe.js ⇒ Observer.js ==> defineReative.js == > observer.js
形成递归，使obj对象的每一层都是响应式
数组的响应式处理
const methodsNeedChange = ['push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
];
这7个方法是在Array.prototype上的
既想保留原方法又想拓展方法(触发响应式)
这时候需要将原方法进行备份,在新函数中调用原来的方法干一些事。
Observer.js
import {def} from './test-uteil.js'
import definReative from './test-defineReative.js';
import { arrayMehtods } from './test-array.js'
//这才是主
export default class Observer {
constructor(value) {
//this 是实例本身，
//添加了__ob__属性，值是实例
def(value, __ob__, this, false);
//这个类的目的是将一个正常的obj转换成每个层级的属性都是响应式的obj
if (Array.isArray(value)) {
//如果是数组，要非常强行的将数组的原型指向arrayMehtods
Object.setPrototypeOf(value, arrayMehtods);
//让这个数组变得observe
this.observArray(value);
} else {
this.walk(value)
}
}
// 遍历
walk(value) {
//遍历value对象的每一个key，把每一个key都设置成definReative
for (let k in value) {
//拿出遍历后的子节点，并将子节点进行设置响应式侦听
definReative(value, k);
}
}
//数组得特殊遍历
observArray(arr) {
for (let i = 0, l = arr.length; i < l; i++) {
//逐项进行observe
observe(arr[i]);
}
}
}
array.js
import {def} from "./test-uteil.js"
// [
// 'push',
// 'pop',
// 'shift',
// 'unshift',
// 'splice',
// 'sort',
// 'reverse'
// ]
// 方法改写在Array.prototype上
//先得到Array.prototype
const arrayPrototype = Array.prototype;
// 以Array.prototype为原型创建arrayMethods对象并暴露
export const arrayMehtods = Object.create(arrayPrototype)
//要被改写的7个数组方法
const methodsNeedChange = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsNeedChange.forEach(methodName => {
//备份原来的方法
const original = arrayPrototype[methodName];
//定义新的方法
def(arrayMehtods, methodName, function() {
//把数组身上得__ob__取出来，__ob__已经被添加了，
//因为数组肯定不是最高层， 比如obj.g是数组，obj不能是数组，一定是对象，
//第一次遍历obj这个对象得时候就已经给这个g属性添加了__ob__属性
const ob = this.__ob__;
//arguments是类数组对象，所以要使用slice，就要把类数组对象转换成数组
const args = [...arguments];
//有三种方法push\unshift\splice能够插入新项，现在要把插入得新项也要变为observe得
let inserted = [];
switch(methodName) {
case 'push':
case 'unshift':
inserted = args;
break;
case 'splice':
inserted = args.slice(2);
break;
}
//判断有没有要插入得新项
if (inserted) {
//如果有就侦听
ob.observeArray(inserted)
}
//恢复原来得功能
//这里使用apply是因为如果直接调用函数，那么函数的上下文是window,
//但是这里我们想要的函数上下文应该是调用方法的数组
//所以用apply，这里的this取决与function的this，也就是调用方法的数组 obj.m
// obj.m.push(7,8,8)
//这里的arguments是调用方法是传入的参数也就是上面的 7,8,8
const result = original.apply(this, arguments);
return result;
}, false)
})
vue种直接改某一项不会触发响应，因为不是7个方法种得一种，只有调用7个方法或者直接更改数组才会触发响应
错误调用: obl.g[3] =23;
依赖收集
依赖收集，watcher究竟有什么作用呢？
vue中的v-指令，diff更新，虚拟dom等都会使用watcher监听，从而更新视图
在getter中收集依赖，在setter中触发依赖
Dep类管理依赖，每个Observer的实例都会有一个Dep的实例
Watcher是一个中介，数据发生变化时，通过Watcher中转通知组件。
Wacher实例化在每一个需要用到的部分，Dep实例化在Observer.js中。
watcher
import Dep from "./Dep";
var uid = 0;
export default class Watcher {
constructor(target, expression, callback) {
console.log('我是Watcher类的构造器');
this.id = uid++;
this.target = target;
this.getter = parsePath(expression);
this.callback = callback;
this.value = this.get();
}
update() {
this.run();
}
get() {
// 进入依赖收集阶段。让全局的Dep.target设置为Watcher本身，那么就是进入依赖收集阶段
Dep.target = this;
const obj = this.target;
var value;
// 只要能找，就一直找
try {
value = this.getter(obj);
} finally {
Dep.target = null;
}
return value;
}
run() {
this.getAndInvoke(this.callback);
}
getAndInvoke(cb) {
const value = this.get();
if (value !== this.value || typeof value == 'object') {
const oldValue = this.value;
this.value = value;
cb.call(this.target, value, oldValue);
}
}
};
function parsePath(str) {
var segments = str.split('.');
return (obj) => {
for (let i = 0; i < segments.length; i++) {
if (!obj) return;
obj = obj[segments[i]]
}
return obj;
};
}
Dep
var uid = 0;
export default class Dep {
constructor() {
console.log('我是DEP类的构造器');
this.id = uid++;
// 用数组存储自己的订阅者。subs是英语subscribes订阅者的意思。
// 这个数组里面放的是Watcher的实例
this.subs = [];
}
// 添加订阅
addSub(sub) {
this.subs.push(sub);
}
// 添加依赖
depend() {
// Dep.target就是一个我们自己指定的全局的位置，你用window.target也行，只要是全剧唯一，没有歧义就行
if (Dep.target) {
this.addSub(Dep.target);
}
}
// 通知更新
notify() {
console.log('我是notify');
// 浅克隆一份
const subs = this.subs.slice();
// 遍历
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
};
defineRreactive
get() {
console.log('你试图访问' + key + '属性');
// 如果现在处于依赖收集阶段
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
}
}
return val;
},
// setter
set(newValue) {
console.log('你试图改变' + key + '属性', newValue);
if (val === newValue) {
return;
}
val = newValue;
// 当设置了新值，这个新值也要被observe
childOb = observe(newValue);
// 发布订阅模式，通知dep
dep.notify();
}
扫一扫
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
