vue实现双向数据绑定原理是什么？
vue实现双向数据绑定原理是什么？的发valkdnvalkdnvmlncnadkvnaksdvnakjsdnvkajdnvkja。
目前几种主流的mvc(vm)框架都实现了单向数据绑定（例如react就是典型的数据单向绑定），简单的理解双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view。
1.首先，需要利用Object.defineProperty，将要观察的对象，转化成getter/setter，以便拦截对象赋值与取值操作，称之为Observer，也就是数据观察者；
2.需要将DOM解析，提取其中的指令与占位符，并赋与不同的操作，称之为Compile，也就是指令解析器；
3.需要将Compile的解析结果，与Observer所观察的对象连接起来，建立关系，在Observer观察到对象数据变化时，接收通知，同时更新DOM，称之为Watcher，也就是订阅者，它是Observer和Compile之间通信的桥梁；
4.最后，需要一个公共入口对象，接收配置，协调上述三者，称为vm，也就是Vue;
vue实现双向数据绑定原理是MVVM模式：
MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
vue2是Object.defineProperty(),vue3是proxy
vue实现双向数据绑定的原理就是利⽤了Object.defineProperty() 这个⽅法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现
的。
在MDN上对该⽅法的说明是：Object.defineProperty() ⽅法会直接在⼀个对象上定义⼀个新属性，或者修改⼀个对象的现有属性，并返回这
个对象。
它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。
属性描述符是⼀个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择⼀种使⽤，不能混合两种描述符的属性同时使
⽤。上⾯说的get和set就是属于存取描述符对象的属性。
然后我们可以通过在存取描述符中的get和set⽅法内写⼊⾃定义的逻辑来实现对象获取属性和设置属性时的⾏为。
var keyValue = 1;
var obj = {};
Object.defineProperty(obj,'key', {
enumerable: true,
configurable: true,
get: function(){
return keyValue;
},
set: function(newValue){
keyValue = newValue;
console.log(keyValue的值已发⽣改变，⽬前的值是：${keyValue});
}
});
obj.key; // 1
obj.key = 'obj对象的key属性已经绑定了变量keyValue的值';
// keyValue的值已发⽣改变，⽬前的值是：obj对象的key属性已经绑定了变量keyValue的值
// "obj对象的key属性已经绑定了变量keyValue的值"
keyValue; // "obj对象的key属性已经绑定了变量keyValue的值"
上⾯这个例⼦就是改变了对象获取属性及设置属性的默认⾏为。
对象obj获取属性key的值时，会触发上⾯的get⽅法，得到的是变量keyValue的值，然后当重新设置key的值时，触发set⽅法，会将变量
keyValue的值改变为设置的值，如此就实现了⼀个简单的双向绑定：改变keyValue，obj.key得到的值也会改变，重新设置
obj.key，keyValue⼀样会随之改变。
当然，vue的双向绑定实际更复杂，但最基本的原理就是基于Object.defineProperty()⽅法改变数据存取的默认⾏为来实现的。