Vue 中数据的代理

佥望三十

于 2021-04-23 18:35:34 发布

阅读量306

点赞数

分类专栏： JS笔记文章标签： vue.js javascript es6

本文链接：https://blog.youkuaiyun.com/weixin_46760658/article/details/116066430

版权

JS笔记专栏收录该内容

8 篇文章

订阅专栏

本文探讨了Vue框架中数据代理的概念，从vue2的基础出发，介绍了在vue3中如何利用ES6的Proxy实现相同的数据响应式效果。尽管作者未深入研究vue3的源码，但仍尝试通过Proxy来模拟vue2的数据绑定。文章欢迎读者指出可能存在的错误和不足。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2

let obj = {
	userNmae: '小红',
	pass: '1234'
}

let hijack = {}

for (let i in obj) {
	Object.defineProperty(hijack, i, {
		get() {
			return obj[i]
		}

		set(newValue){
			obj[i] = newValue
		}
	})
}

hijack.userName = '小蓝'
console.log(hijack.userName, hijack.pass) // 小蓝, 1234

vue3

作者知道 vue3 是 Proxy 实现的，虽然并没有看过源码，但用 es6 中的 Proxy 实现上述 vue2 中的效果，还是可以的。

let proxy = new Proxy(obj, {
	// target: 目标对象, propKey: 键名, receiver: proxy实例本身（可选）
	get(target, propKey, receiver){
		return target[propKey]
	},
	
	// value: 要赋的值
	set(target, propKey, value, receiver){
		target[propKey] = value
	}
})

proxy.userName = '小绿'
console.log(proxy.userName, proxy.pass) // 小绿， 1234