Vue3.0响应式原理(Reactive)简单版实现

Vue3.0响应式原理(Reactive)简单版实现

下班回家，抽空写了这篇一直想写的关于vue3的reactive的文章，我们都知道在vue2中对于数据的响应式是通过Object.defineProperty来实现的，但是这个方法对于数组是无法监听的，而且对于复杂结构的对象，需要深层次的遍历对象的属性来进行监听，十分耗费性能。相比之下proxy拥有更强大的功能。

下面我简单介绍一下proxy属性的优势

Proxy可以直接监听对象而非属性
Proxy可以直接监听数组的变化
Proxy有13中拦截方法，功能更强大。

proxy的用法如下：

let p = new Proxy(target,handler)

let p = new Proxy(target,{
	set(){
	// 设置proxyP对象属性时的自定义逻辑	
	},
	get(){
	// 获取proxyP对象属性时的自定义逻辑
	}	
})

接下来是reactive的mini版实现

const toProxy = new WeakMap() //防止同一个对象被多次proxy
const toRaw = new WeakMap()// 防止一个已经被proxy的对象再次被proxy
function reactive(target) {
    let observed = toProxy.get(target)
    if (observed) {
        return observed
    }

    if (toRaw.has(target)) {
        return target
    }

    observed = new Proxy(target, handler)
    toProxy.set(target, observed)
    toRaw.set(observed, target)
    return observed
}

const handler = {
    set: function (target, key, value) {
        console.log('我被set了');
        trigger(target,key);//属性被设置时触发effect中的方法
        return Reflect.set(target, key, value)
    },

    get: function (target, key) {
        console.log('我被get了');
        track(target,key);//属性被读取时关联effect中的方法
        return Reflect.get(target, key)
    }
}

在上面的代码段中我们看到了在set和get中分别还调用了track和trigger这两个方法.这两个方法的具体实现我会在下一篇博客中写到。