Vue中的数据代理

原创已于 2025-03-21 14:35:51 修改 · 506 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #Vue2

于 2025-02-28 23:28:11 首次发布

前端同时被 2 个专栏收录

343 篇文章

订阅专栏

Vue2/Vue3及其生态

36 篇文章

订阅专栏

Vue中的数据代理

1.数据代理是什么？
2.代码实现简单的数据代理
3.Vue中的数据代理
4.总结

1.数据代理是什么？

数据代理是一种在编程中常用的技术，它允许通过一个对象来代理对另一个对象的属性进行操作，包括读取和写入。这在JavaScript中尤其常见，尤其是在一些流行的框架中，如Vue.js中。数据代理通常是通过建立依赖关系，来实现数据的响应方式更新以及视图与数据的同步。

2.代码实现简单的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>理解数据代理</title>
</head>

<body>
    <script type="text/javascript">
        let obj1={x:100}
        let obj2={y:200}
        Object.defineProperty(obj2,"x",{
          get(){
            return obj1.x;
          },
          set(value){
            obj1.x=value;
          }
        })
      
    </script>
</body>
</html>

在浏览器控制台改变obj2中x的值,obj1中的x值发生改变。这就是一个简单的数据代理，控制台中可以看出通过Obj2可以对Obj1里的属性值进行操作。
在这里插入图片描述

3.Vue中的数据代理

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>名字:{{_data.name}}</h1>
    <h1>地址:{{_data.address}}</h1>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",//el指定当前vue实例为哪个容器服务，值通常为css选择器字符串（用以和容器进行绑定）
      data() {
        return {
          name: "张三",
          address: "杭州市",
        }
      },
      methods:{
      },
    })
    console.log(vm)

  </script>
</body>

如上代码打印vue实例,控制台如下:
在这里插入图片描述

在vue实例中有_data属性很好理解,这相当于我们模板中的data，但我们发现在vue实例中居然直接绑定着address、name两个属性。这是因为vue源码通过Object.defineProperty中的getter/setter给_data做了数据代理:也就是我们可以访问address属性，它会读取_data.address;修改address属性，_data.address会发生相应变化。
在这里插入图片描述

4.总结

在一个vue组件实例中，有很多属性，其中有个属性是data(_data)。为了简便操作，防止每次调用data中的数据都要在前面加一个.data(如this.data.xxx),所以就有了vue的数据代理:将data上的每个属性都添加到vue组件实例上(this)。然后通过Object.defineProperty的getter和setter方法对组件实例上的属性进行拦截。访问实例(this)上的属性实则就是访问this.data中的同名属性；修改实例(this)上的属性实则就是修改this.data中的同名属性。