Vue3响应式原理分析(Proxy(obj,{get(){},set(){}}))
更新时间：2025年10月28日 09:02:25 作者：@AfeiyuO
文章详细分析了Vue3的响应式原理,包括Proxy对象的get和set方法,以及双向数据绑定,通过代码示例展示了Vue3和Vue2在set方法上的区别,说明了Vue3能够正确修改值而Vue2不能
Vue3原理：首先是get方法分析，再者set方法分析，最后双向数据绑定，层层渐进到掌握，以及与Vue2的区别，话不多说，直接上代码分析。
1、Proxy响应式的get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let obj = {
name:"Vue",
age:8
}
// Proxy 代理 new Proxy()创建一个代理对象
// new Proxy(要代理的这个对象，{get(),set()})
let obj2 = new Proxy(obj,{
get(target,property){
// 什么时候执行？ 当我们访问 obj2 的某个属性的时候
// target和 property 表示什么？
// target 是这个obj对象 ，property就是我们访问的这个属性
console.log("执行了get",target,property);
return target[property]
}
})
console.log(obj2.age);
console.log(obj2.name);
// obj2 是一个代理对象，属性和值的obj一样
</script>
</head>
<body>
</body>
</html>执行效果
2、Proxy响应式的set方法
<script>
let obj = {
name:"Vue",
age:8
}
// Proxy 代理 new Proxy()创建一个代理对象
// new Proxy(要代理的这个对象，{get(),set()})
let obj2 = new Proxy(obj,{
get(target,property){
// 什么时候执行？ 当我们访问 obj2 的某个属性的时候
// target和 property 表示什么？
// target 是这个obj对象 ，property就是我们访问的这个属性
console.log("执行了get",target,property);
return target[property]
},
set(target,property,newVal){
// 数据劫持的时候 执行这里的代码 newVal就是 boj2.age = 9 =号 后面的这个值
console.log("执行了set",target,property,newVal);
// 在这里进行修改这个属性成为新的值，下次访问，才能拿到新值
target[property] = newVal
}
})
obj2.age = 9; //修改值 触发执行了set
console.log(obj2.age)
/*
自己总结:
1:obj2.age = 9; //修改值 触发执行了set 就会执行set里面的console.log newVal=9 但是实际return是8没有改到
2:在set里面修改值 才会变 才真正改了
*/
</script>效果图：
3、双向数据绑定
<body>
<input type="text" id="ipt">
<p id="op"></p>
<script>
let obj = {
txtVal : "初始值"
}
function myReactive(obj){
return new Proxy(obj,{
get(target,property){
return target[property]
},
set(target,property,newVal){
// 对象劫持 数据劫持
ipt.value = newVal
op.innerHTML = newVal
target[property] = newVal
}
})
}
let objRet = myReactive(obj);
// 绑定初始值
ipt.value = objRet.txtVal;
op.innerHTML = objRet.txtVal
ipt.addEventListener("input",e=>{
objRet.txtVal = e.target.value //触发了set
})
</script>
</body>效果图：
4、Vue2和Vue3set的区别
Vue3的set修改值
<script>
let obj = [10,20,30]
let obj2 = new Proxy(obj,{
get(target,property){
console.log("执行了get",target,property);
return target[property]
},
set(target,property,newVal){
console.log("执行了set",target,property,newVal);
}
})
obj2[0] = 1000
/*
对比：
Vue2 将初始值改为数组，在下面就修改不了了 而且触发不了set
Vue3 就可以
*/
</script>如图：
Vue2的set修改值（修改不了）
<body>
<input type="text" id="oipt">
<p id="op"></p>
<script>
let obj = {};
// let val = "默认值";
let = [10,20,30]
Object.defineProperty(obj,"iptVal",{
get(){
return val;
},
set(newVal){
oipt.value =newVal
op.innerHTML = newVal
// val = newVal
}
})
// 设置初始值
oipt.value = obj.iptVal;
op.innerHTML = obj.iptVal;
oipt.addEventListener("keyup",function(e){
// 发布者，影响订阅者的
obj.iptVal[0] = e.target.value //触发了set
})
</script>
</body>效果图：set 就修改不到
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在使用 element ui 组件过程中，我最近碰到了新的问题，vue--elementui中如何修改el-input样式呢，今天小编通过示例代码给大家详细讲解，需要的朋友参考下吧2023-05-05
这篇文章主要介绍了vue环境变量配置之process.env解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Ubuntu22.04使用nginx部署vue前端项目的详细教程
这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue一个页面实现音乐播放器的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
Vue3 提供了两个新的 API：ref 和 reactive，它们可以帮助我们更好地管理和处理响应式数据，这篇文章主要介绍了vue3中的ref与reactive的区别和使用方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue form check 表单验证的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue 实现setInterval 创建和销毁实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue button的@click方法无效钩子函数没有执行问题
这篇文章主要介绍了vue button的@click方法无效钩子函数没有执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了浅谈Vue 数据响应式原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本文主要介绍了手摸手教你实现Vue3 Reactivity，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论