vue3.0响应式原理,vue2和vue3响应式的区别
本文主要介绍Vue3响应原理的详细说明。文章通过对比vue2.x的响应，展示了Vue3响应原理的细节，感兴趣的朋友可以参考一下。
目录
查看vue2.x和vue3的响应反映
回顾 vue2.x 的响应式
实现原理：
对象类型：通过object.defineProperty()(数据劫持)读取和修改属性的拦截数组类型：拦截是通过重写一系列方法来更新数组(包装数组的变化方法)Object.defineproperty (data， count ，{
get(){}，
set(){}
})
存在问题：
添加和删除属性，界面不会更新，直接用下标修改数组，界面不会自动更新。但是，vue2给出了解决方案。让我们看看下面的代码：
模板
差异
H2我是vue2 /h2写的效果
H4-show= person.name 姓名：{{person.name}}/h4
H4年龄：{{person.age}}/h4
H4-show= person.sex 性别：{{person.sex}}/h4
H4爱好：{{person.hobby}}/h4
按钮@click=addSex 添加性属性/按钮
按钮@click=deleteName 删除名称属性/按钮
按钮@click=changeHobby 修改爱好/按钮
/div
/模板
脚本
从“vue”导入Vue
导出默认值{
名称：“应用程序”，
data(){
返回{
人：{
姓名：张三，
年龄：18，
爱好：[学习，吃饭]
}
}
},
方法：{
addSex(){
//这样直接加是不行的。
//this.person.sex= male
这个。$set(this.person， sex ， male )
//Vue.set(this.person， sex ， male )
},
deleteName(){
//这样直接加是不行的。
//删除this.person.name
//这个。$delete(this.person， name )
Vue.delete(this.person， name )
},
changeHobby(){
//这样直接加是不行的。
//this . person . hobby[0]= shopping
//可以这样。
这个。$set(this.person.hobby，0，购物)
//或者
//this.person.hobby.splice(0，1，购物)
},
}
}
/脚本
我们可以用 js 模拟 vue2 的响应式：
脚本
//源数据
let person={
姓名：张三，
年龄：18岁
}
设p={}
//模拟vue2实现响应。
Object.defineProperty(p， name ，{
可配置：真，
当有人读名字时调用Get() {//函数
返回人员姓名
},
设置(v) {
person.name=v
console . log(‘有人修改了name属性，我发现了。我要更新界面了’))；
}
})
Object.defineProperty(p， age ，{
Get() {//当有人读取年龄时调用
返回person.age
},
设置(v) {
person.age=v
console . log(‘有人修改了年龄属性，我发现了。我要更新界面了’))；
}
})
/脚本
先输出person，再看p，修改姓名或年龄时会被检测到。
它的问题是，如果添加了性别属性，vue不会检测到它。虽然添加了性别属性，但它没有响应性，因为它有getter和setter，如name和age。
同样，当名称属性被删除时，也无法对其进行监控。
vue3的响应式
模板
H1一个人的信息/h1
H3-show= person . Name Name:{ { person . Name } }/H3
H3: {{ person.age }}/h3
H3-show= person.sex 性别：{{ person.sex }}/h3
.
Button @click=changeInfo 修改器的信息/button
Button @click=addSex 添加性属性/button
Button @click=deleteName 删除名称属性/按钮
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup() {
.
函数changeInfo() {
.
Person.hobby[0]=学习
}
函数addSex() {
Person.sex= male
}
函数deleteName() {
删除人名
}
返回{
.
addSex，
删除名称
}
}
}
/脚本
模拟 vue3 中的响应式：
脚本
//源数据
let person={
姓名：张三，
年龄：18岁
}
const p=新代理(person，{
//当有人读取p的一个属性时调用。
get(target，p，receiver) {
Console.log(`有人读取了P `上的${p}属性)；
//返回目标[p]
返回Reflect.get(target，p)
},
//当有人修改或添加p的属性时调用。
集合(目标，p，值，接收者){
Console.log(`有人修改了P上的${p}，我去更新界面`)；
//target[p]=值
Reflect.set(目标，p，值)
},
//当有人删除p的一个属性时调用。
deleteProperty(target，p) {
Console.log(`有人在P上删除了${p}，我去更新界面`)；
//返回删除目标[p]
返回Reflect.deleteProperty(target，p)
}
})
/脚本
实现原理：
通过Proxy(代理)截取对象中任意属性的变化，包括读写属性值、添加属性、删除属性等。通过Reflect(反射)：操作源对象MDN文档中描述的 Proxy 与 Reflect的属性
Reflect是一个内置对象，它提供了拦截JavaScript操作的方法。Reflect不是函数对象，因此它是不可构造的。
新代理(数据，{
//截取读取属性值
获取(目标，道具){
返回Reflect.get(target，prop)
},
//拦截设置属性值或添加新属性
设置(目标，属性，值){
返回Reflect.set(目标，属性，值)
},
//拦截删除属性
deleteProperty(目标，属性){
返回Reflect.deleteProperty(target，prop)
}
})
proxy.name=tom
关于Vue3响应原理的详细解释，本文到此为止。更多相关Vue3响应，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。