一、Object.defineProperty

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

为什么能实现响应式

通过defineProperty 两个属性，get及set

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

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

下面通过代码展示：

定义一个响应式函数defineReactive

1function update() {
2    app.innerText = obj.foo
3}
4
5function defineReactive(obj, key, val) {
6    Object.defineProperty(obj, key, {
7        get() {
8            console.log(`get ${key}:${val}`);
9            return val
10        },
11        set(newVal) {
12            if (newVal !== val) {
13                val = newVal
14                update()
15            }
16        }
17    })
18}

调用defineReactive，数据发生变化触发update方法，实现数据响应式

1const obj = {}
2defineReactive(obj, 'foo', '')
3setTimeout(()=>{
4    obj.foo = new Date().toLocaleTimeString()
5},1000)

在对象存在多个key情况下，需要进行遍历

1function observe(obj) {
2    if (typeof obj !== 'object' || obj == null) {
3        return
4    }
5    Object.keys(obj).forEach(key => {
6        defineReactive(obj, key, obj[key])
7    })
8}

如果存在嵌套对象的情况，还需要在defineReactive中进行递归

1function defineReactive(obj, key, val) {
2    observe(val)
3    Object.defineProperty(obj, key, {
4        get() {
5            console.log(`get ${key}:${val}`);
6            return val
7        },
8        set(newVal) {
9            if (newVal !== val) {
10                val = newVal
11                update()
12            }
13        }
14    })
15}

当给key赋值为对象的时候，还需要在set属性中进行递归

1set(newVal) {
2    if (newVal !== val) {
3        observe(newVal) // 新值是对象的情况
4        notifyUpdate()
5    }
6}

上述例子能够实现对一个对象的基本响应式，但仍然存在诸多问题

现在对一个对象进行删除与添加属性操作，无法劫持到

1const obj = {
2    foo: "foo",
3    bar: "bar"
4}
5observe(obj)
6delete obj.foo // no ok
7obj.jar = 'xxx' // no ok

当我们对一个数组进行监听的时候，并不那么好使了

1const arrData = [1,2,3,4,5];
2arrData.forEach((val,index)=>{
3    defineProperty(arrData,index,val)
4})
5arrData.push() // no ok
6arrData.pop()  // no ok
7arrDate[0] = 99 // ok

可以看到数据的api无法劫持到，从而无法实现数据响应式，

所以在Vue2中，增加了set、delete API，并且对数组api方法进行一个重写

还有一个问题则是，如果存在深层的嵌套对象关系，需要深层的进行监听，造成了性能的极大问题

小结

检测不到对象属性的添加和删除
数组API方法无法监听到
需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题

二、proxy

Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性了

在ES6系列中，我们详细讲解过Proxy的使用，就不再述说了

下面通过代码进行展示：

定义一个响应式方法reactive

1 function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10           return res
11        },
12        set(target, key, value, receiver) {
13            const res = Reflect.set(target, key, value, receiver)
14            console.log(`设置${key}:${value}`)
15            return res
16        },
17        deleteProperty(target, key) {
18            const res = Reflect.deleteProperty(target, key)
19            console.log(`删除${key}:${res}`)
20            return res
21        }
22    })
23    return observed
24}

测试一下简单数据的操作，发现都能劫持

1const state = reactive({
2    foo: 'foo'
3})
4// 1.获取
5state.foo // ok
6// 2.设置已存在属性
7state.foo = 'fooooooo' // ok
8// 3.设置不存在属性
9state.dong = 'dong' // ok
10// 4.删除属性
11delete state.dong // ok

再测试嵌套对象情况，这时候发现就不那么 OK 了

1 const state = reactive({
2    bar: { a: 1 }
3})
4
5// 设置嵌套对象属性
6 state.bar.a = 10 // no ok

如果要解决，需要在get之上再进行一层代理

1function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10           return isObject(res) ? reactive(res) : res
11        },
12    return observed
13}

三、总结

Object.defineProperty只能遍历对象属性进行劫持

1function observe(obj) {
2    if (typeof obj !== 'object' || obj == null) {
3        return
4    }
5    Object.keys(obj).forEach(key => {
6        defineReactive(obj, key, obj[key])
7    })
8}

Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的

1function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10            return res
11        },
12        set(target, key, value, receiver) {
13            const res = Reflect.set(target, key, value, receiver)
14            console.log(`设置${key}:${value}`)
15            return res
16        },
17        deleteProperty(target, key) {
18            const res = Reflect.deleteProperty(target, key)
19            console.log(`删除${key}:${res}`)
20            return res
21        }
22    })
23    return observed
24}

Proxy可以直接监听数组的变化（push、shift、splice）

1
2
3

1const obj = [1,2,3]
2const proxtObj = reactive(obj)
3obj.psuh(4) // ok

Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的

正因为defineProperty自身的缺陷，导致Vue2在实现响应式过程需要实现其他的方法辅助（如重写数组方法、增加额外set、delete方法）

1// 数组重写
2const originalProto = Array.prototype
3const arrayProto = Object.create(originalProto)
4['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
5  arrayProto[method] = function () {
6    originalProto[method].apply(this.arguments)
7    dep.notice()
8  }
9});
10
11// set、delete
12Vue.set(obj,'bar','newbar')
13Vue.delete(obj),'bar')

Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9

使用场景

拦截和监视外部对对象的访问
降低函数或类的复杂度

在复杂操作前对操作进行校验或对所需资源进行管理

保障数据类型的准确性

let numericDataStore={count:0,amount:1234,total:14}
numericDataStore=new Proxy(numericDataStore,{
    set(target,key,value,proxy){
        if(typeof value!='number'){
            throw Error("属性只能是Number类型")
        }
        return Reflect.set(target,key,value,proxy)
    }
});
numericDataStore.count="foo"
numericDataStore.count=33;

实现观察者模式

//观察者模式，观察者函数都放在Set集合，当修改obj的值，会在set函数中拦截，自动执行Set所有的观察者
const queueObservers=new Set();
const observe=fn=>queueObservers.add(fn)//将观察者函数加入队列
const observable=obj=>new Proxy(obj,{set});//返回一个原始对象的Proxy代理，拦截赋值操作，触发充当观察者的每个函数
function set(target,key,value,receiver){
    const res=Reflect.set(target,key,value,receiver);
    queueObservers.forEach(observer=>observer());//触发充当观察者的每个函数
    return res;
}

声明一个私有的apiKey,便于api这个对象内部的方法调用，但不希望外部也能够访问api._apiKey

let api={
    _apiKey:'123456def'
}
const RESTRICTED=['_apiKey']
api=new Proxy(api,{
    get(target,key,proxy){
        if(RESTRICTED.indexOf(key)>-1){
            throw Error(`${key}不可访问`)
        }
        return Reflect.get(target,key,proxy)
    },
    set(target,key,value,proxy){
        if(RESTRICTED.indexOf(key)>-1){
            throw Error(`${key}不可修改`)
        }
        return Reflect.set(target,key,value,proxy)
    }
})
console.log(api._apiKey);
api._apiKey='12345';//上述都抛出错误

小柒

Object.defineProperty和Proxy区别

一、Object.defineProperty

为什么能实现响应式

小结

二、proxy

三、总结

使用场景