当前位置：首页 > news >正文

Vue 的数据代理机制

news 来源：原创 2025/4/24 20:10:38

2025/4/22

向

一、什么是数据代理机制

通过访问代理对象的属性，来间接访问目标对象的属性，数据代理机制的实现需要依赖Object.defineProperty()方法。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><title>初识VM</title>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><script>// 目标对象let target = {name : "apple"}// 代理对象let proxy = {}// 使用object.defineProperty 为代理对象新增属性Object.defineProperty(proxy,'name',{get : function() {return target.name},set : function(val){target.name = val}})</script></body>
</html>

建立的目标对象，代理对象，依赖Object.defineProperty()方法实现了访问访问代理对象的属性，来间接访问目标对象的属性。

二、进一步解释vm.msg

<script>const vm = new Vue({el : "#app",data :{msg : "hello vue!"}})
</script>|||| \/  
<script>let obj = {msg : "hello vue!"}const vm = new Vue({el : "#app",data : obj })
</script>

为什么如上代码，我们可以通过vm.msg放问到该属性，为什么可以通过vm.msg访问到obj.的属性呢，其实vm就类似于是一个目标对象，vue框架会自动的把 data 选项中的属性转换为响应式属性，同时将这些属性代理到 Vue 实例上，通过Object.defineProperty()方法实现。