vue中的数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
下面我们通过一个简单的例子来了解什么是数据代理
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
我们定义了两个对象 obj 和 obj2
然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法
当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们
当我们修改obj2.x的值时候触发了set() 方法 把我们修改的值拿到并赋值给了obj.x
现在就实现了最简单的数据代理 不管我们如何操作obj2.x的值 它都会始终和obj.x的值保持一致
在我们知道了什么是数据代理之后我们来看看Vue中是如何实现数据代理的
Vue中的数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
下面我们通代码来演示一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue中的数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>名称:{{name}}</h2>
<h2>地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'张三',
address:'山东菏泽曹县'
}
})
</script>
</html>
我们通过new Vue() 得到了一个 vm 实例对象 接下来我们打印 vm 实例对象
在实例对象中出现了 name 和 address 两个属性
鼠标放上去会提示 Invoke property getter
在实例的最下面还有着两个属性的 set和get 方法
现在我们得知这两个属性是由Object.defineProperty()添加上去的
所以当我们通过vm读name的时候实际读的就是data中的name 当我们改的时候改的也是data中的name
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?