Vue 的数据代理机制

2025/4/22

一、什么是数据代理机制

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

如下所示:

html 复制代码
<!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

html 复制代码
<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对象的属性名命名的时候,不能以_或$开始。

相关推荐
用户479492835691527 分钟前
mcp是怎么和大模型进行交互的,有哪些交互方式
前端·人工智能
凤年徐37 分钟前
解锁网页魔法:零基础HTML通关秘籍
前端·javascript·css·前端框架·html·web
PineappleCoder39 分钟前
防抖 vs 节流:高频事件的 “性能优化双雄” 怎么用?
前端·javascript·面试
小old弟40 分钟前
🤔面试官问你:什么是高阶函数?举例说明用到过的...
前端
是你的小橘呀41 分钟前
从小区广场舞群聊,看懂前端 er 必懂的发布订阅模式
前端
margicCode42 分钟前
0-1搭建项目基本配置(eslint+prettier)到release-it发布
前端
ZzMemory44 分钟前
CSS 命名太乱?BEM 规范帮你一键搞定,代码清爽到飞起!
前端·css·面试
大道小路44 分钟前
Vue3 组件数据传输小全
前端·javascript·vue.js
初辰ge1 小时前
pCameraH5 v2.0:轻量级 H5 相机插件全新升级,支持拍照、录像与自定义水印
前端·javascript
Mr_Swilder1 小时前
Chapter 8 Light and Color 光与颜色
前端