直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。(应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。)
对象类型:通过Object.defineProperty()对属性的读取,修改进行拦截(数据劫持)。通过里面的getter和setter方法,进行查看和数据的修改,通过发布、订阅者模式进行数据与视图的响应式。
数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
Object.defineProperty(obj, prop, descriptor), 它接收三个参数
数据变了,视图就要更新。
let oldArrayPrototype = Array.prototype;
let proto = Object.create(oldArrayPrototype);
// 如果要监听的对象是一个数组,我们又该怎么办呢。
//因为我们明确直到Object.defineProperty()的target只能是对象,如果是数组,
//好像Object.defineProperty()无法实现,那我们应该怎么办。
//而在vue2中,当我们改变数组时,视图也会变化,说明我们也要实现数组的响应式。
//这里我们需要换一个思路,我们去重写一下数组原型上的方法,我们把和数组有关的所有api,
//比如push、pop、shift、reserve ...全部重写一遍。
//当我们在执行这些操作的时候,同时把视图更新的操作也完成。这样就可以了。
//这里你可能会问,我们可以去修改数组的源码吗。诶,当然可以。实际上vue2也就是这么操作的。
['push', 'shift', 'unshift'].forEach(method => {
// 函数劫持,重写函数
proto[method] = function () {
updateView()
oldArrayPrototype[method].call(this, ...arguments)
}
})
// 重写数组方法 push shift unshift pop reserve ...
function defineReactive(target, key, value) {
if (typeof value == 'object' && value !== null) {
observer(value)
}
// get()就是简单的取值,直接把这个属性对应的值返回就好了,
//set()就是当我们要修改值得时候,它接收一个参数就是我们修改的新值newValue,将要执行的逻辑,
//我们的目的就是要在修改值得时候将视图更新,于是在这里直接调用updataView()这个函数就好了,
//然后我们把新值赋值上去。这里做了一个小小的优化就是,如果新值刚好等于老值,
//我们就不需要去更新视图。于是最简陋的vue2响应式原理就实现了。
Object.defineProperty(target, key, {
get() {
return value
},
//如果我们要劫持的对象内部嵌套对象,当我们改变hobbies内部的属性的时候,
//视图依然不会更新,这里只能用到递归来解决。
set(newValue) {
if (newValue !== value) {
updateView()
value = newValue
}
}
})
}
// 首先,我们需要有一个观察者,在vue2源码中也有这个,它的目的是用于判断,
//我们要定义或修改的target是不是一个对象。
//如果是对象,我们用Object.defineProperty()对它进行数据劫持。如果不是我们就直接返回target.
function observer(target) { // 观察者
if (typeof target !== 'object' || target == null) {
return target
}
if (Array.isArray(target)) {
// Object.setPrototypeOf(target, proto)
target.__proto__ = proto
}
for (let key in target) {
// defineReactive(target, key, target[key]) ,
//这个方法就是来调用Object.defineProperty的。
//target是我们要定义或修改的对象,key是要修改或定义的属性,target[key]就是这个属性的值。
defineReactive(target, key, target[key])
}
}
function updateView() {
console.log('更新视图');
}
let data = {
name: '老王',
hobbies: {
a: '喝酒',
b: '抽烟'
},
job: ['driver', 'coder', 'cooker']
}
observer(data)
// console.log(dat)
console.log(data.hobbies.a);
data.hobbies.a = '烫头'
console.log(data.hobbies.a);
console.log(data.job)
data.job.push('teacher')
console.log(data.job)
通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的增加,属性的删除等。
通过Reffect(反射): 对源对象的属性进行操作
new Proxy(data,{
//拦截读取属性值
get(target, prop){
return Reflect.get(target, prop)
},
//拦截设置属性值或添加新属性
set(target, prop, value){
return Reflect.set(target, prop, value)
},
//拦截删除属性
deleteProperty(target, prop){
return Reflect.deleteProperty(target, prop)
}
})
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)
基本用法
Proxy 接收两个参数,target, handler
要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
这里先提一下WeakMap,WeakSet:
1.传统的Object只能以字符串作为键名,这具有非常大的限制
2.于是有了map数据结构,它可以用任意数据类型作为键名,有get和set方法,用于取值和添加键值对
3.WeakMap结构与Map结构类似,也是用于生成键值对的集合。WeakMap与Map的区别有两点。首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。 WeakMap 与 Map 在 API 上的区别主要是两个,一是没有遍历操作(即没有keys()、values()和entries()方法),也没有size属性。
4.Set是ES6 提供的新的数据结构 。它类似于数组,但是成员的值都是唯一的,没有重复的值。有add和delete方法,用于添加和删除。还有size属性,用于获取长度
5.WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。首先,WeakSet 的成员只能是对象,而不能是其他类型的值。其次,WeakSet 中的对象都是弱引用。
WeakMap,WeakSet都是弱引用(具体是WeakMap中的key是弱引用)。
解释: 一般我们将数据存在堆当中,需要我么手动去把这些数据清除这些数据的引用。将它们设置为null,很容易造成内存泄漏。然而如果我们使用WeakMap或者WeakSet,WeakMap中的键和WeakSet一旦没有其他对象的引用时,他会消失,也就是会自动被垃圾回收自动回收。
目标在vue3中,原始类型响应式数据由ref()实现,引用类型响应式数据由reactive()实现。这里我们就来简单实现一下reactive()的原理,来创造一个响应式的对象。
reactive(target): reactive(target)接受一个对象,也可以是函数和数组
function reactive(target) {
// 创建响应式对象
return createReactiveObject(target)
}
它返回一个createReactiveObject(target)方法的执行,createReactiveObject(target)来实现一个响应式对象。
function isObject(val) {
return typeof val === 'object' && val !== 'null'
}
function createReactiveObject(target) { // 创建代理后的响应式对象
if (!isObject(target)) { // 如果不是对象,直接返回
return target
}
let baseHandler = {
get(target,key,receiver) { //receiver:被代理后的对象
console.log('获取');
let result = Reflect.get(target,key,receiver)
return result
},
set(target,key,value,receiver) {
console.log('设置');
let res = Reflect.set(target,key,value,receiver)
return res
},
deleteProperty(target,key) {
console.log('删除');
let res = Reflect.deleteProperty(target,key)
return res
}
}
//proxy接收两个参数,
//第一个是一个对象,用isObject()判断一下就行。
//如果是就对它进行代理,如果不是就直接返回。
//第二个参数是一个对象,用来定义一些代理方法
//然后将我们的目标对象和定义的baseHandler对象作为参数传入一个定义的Proxy实例中,并返回这个被代理后的对象。
//这就是我们创建的响应式对象。这也就是一个简单的reactive()的实现。
let observed = new Proxy(target, baseHandler)
return observed
}
set(target,key,value,receiver),set接受四个参数,依次为目标对象、属性名、属性值和 Proxy代理后的对象,其中最后一个参数可选。当我们使用set时,会把这些参数传进来,就是把这个键对应的值设置到proxy代理后的对象中。也就是说,我们应该receiver.set(target,key,value,receiver)。然而这样会报错,因为不能在proxy内部再调用proxy,上面这样相当于new proxy.set(),会报错。于是我们使用Reflect.set().
Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有:
(1) 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上
(2) 修改某些Object方法的返回结果,让其变得更合理。
(3) 让Object操作都变成函数行为。
(4)Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。
1.当取值的时候,如果我们代理的对象,内部还有对象,这个时候我们需要使用递归来多层代理
解决:
get(target,key,receiver) { //receiver:被代理后的对象
console.log('获取');
//取值的时候判断,是否是一个对象,如果是就再此代理,
//不是就直接返回。
//我们取值是一层一层往下取,如果有嵌套的话,会执行多次get操作。
let result = Reflect.get(target,key,receiver)
return isObject(result) ? reactive(result) : result
//递归多层代理,相比于vue2的优势是,vue2默认递归,
//而vue3中,只要不使用就不会递归。
},
2.当设置的时候,如果老值等于新值,那么就不需要去设置;如果设置的时候源target对象不具备这个属性,我么需要把这个属性内置到我们代理后的对象中。
解决:
set(target,key,value,receiver) {
//老值等于新值,我们就没有去执行视图更新的操作,直接进行了set操作,如果不相等,才去做修改
// console.log('设置');
let hadkey = target.hasOwnProperty(key)
let oldValue = target[key]
if(!hadkey) {
console.log('新增');
} else if (oldValue !== value) {
console.log('修改');
}
//如果对象target内部,压根就没有这个属性,我们去设置这个属性的时候,也让它支持这样的操作,去更新视图。
let res = Reflect.set(target,key,value,receiver)
return res
},
3.如果一个对象已经被代理过一次了,那么我们就不再需要去重复代理
let toProxy = new WeakMap() // 原对象:代理过的对象
let toRaw = new WeakSet() // 代理过的对象:原对象
WeakSet的特性,当一个对象被代理后,如果再此代理,它不会让重复的对象去到WeakSet中,就不会让它再次被代理。用Set也行,不过利用WeakSet会被垃圾回收机制自动回收的特性,性能会更好。我们在代理之前,去判断WeakMap是否存在我们代理的对象,如果存在,就直接返回,不再执行代理。
// vue3响应式原理
// 2.0需要递归,数据改变length属性是无效的,对象不存在的属性是不能被拦截的
let toProxy = new WeakMap() // 原对象:代理过的对象
let toRaw = new WeakSet() // 代理过的对象:原对象
function isObject(val) {
return typeof val === 'object' && val !== 'null'
}
function reactive(target) {
// 创建响应式对象
return createReactiveObject(target)
}
function createReactiveObject(target) { // 创建代理后的响应式对象
if (!isObject(target)) { // 如果不是对象,直接返回
return target
}
let proxy = toProxy.get(target) // 如果对象已经被代理过了,直接返回
if(proxy) {
return proxy
}
let baseHandler = {
get(target,key,receiver) { //receiver:被代理后的对象
console.log('获取');
// receiver.get() ==》 new proxy().get 这会报错,
//也就意味着我们不能直接取到被代理对象上的属性
// 这时候我们需要用到Reflect,这其实也是一个对象,
//它只不过也含有一些明显属于对象上的方法,且和proxy上的方法一一对应
//取值的时候判断,是否是一个对象,如果是就再此代理,
//不是就直接返回。
//我们取值是一层一层往下取,如果有嵌套的话,会执行多次get操作。
let result = Reflect.get(target,key,receiver)
return isObject(result) ? reactive(result) : result
//递归多层代理,相比于vue2的优势是,vue2默认递归,
//而vue3中,只要不使用就不会递归。
},
set(target,key,value,receiver) {
// console.log('设置');
let hadkey = target.hasOwnProperty(key)
let oldValue = target[key]
if(!hadkey) {
console.log('新增');
} else if (oldValue !== value) {
console.log('修改');
}
let res = Reflect.set(target,key,value,receiver)
return res
},
deleteProperty(target,key) {
console.log('删除');
let res = Reflect.deleteProperty(target,key)
return res
}
}
let observed = new Proxy(target, baseHandler)
toProxy.set(target, observed)
toRaw.add(observed,target)
return observed
}
let proxy = reactive({'name': 'wn'})
proxy.sex = 'boy'
console.log(proxy.sex);
// proxy.name
// proxy.name = 'kite'
// delete proxy.name
// proxy.age
// proxy.name = 'kite'
// console.log(proxy.name);
// let proxy = reactive([1,2,3])
// proxy.push(4)
// proxy.length = 5
// console.log(proxy);
// 如果一个对象被代理后了,那么就不再需要再被代理
vue3可以把不存在的属性添加到对象中,并且会被proxy的get拦截到,它把不存在的属性,赋值到代理后的对象中,值为undefined.而vue2不会,虽然Object.defineProperty也有这个功能。vue2是把所有已经存在的属性进行了一次遍历和递归。再去拦截。而vue3使用的Proxy,不会把所有的属性进行一次遍历,他只是在需要使用到某个属性的时候才去代理。当然它也需要用到递归。但是vue2,vue3的递归是不一样的,vue2,需要把对象的所有属性,进行递归,vue3是一种按需递归。
vue2对数组的操作需要重写数组的方法进行重写,而vue3则可以轻松实现。