vue2 与 vue3 的响应式实现

在我印象中, vue2 使用的是defineProperty, vue3 使用的是一个proxy. 翻了文档才发现我错了.

vue2

众所周知, vue2 基本上都是选项式 API, 需要的响应式数据都写在 data 函数里, 这个函数返回一个对象. 因此只需要让这个对象具有响应式就可以了. 同时需要注意让data里的对象和数组都要有响应式.

function makeReactive(obj) {
	if (typeof obj !== 'object' || obj === null) {
		// 不是对象就抛错
		throw new Error('need an object');
	}

	Object.keys(obj).forEach((key) => {
		let originValue = obj[key];
		if (typeof originValue === 'object' && originValue !== null) {
			obj[key] = makeReactive(originValue);
		}
		Object.defineProperty(obj, key, {
			get() {
				console.log(`Getting ${key}: ${originValue}`);
				return originValue;
			},
			set(newValue) {
				console.log(`Setting ${key} to ${newValue}`);
				console.log(typeof newValue === 'object' && newValue !== null);
				if (typeof newValue === 'object' && newValue !== null) {
					obj[key] = makeReactive(newValue);
				} else {
					originValue = newValue;
				}
			},
		});
	});
}

这样其实会有一些问题. 很难追踪到data里某个对象增加了一个key-value, 也很难追踪某个数组的push, pop等. 这是因为在响应式化的时候是通过遍历所有属性赋予响应式导致的, 之前没出现过的属性当然就跟踪不了.

同时也会产生一个效率问题, 那就是大数组的时候. 假如有100w的数组, 那么我就需要遍历100w次, 这太恐怖了. 对此有一个解决方案, 使用冻结对象, 这样vue2就不会尝试响应式化了. 或者明明以_开头.

vue3

众所周知, vue3提供了ref和reactive两种. 它们还是有点区别的.

reactive用于对象(当然也包括数组), 它使用的是proxy.

function reactive(obj) {
    if(typeof obj !== 'object' || obj === null) {
        throw new Error('need an object')
    }
    return new Proxy(obj, {
        get(target, key) {
            // 收集依赖
            return target[key]
        },
        set(target, key, value) {
            // 触发事件
            target[key] = value
            return true
        }
    })
}

这里只是简单实现, 实际可能更复杂. 简单对比一下就可以发现:

不需要遍历, 性能更好
即使之前没有出现过的属性也有响应式

这里其实还有一点优化, 就是访问子对象时才会创建一个proxy而不是立刻递归地创建.

ref主要用在普通的值, 比如数字, 字符串等. 像这种主要对值访问而不是某一个key-value访问的属性用proxy就不太方便了.

class RefImf {
    _value
    constructor(value) {
        this._value = value
    }
    get value() {
        // 收集依赖
        return value
    }
    set value(value) {
        // 触发事件
        this._value = value
    }   
}
function ref(value) {
    return new RefImf(value)
}

简单使用getter/setter拦截器就可以实现值的响应式了.

平时我们给ref传一个object时, 用的就不是这个getter/setter了, 而是使用proxy, vue3会帮我们处理好.

ref和reactive的区别

区别在于使用ref的话之后需要.value才能获取值, 使用reactive可以不需要.value.

同时ref允许传递任意值, reactive只允许传递对象.

后言

怎么说呢, 有点想自己写一遍vue, 我感觉我很难再有所突破了, 如果每天只是写写小页面. 使用echarts, canvas, three.js也会给我带来提升, 不过怎么说呢, 我个人不太喜欢这些东西, 我也没有设计审美, 不知道用这些东西做什么.

我大概会开一个仓库复现vue的一些东西吧, 不知道能坚持到什么时候.

vue2 与 vue3 的响应式实现 ​

vue2 ​

vue3 ​

ref和reactive的区别 ​

后言 ​

vue2 与 vue3 的响应式实现

vue2

vue3

ref和reactive的区别

后言