vue技术之数据代理

最新推荐文章于 2025-06-22 20:30:00 发布

小白-xxx

最新推荐文章于 2025-06-22 20:30:00 发布

阅读量288

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_62956385/article/details/126161968

本文深入探讨了数据代理的概念，通过实例展示了如何使用Object.defineProperty实现数据代理，使一个对象能访问并修改另一个对象的属性。接着，文章解释了Vue中的数据代理，通过创建Vue实例，说明了Vue如何通过getter和setter对data对象中的属性进行操作。最后，总结了Vue中数据代理的好处，并强调其在便捷操作数据和响应式更新方面的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

数据代理是什么

数据代理是通过一个对象代理对另一个对象中属性的操作(读/写)。是通过definproperty方法来实现的。

为了让大家更好理解数据代理的原理，下面将举出一个小案例。
案例目的：obj对象中有一个属性x，另外还有一个对象obj2。目的是让obj2能够访问到并且能够修改这个x属性，即通过对象obj2代理对另一个对象obj中属性x的操作.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let obj={
            x:100
        }
        let obj2={
            y:200
        }
        //给obj2中追加一个属性x
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x  //若get方法调用了，也就是想访问obj2的x,其实得到的是obj中的x
            },
            set(value){//若set方法调用了,也就是想更改obj2的x,但其实改改掉的是obj中x的值
                obj.x=value
            }
        });
    </script>
    
</body>
</html>

当打开控制台进行效果验证，通过输入obj.x得到的值为100，输入obj2.x时得到的也是100，也就是调用了get方法，返回了obj.x的值。当我们将obj2.x的值设置为300，可以看到obj.x的值也变为300。

在这里插入图片描述

理解vue中的数据代理

接下来将通过一个小例子帮助大家去理解vue中的数据代理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入Vue-->
    <script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。
    
    const vm=new Vue({
        el:'#root',
        data:{
        name:'mmm',
        address:'北京'
    }
    })
    </script>
</body>
</html>

打开控制台，可以看到vm上也存在name和 address属性。通过vm访问name时，getter开始工作，即访问的是data中的name。通过vm修改name时，setter开始工作。这说明vue中存在数据代理。vm中的name和 address代理对data中的name和 address操作。

在这里插入图片描述

下面将来验证两条线：（这里以name属性为例）

通过vm访问name时，getter开始工作，即访问的是data中的name。
通过vm修改name时，setter开始工作，即修改的是data中的name。

验证第一条：
当在控制台上输入vm.name时，得到的是data中name属性的值，这说明getter方法开始被调用了。

在这里插入图片描述

验证第二条：
在控制台中，通过修改vm.name,验证data中的name的值是否被改变，即调用了setter方法。但是我们并不能直接通过在控制台直接输入data.name来验证vm.name值改变，data.name也跟着改变，不然会报错！

解决办法：
其实vm中已经将data中的数据收集在在自身上，即vm._data
在这里插入图片描述
输入vm.name设置新的值，再输入vm._data.name，这时vm._data.name的值（即data中name的属性值）也跟着改变。一旦data中的数据发生改变，那么页面中用到改数据的地方也会自动更新。所以页面展示也发生变化。

总结

1. vue中数据代理的好处：
更加方便的操作data中的数据
2. 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加vm上的属性，都指定了一个getter和setter方法。在这两个方法内部去操作（读/写）data中对应的属性。