Vue的底层实现双向绑定的原理

Vue的双向数据绑定的底层原理其实是利用原生Js中的Object.defineProperty(对象，“属性名称”,对象) 来通过数据劫持结合发布者-订阅者模式的方式来实现的

 var data = {};
		 
		var temp = {};  //第三方变量 
		
		Object.defineProperty(data,"a",{
			 // value:"abc",
			 // configurable:false  这个属性是决定a的值能否被删除 默认为false
			 // enumerable:false     这个属性是决定a的值能否被遍历
			 // writable:false       这个属性决定a的值能否被 读写改变
			 get(){  //访问a时候触发
				 return temp.a;
			 },
			 //当设置a属性的时候会触发
			 set(value){  //set方法接收input传过来的值并且给temp 
				 temp.a = value;  
			    input.value = value;
			 }
		})
		 
		 input.addEventListener("click",function(){
			data.a = this.value;     
		 })

上面中通过输入框的数据然后赋值给 data.对象中的a属性，因为data通过事件劫持可以知道中间有两个方法 get 和set 一个是 当我们访问data中的a时候触发操作，一个是set 当我们设置data中的a的属性的时候触发， 因此我输入框中输入的值赋值给data中的a时候会触发set方法，set方法的形参接收我的input传过来的值也就是value 此时可以在把value赋值给 temp.a 当输入框中的值发生改变时候我们temp的里面的值会根据输入框中的值会同步变化

二.

其实还有一种方法就是Vue3中的proxy
		
		关于Proxy、Reflect是什么？能做什么？以及应用场景有哪些？先都放到一边，我们先来看看使用Proxy如何实现前面得案例需求：
		
		
		 <input type="text" id="demo" name="">
		 <div id="show"></div>
		 <script>
		     const oInput = document.getElementById("demo");
		     const oDiv = document.getElementById("show");
		
		     let oData = {
		         name:"duyi",
		        valueObj:{
		            value:"aaa"
		         }
		    }
		     function upData(){
		         oDiv.innerText = oData.name;
	     }
		    upData();
		     oInput.oninput = function(){
		         proData.name = this.value;
		    }
		   let proData = new Proxy(oData,{
		        set(target,key,value,receiver){
		            Reflect.set(target,key,value);
	            upData();
	         },
		         get(target,key,receiver){
		             return Reflect.get(target,key);
		         }
		    });
		 </script>
		
		通过下面这个示图来了解Proxy、Reflect实现案例需求的流程图：
		

当oninput事件触发时，proxy代理data接收数据，然后通过reflect映射给data；然后，当有获取Data数据时，Proxy会将get操作拦截下来，再通过reflect映射出data的真实数据。

Proxy在代码量上远远优于Object.defineProperty()的数据劫持操作，并且可以直接作用数组。

Proxy不能直接对引用值属性做深入代理，需要一个节点一个节点的进行创建proxy对象来实现，所以上面的代码如果替换成这样两条与就不能触发数据渲染：

1 oDiv.innerText = oDiv.valueObj.value; //渲染数据
2 proData.valueObj.value = this.value; //修改数据
Proxy是什么？
　　Proxy用于修改某些操作的默认行为，同等于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。

Proxy能做什么？
　　Proxy可以理解在目标对象前架设一个拦截层，外界对该对象的访问都必须先通过这层拦截，因此可以提供一种机制对外界的访问进行过滤和改写。Proxy词意为“代理”，所以通常也被称为代理器。

Proxy的应用场景有？
　　数据验证、值修正及附加属性、扩展构造函数等，详细可以了解MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect是什么？
　　Reflect词意为“反射”，其对象方法与Proxy对象的方法对应，并且也与Object的方法对应，也就是javaScript用来实现映射的API，注意Reflect不能执行new指令。

　　详细可以了解阮一峰的ES6手册：http://es6.ruanyifeng.com/?search=reflect&x=0&y=0#docs/reflect


 set(target,key,value,receiver){
    //value 写入的值
    Reflect.set(target,key,value);
 upData();
 },
get(target,key,receiver){
     // target--属性所属的对象
    // key--属性的名称
     // receiver--代理对象
     // console.log(target,key,receiver);
     return Reflect.get(target,key);
 }

注意Proxy无操作会直接转发代理，可以理解为它内部直接执行了Reflect映射：

let target = {};
let p = new Proxy(target,{});
p.a = 37;
console.log(target.a); //37
关于Proxy和Reflect以后再来补充，毕竟这两个API因为不是语法糖，而是浏览器新拓展的全新功能，转码工具无法进行转码，而浏览器的兼容性目前还很糟糕，还不能得到广泛的应用。