proxy vue双向绑定,vue3.0双向数据绑定原理
本文主要介绍通过代理实现vue3数据双向绑定的原理。文章首先介绍了代理的优势，重点介绍了通过代理实现vue3数据双向绑定的相关信息。有需要的朋友可以参考一下。
:
目录
1.代理相对于Object.defineProperty 2的优势。代理监控对象1的简单实现。代理对象2的简单实现。补充知识反射3 .代理方法3。手写vue3.0双向绑定——es6 proxy 1，什么是Proxy2，vue.js中的双向绑定
四。代理与对象。定义属性
一、proxy对比Object.defineProperty的优点
proxy的优点：
代理可以直接监听对象而不是属性；
代理可以直接监控数组的变化；
Proxy最多有13种拦截方式，不限于apply、ownKeys、deleteProperty、has等。这些在Object.defineProperty中不可用。
代理返回一个新对象，我们只能操作新对象达到目的，而Object.defineProperty只能遍历对象属性，直接修改；
代理作为新标准，会被浏览器厂商不断优化，也就是传说中新标准的性能加成；
Object.defineProperty 的优势：
兼容性好：支持IE9，但是代理有浏览器兼容问题，用polyfill无法平滑。所以Vue的作者声明，需要等到下一个大版本(3.0)才能用代理重写。
二、、proxy监听对象的简单实现
1.代理对象简单实现
` ` javascript
let data={ }；//定义一个空对象
let proxy=new Proxy(data，{ })；//以数据作为目标对象创建代理
//修改代理对象的名称属性
proxy.name= shelley
console.log(代理)；
console.log(数据)
//{姓名：谢莉 }
//{姓名：谢莉 }
```
2.补充知识 Reflect
反射对象和代理对象一样，是ES6为操作对象提供的新API。
我们需要在handler.set()中返回一个Reflect.set(…arguments)来分配给目标对象。
Reflect.set方法将目标对象的name属性设置为value。如果name属性设置了一个赋值函数，那么这个赋值函数将绑定到接收控件。
Reflect.get方法查找并返回目标对象的name属性，如果没有该属性，则返回undefined。
3.proxy方法
handler.set()方法 属性设置操作的捕捉器。
` ` javascript
let data={
名字：“谢莉”，
年龄：“27岁”
};
设p=新代理(数据，{
设置(目标，属性，值){
//target=目标对象
//prop=设置属性
//value=修改后的值
console.log(目标，属性，值)；//{姓名： 谢莉，年龄： 27 } 18岁
返回Reflect.set(.论据)；
}
})
p.age=18
console.log(数据)；//{姓名：“谢莉”，年龄：18岁}
```
- handler.get() 属性读取操作的捕捉器。
` ` javascript
let data={
名字：“谢莉”，
年龄：22岁
};
设p=新代理(数据，{
获取(目标，道具){
console.log(目标，道具)；//{姓名：“谢莉”，年龄：22岁
返回Reflect.get(.论据)；
}
})
console . log(p . age)；//22
```
Object.defineProperty监听对象的简单实现
` ` javascript
var o={ }；//创建一个新对象
var bValue=39//添加一个在对象中设置了访问描述符属性的示例
Object.defineProperty(o， bValue ，{
//这段代码不会设置O的属性，只有在访问
get() {
返回bValue
},
set(newValue) {
console.log(set==，new value)；
bValue=newValue
}
});
console.log(o) //{}
//进入访问器代理的bValue属性的get方法，返回，将O对象中bValue的值设置为38。
console . log(o . b value)；//38
//进入访问器代理的bValue属性的set方法，设置bValue的新值，
//返回获取并将O对象中bValue的值设置为40。
o.bValue=40
console.log(o.bValue) //40
```
小结：
与es5 Object.defineProperty相比，esproxy代理更加强大，提供了很多方法，甚至可以代理方法。
为什么Vue在3.0中只用了es6的代理，而在2.0中没有？因为es6在某些浏览器中不兼容，比如ie的较低版本，所以只有* *大部分主流浏览器兼容* *时才使用。
三、手写vue3.0双向绑定-es6 Proxy
1、什么是Proxy
就拿它的英文意思“代理”来说吧。所谓的代理，就是你想要获得某样东西或者对它进行某种操作的中间媒介，而不是直接作用于这个对象。
代理可以理解为在目标对象前面设置一个拦截层，外界必须通过它先拦截对象，所以它提供了一种拦截或过滤外界访问的机制。
2、vue.js中使用双向绑定
` ` javascript
div id=应用程序
h2{{msg}}/h2
输入类型=text v-model=msg/
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
味精：“雪莱”
},
})
/脚本
```
四、Proxy对比Object.defineProperty
Vue2.0中的双向绑定，使用Object.defineProperty()进行双向绑定
缺点：
无法监控数组，数组的方法被重写(push、pop、shift、unshift等。).对此执行双向绑定和数据监控。
效率差，这主要是由于多层数据的一次性递归操作。如果有很多或者很深的数据，性能就很差。
由于限制，无法监控新增/删除的数据，所以在vue2.0中使用$set手动添加。
-Object.definePorperty()递归遍历所有对象的所有属性，当数据级别较深时会造成性能影响。
-Object.definePorperty()只能作用于对象，不能作用于数组。
-object . definerporty()只能监听已定义的属性，不能监听新添加的属性。
-由于Object.definePorperty()不能作用于数组，vue2.0选择通过重写数组方法的原型来监控数组数据，但仍然无法监控数组索引和长度的变化。
Vue3.0中双向绑定，使用Proxy和Reflect进行双向绑定
优点：
代理可以拦截和监听数组和对象。
缺点：
代理将发送多个set/get响应。
解决办法：
使用类似于去抖的操作进行优化，使其值响应一次。
((vue 3.0)中的解法，判断key是否为目标自身属性，value是否等于target[key]可以避免多余的set/get操作。
Proxy只能代理一层，无法深度监听
使用深度递归监控每一层。巧妙的使用Reflect.get()会返回一个对象(下一层)的内部结构特征，判断下一层是否还是对象，使用深度递归运算。但是对性能影响很大。
使用weakMap，两个weak map用于保存原始数据和响应数据。当数据被访问时，如果它没有被再次代理，它将从保存的数据中被搜索。
关于vue3数据通过代理双向绑定的原理，本文到此为止。关于vue3数据通过代理双向绑定的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。