Vue3源码解读

一、vue响应式原理

实现原理	defineProperty	Proxy	value setter
实际场景	vue2 响应式	vue3 reactive	vue3 ref
优势	兼容性	基于Proxy实现真正的拦截	实现简单
劣势	数组和属性删除等拦截不了	兼容不了IE11	只拦截value属性
实际应用	vue2	vue3 复杂数据	vue3 简单数据

二、reactive和ref

Vue 3 的 reactive 函数可以把一个对象变成响应式数据，而 reactive 就是基于 Proxy 实现的。

但是在 Vue 3 中还有另一个响应式实现的逻辑，就是利用对象的 get 和 set 函数来进行监听，这种响应式的实现方式，只能拦截某一个属性的修改，这也是 Vue 3 中 ref 这个 API 的实现。

三、vue3和vue2响应式原理的区别

vue2响应式原理

let data = {
    msg: 'hello'
}

let vm = {}

proxyData(data)

function proxyData(data) {
    Object.keys(data).forEach(key => {
        Object.defineProperty(vm, key, {
            enumerable: true,
            configurable: true,
            get() {
                return data[key]
            },
            set(newValue) {
                if(newValue === data[key]) {
                    return
                }
                data[key] = newValue
                document.querySelector('#app').textContent = data[key]
            }
        })
    }
}

vue3响应式原理

let data = {
    msg: 'hello'
}

let vm = new Proxy(data, {
    get(target, key) {
        return target[key]
    },
    set(target, key, newValue) {
        if(target[key] === newValue) {
            return
        }
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
    }
})