Vue数据代理的原理----Object.defineProperty()
前言
Vue的数据代理的原理是十分重要的，它的学习对我们了解Vue的底层工作原理以及学习Vue具有举足轻重的作用，掌握了数据代理的原理，我们便可以由浅入深，再去学习Vue的响应式原理；因此本篇文章我将带领大家详细的了解Vue实现数据代理的核心----Object.defineProperty();
文章の目录
- 前言
- 何为数据代理
- Vue中的数据代理
- 写在最后
何为数据代理
首先在讲解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中的数据代理；
写在最后
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
