Vue数据代理的原理
本篇文章结合实例以及数据代理的定义详述了Vue中的数据代理
前言
Vue的数据代理的原理是十分重要的，它的学习对我们了解Vue的底层工作原理以及学习Vue具有举足轻重的作用，掌握了数据代理的原理，我们便可以由浅入深，再去学习Vue的响应式原理；因此本篇文章我将带领大家详细的了解Vue实现数据代理的核心----Object.defineProperty();
何为数据代理
首先在讲解Vue数据代理的原理之前，我们应该知道什么是数据代理；数据代理的定义是：一个对象操作(读写)另一个对象中的属性和方法。定义比较抽象我们可能难以理解，下面我将结合实例向大家讲述什么是数据代理，实例代码如下：
// 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
},
})
从以上代码上可以看出实现数据代理的核心是使用Object.defineProperty()方法，当访问obj2上的x属性时，就会调用get方法读取obj的属性，当我们修改了obj2上x属性时，就会调用set方法，并且传入修改的值value值，将obj的x属性改为value；以上我们相当与通过obj2对象操作了obj对象中的x属性，这样便定义中所说的一个对象代理了另一个对象中的属性的操作；
Vue中的数据代理
详细大家通过上一节的学习，已经了解了什么是数据代理，下面我将结合下面实例带大家来看看Vue中的数据代理；代码示例如下：
<body>
<!--
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
let data = {
name: 'xizhutao',
address: '中国',
}
const vm = new Vue({
el: '#root',
data,
})
</script>
从数据代理的定义上说是一个对象代理了另一个对象的读写操作，因此我们首先要找到Vue中的两个对象，其次是哪个对象代理了哪个对象的操作；如下图所示我们在new Vue()时产生了一个vm实例对象，传入的参数内部又有一个data对象；
那么以上两个对象是谁代理谁呢，下面通过控制面板演示是vm实例对象代理了data对象；首先在控制面板执行以下代码修改vm实例对象上的name和address属性；
执行完以上代码后我们打开vue的调试面板，发现data上定义的属性确实变成了我们在vm实例上修改的值；即我们通过修改vm实例对象上的属性，实现了修改data对象的属性，即实现了数据代理，这就是Vue中的数据代理；
写在最后
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
前往低代码交流专区
更多推荐
22
0- 0
已为社区贡献2条内容
所有评论(0)