Vue 的数据代理机制
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()方法实现。
三、数据代理时属性名的要求
Vue实例不会给以 _ 和 $ 开始的属性名微数据代理。为什么?
如果允许给_或$开始的属性名做数据代理的话。vm这个Vue实例上可能会出现_xxx或$xxx命名，这个属性名可能会和Vue框架自身的属性名冲突。所以在Vue当中，给data对象的属性名命名的时候，不能以_或$开始。
