vue3双向绑定的原理

最新推荐文章于 2024-05-02 18:12:22 发布

hcoke

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/126857571

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

利用 proxy+reflect

proxy：用于修改某些操作的默认行为，等同于在语言层面做出修改。相当于在目标前假设一个拦截层，外层对该对象的访问都必须经过这层拦截。

reflect：es6为操作对象而提供的新的api。

目的有：

1.将Object对象的一些明显属于语言内部的方法，放到Reflect对象上。如Object.defineProperty

2.修改某些Object方法的返回结果，让其变得更合理。比如利用Object.defineProperty给基本数据类型添加一个属性，就无法对属性进行定义，这时会抛出一个错误。而Reflect.defineProperty（obj,name,desc）会返回false。

3.将让Object操作都变成函数行为。

Reflect.has(obj,name)

Reflect.deleteProperty(obj,name)

4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<h1></h1>
		<script>
			var h1 = document.querySelector('h1')
			var ipt = document.querySelector('input')
			let obj = {}
			var proxy = new Proxy(obj,{
				get:function(target,key,receiver) {
					return Reflect.get(target,key,receiver)
				},
				set:function(target,key,value,receiver) {
					//监听proxy是否有新的变化
					if(key == 'text') {
						h1.innerText = value
					}
					//将变化反射会原有对象
					return Reflect.set(target,key,value,receiver)
				}
			})
			ipt.addEventListener('input',function(){
				proxy.text = ipt.value
			})
		</script>
	</body>
</html>

hcoke

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3双向绑定的原理

2.修改某些Object方法的返回结果，让其变得更合理。比如利用Object.defineProperty给基本数据类型添加一个属性，就无法对属性进行定义，这时会抛出一个错误。4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。1.将Object对象的一些明显属于语言内部的方法，放到Reflect对象上。proxy：用于修改某些操作的默认行为，等同于在语言层面做出修改。reflect：es6为操作对象而提供的新的api。
复制链接

扫一扫