网站制作涉及哪些方面中国海洋大学站群网站建设
这篇文章主要给大家介绍了关于Vue2.x和Vue3.x的双向绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值。
双向绑定的原理
通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的，从这个属性中取值时会触发get方法，改变这个属性时会触发set方法，所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了，而view更新data其实可以通过事件监听实现
当视图上的数据发生改变时， data 中的数据也发生改变当 data 中的数据发生改变时，视图中的数据也发生改变 Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
语法：Object.defineProperty(obj, prop, descriptor)
参数：
- obj
要定义属性的对象。 - prop
要定义或修改的属性的名称或 Symbol 。 - descriptor
要定义或修改的属性描述符。
返回值
被传递给函数的对象。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。
作用
* 可以给对象的一个属性设置两个方法：
* get：从这个属性中取值时会触发get方法
* set：给这个属性赋值时会触发set方法
let obj = {};
// 给obj的name属性设置两个方法get&set
Object.defineProperty(obj, "name", {set: function (value) {//value就是给name赋值的结果console.log("触发了set");this._name = value; //保存这个值 这里不能直接用name,因为会触发set},get: function () {console.log("触发了get");// 将保存的值返回回来return this._name;},
});
在给name属性赋值的时候触发set方法，在set方法中将值存起来
取值时触发get方法，在get方法中将值返回回来
vue2.x双向绑定原理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 这里相当于V --><div id="v"></div><input type="text" id="ipt" /></body><script>// MVVM：// 当V改变，M自动改变// 当M改变，V自动改变// 这里相当于Mlet data = {};// 给data中的name属性设置两个方法get ，setObject.defineProperty(data, "name", {set: function (value) {// 当M改变时，V自动改变document.querySelector("#v").innerHTML = value;},get: function () {return this._name;},});// 给input添加一个内容改变的之后会触发的事件document.querySelector("#ipt").oninput = function (e) {data.name = e.target.value;};</script>
</html>一旦输入框中的内容发生改变，就会触发oninput事件马上改变data中的内容，一旦data中的name发生改变就会触发set方法将最新的值赋值给v，这样就实现了数据的双向绑定
vue3.x双向绑定原理
Vue3.x是通过proxy（代理）实现的数据的双向绑定。
proxy 跟 Object.defineProperty 一样也可以给对象的属性添加两个方法 get & set
区别：
- Object.defineProperty 一次性只能给对象的一个属性添加 get & set 方法
- Proxy 一次性给对象所有属性都设置 get & set 方法
用法：
- 创建一个新的proxy对象
let p = new Proxy(obj,{get:function(){},set:function(){}})<script>let obj = { }let p = new Proxy(obj,{get:function(obj,prop){//obj :被代理的对象 prop:要操作的属性console.log('触发了get');return obj[prop]},set:function(obj,prop,value){// obj:被代理的对象// prop要赋值的属性// value要赋值的结果console.log('触发了set');// 将赋值的结果保存起来obj[prop] = value}})
</script>
