Vue数据代理的原理_vue的代理请求的实现原理

作者：2023面试高手 | 2024-05-05 20:32:17

踩

vue的代理请求的实现原理

前言

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
        },
      })
1
2
3
4
5
6
7
8
9
10
11

从以上代码上可以看出实现数据代理的核心是使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

从数据代理的定义上说是一个对象代理了另一个对象的读写操作，因此我们首先要找到Vue中的两个对象，其次是哪个对象代理了哪个对象的操作；如下图所示我们在new Vue()时产生了一个vm实例对象，传入的参数内部又有一个data对象；
在这里插入图片描述
那么以上两个对象是谁代理谁呢，下面通过控制面板演示是vm实例对象代理了data对象；首先在控制面板执行以下代码修改vm实例对象上的name和address属性；

执行完以上代码后我们打开vue的调试面板，发现data上定义的属性确实变成了我们在vm实例上修改的值；即我们通过修改vm实例对象上的属性，实现了修改data对象的属性，即实现了数据代理，这就是Vue中的数据代理；
在这里插入图片描述

写在最后

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/540713