proxy 基础-实现响应性和双向数据绑定

proxy 基础用法

Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象。可以理解为‘代理’；使用proxy，就可以不再操作源数据而实现效果；

语法：

new Proxy(target,handle)

target：监听的目标对象或者方法
handle： 参数也是一个对象，用来定制拦截行为，即需要对源对象操作对操作

一个完整基础写法：

const target={name:'王麻子'};
	const handle={
		get:function(target,key,receiver){
			console.log(`获取到属性${key}`);
			console.log(`获取到值${target[key]}`);
			return Reflect.get(...arguments)
		},
		set:function(target,key,vue,receiver){
			console.log(`设置的值${vue}`);
			return Reflect.set(...arguments)
		}
	};
	let person =new Proxy(target,handle);
    person.name  // 执行 get 方法=>获取到属性name 获取到值王麻子
	person.test='testName';  // 执行 set 方法 =>设置的值testName

Reflect 对象的方法与 Proxy 对象的方法一一对应，只要 Proxy 对象上有的方法在 Reflect 上也能找到,同时优化this的问题，指向源对象

响应性

响应性好像经常听说，但是这个是什么意思呢？
是一种动作自发性的执行，并回报结果的处理方式，程序中经常用到，在js 中defineProperty，和proxy可以方便的实现

无响应性代码

	let num1=1,num2=2;
	
	let all= num1 + num2

    console.log(all) // 3

	num1 = 2;
	
	console.log(all); // 3
	

更新第一个数据，显然all 没有改变？
那么如何实现响应更新呢？

• 监听值的变化
• 处理值的变化
• 触发最新相关的值

数据的双向绑定实例

通过上面的三步，实现修改一个数据实现响应两个数相加，修改一个参数，自动相加

    const target={num1:1};
	let num2 =2;
	const handle={
		get:function(target,key,receiver){
			 return Reflect.get(...arguments)
		},
		set:function(target,key,value,receiver){
		// 拦截到设置到值
		// 触发计算
			sum(value)
			return Reflect.set(...arguments)
		}
	};
	// 更新值
	function sum(value){
			let all= value + num2
			console.log(all);
	}
	let person =new Proxy(target,handle);
	
		person.num1=1; // all 3

		person.num1 =4 // all 6

更改 person.num1到值动态计算，同样到方法可以实现简易双向绑定，替换成html 标签即可，还有很多有权到场景，慢慢探索