vue 中的数据代理
在 Vue 中，数据代理（Data Proxy） 是 Vue 实现 MVVM 模式 的关键技术之一。Vue 使用数据代理让你可以通过 this.message 访问 data.message，而不需要写 this.data.message —— 这大大简化了模板和逻辑代码。
我们来深入理解它的本质、实现原理和源码体现。
🔹 什么是数据代理？
Vue 实例将 data、props、computed 等属性“代理”到 vm（Vue 实例）自身上，从而让我们能直接通过 this.xx 访问，而不必每次访问 this._data.xx。
✅ 示例：数据代理的使用效果
const vm = new Vue({data: {message: 'hello'}
})console.log(vm.message) // 实际上是 vm._data.message
🧠 数据代理的实现原理（以 Vue 2 为例）
Vue 2 中通过 Object.defineProperty 实现数据代理。
👉 源码简化模拟：
function proxy(target, sourceKey, key) {Object.defineProperty(target, key, {get() {return target[sourceKey][key]},set(val) {target[sourceKey][key] = val}})
}
Vue 实例化时，会遍历 data 中的所有属性，调用 proxy(vm, ‘_data’, key) 将它们挂载到实例 vm 上。
🔧 Vue 2 中相关源码（core/instance/state.js）
function initData(vm) {const data = vm.$options.datavm._data = typeof data === 'function' ? data.call(vm, vm) : data || {}// 数据代理const keys = Object.keys(vm._data)let i = keys.lengthwhile (i--) {proxy(vm, '_data', keys[i])}observe(vm._data)
}
📌 Vue 3 的处理方式
Vue 3 中由于响应式改为使用 Proxy，所以数据代理并不是必须通过 defineProperty 显式定义，而是由 reactive() 和 ref() 本身提供的响应式代理能力。
import { reactive } from 'vue'const state = reactive({ count: 0 })console.log(state.count) // 已被代理，无需显式挂载到组件实例上
Vue 3 更加模块化，组件实例并不自动把数据代理到 this 上，尤其在
🧠 为什么要用数据代理？
简化访问：
- 不用写 this._data.xxx，直接 this.xxx
实现双向绑定：
- v-model 语法简洁，背后依赖于代理 + 响应式
方便调试和语法提示：
- IDE 能提示实例属性；不用深层嵌套对象路径
🔄 数据代理 vs 响应式代理
| 特性 | 数据代理 | 响应式代理 |
|---|---|---|
| 实现技术 | Object.defineProperty（Vue 2） | Proxy（Vue 3） |
| 目的 | 让你能通过 this.key 访问 data.key | 追踪依赖、触发视图更新 |
| 是否双向绑定 | 否，单纯转发 getter/setter | 是，配合响应式系统自动更新视图 |
| 使用位置 | Vue 实例、组件 | 所有响应式状态（ref、reactive） |
✅ 小结
- 数据代理是为了简化访问方式，不是响应式的根本机制。
- Vue 2 中通过 Object.defineProperty 将 data 的属性代理到 Vue 实例上。
- Vue 3 中响应式是通过 Proxy 实现，数据代理的需求被弱化（但原理仍然存在）。
- 它是 MVVM 中 ViewModel 作为桥梁的一部分。
小型 Vue 响应式系统（含数据代理）
// 1. 数据代理
function proxy(vm, sourceKey, key) {Object.defineProperty(vm, key, {get() {return vm[sourceKey][key]},set(val) {vm[sourceKey][key] = val}})
}// 2. 响应式转换（核心 Observer）
function defineReactive(obj, key, val) {const dep = new Dep()Object.defineProperty(obj, key, {get() {dep.depend()return val},set(newVal) {val = newValdep.notify()}})
}// 3. 对整个 data 对象做响应式处理
function observe(obj) {Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
}// 4. 依赖收集器
class Dep {constructor() {this.subscribers = new Set()}depend() {if (activeEffect) {this.subscribers.add(activeEffect)}}notify() {this.subscribers.forEach(effect => effect())}
}let activeEffect = null
function watchEffect(effect) {activeEffect = effecteffect() // 立即执行一次activeEffect = null
}// 5. 模拟 Vue 实例
function Vue(options) {this._data = options.dataobserve(this._data)// 代理 _data 到 thisObject.keys(this._data).forEach(key => {proxy(this, '_data', key)})
}
// 创建 Vue 实例
const vm = new Vue({data: {message: 'Hello',count: 1}
})// 绑定“视图更新”逻辑
watchEffect(() => {console.log('视图更新：', vm.message, vm.count)
})// 修改数据，自动触发“视图更新”
vm.message = 'Hello Vue'
vm.count++
Vue 3 响应式系统简易实现（模拟核心功能）
// 1. 依赖收集器
const targetMap = new WeakMap()
let activeEffect = nullfunction track(target, key) {if (!activeEffect) returnlet depsMap = targetMap.get(target)if (!depsMap) {depsMap = new Map()targetMap.set(target, depsMap)}let deps = depsMap.get(key)if (!deps) {deps = new Set()depsMap.set(key, deps)}deps.add(activeEffect)
}function trigger(target, key) {const depsMap = targetMap.get(target)if (!depsMap) returnconst deps = depsMap.get(key)if (deps) {deps.forEach(effect => effect())}
}// 2. 创建响应式对象
function reactive(target) {return new Proxy(target, {get(obj, key) {track(obj, key)return Reflect.get(obj, key)},set(obj, key, value) {const result = Reflect.set(obj, key, value)trigger(obj, key)return result}})
}// 3. 注册副作用（自动运行函数）
function effect(fn) {activeEffect = fnfn()activeEffect = null
}
const state = reactive({count: 0,name: 'Vue3'
})effect(() => {console.log('视图更新:', state.count, state.name)
})state.count++ // 触发更新
state.name = 'Vue3 Proxy'
相关文章：
vue 中的数据代理
在 Vue 中，数据代理（Data Proxy） 是 Vue 实现 MVVM 模式 的关键技术之一。Vue 使用数据代理让你可以通过 this.message 访问 data.message，而不需要写 this.data.message —— 这大大简化了模板和逻辑代码。 我们来深入理解它的本…...
Linux共享内存深度解析：从内核机制到云原生应用
引言：超越进程边界的内存魔术 在Linux系统的进程间通信（IPC）领域，共享内存（Shared Memory）如同魔法镜子般的存在——不同进程透过它看到相同的内存镜像。这种机制摒弃了数据拷贝，直击性能瓶颈&…...
Vue Router全局拦截
Vue Router全局拦截全攻略 一、为什么需要全局拦截？ 最近在开发后台管理系统时，突然发现所有页面都需要登录才能访问。如果每个页面都手动检查登录状态，那代码简直要写成意大利面条了。这时候，Vue Router的全局拦截功能就像个贴…...
从0开始学linux韦东山教程第三章问题小结（3）
本人从0开始学习linux，使用的是韦东山的教程，在跟着课程学习的情况下的所遇到的问题的总结,理论虽枯燥但是是基础。说实在的越看视频越感觉他讲的有点乱后续将以他的新版PDF手册为中心，视频作为辅助理解的工具。参考手册为嵌入式Linux应用开发…...
【前端】【css】【总复习】三万字详解CSS 知识体系
🌈 CSS 知识体系目录大纲 一、基础知识入门 1. CSS 简介与作用 CSS（Cascading Style Sheets，层叠样式表）是一种用于给 HTML 页面添加样式的语言，作用是让网页更美观、结构更清晰、布局更灵活。 核心作用： 控制网页元素的 颜色、字体、间距、边框、背景布局网页元素位置…...
Linux 进程等待
1、进程等待 僵尸进程 是一个比较麻烦的问题，如果不对其做出处理，僵尸进程 就会越来越多，导致 内存泄漏 和 标识符 占用问题 进程一旦变成僵尸状态，那就刀枪不入，“杀人不眨眼”的kill -9 也无能为力，因为…...
轻量服务器与宝塔
因为访问宝塔面板是需要在安全组设置一下开放端口，比如这里是42450 但是我们用的轻量服务器是把安全组这种功能削减了的，所以我就去尝试修改了一下防火墙设置 然后就可以访问了...
深入理解AMBA总线（六）AHB-lite Slave响应和其它控制信号
上一篇文章给大家介绍了AHB-lite的一些控制信号，重点是通过这些控制信号去理解AHB-lite为什么这么设计，采用这些控制信号有什么好处。这节课给大家带来剩余的一些控制信号介绍。 ** 1、Slave Response Signaling ** 1.1、Slave Transfer Responses …...
app加固
1、什么是加固? 我们之前讲的逆向,大多数都是用加密算法去加密一些明文字符串,然后把得到的结果用 Base64、Hex等进行编码后提交。加固其实也一样，只不过他通常加密的是 dex文件而已。但是 dex 文件加密以后，安卓系统是没法直接运行的。所以加固的核心&…...
Linux架构篇、第三章_2_Linux服务器监控与NGINX优化
Linux_架构篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目： 版本号: 1.0,0 作者: 老王要学习 日期: 2025.05.11 适用环境: Centos7 文档说明 本文围绕 Linux 服务器监控与 NGINX 优化展开。介绍了 sysst…...
-数据增强技术（PyTorch）)
第26节：卷积神经网络(CNN)-数据增强技术（PyTorch）
1. 引言 在深度学习领域，数据增强(Data Augmentation)是提升卷积神经网络(CNN)性能的关键技术之一。通过人为地扩展训练数据集，数据增强能够有效提高模型的泛化能力，防止过拟合，特别是在训练数据有限的情况下。本文将全面介绍PyTorch框架下的数据增强技术，包括基本原理、…...
架构思维：通用架构模式_怀疑下游的设计思路与最佳实践
文章目录 1. 引言2. 为什么要“怀疑下游”3. 三大类下游依赖及应对方案3.1 对其他微服务的依赖3.1.1 分布式事务简易补偿方案3.2 对数据库的依赖3.3 对消息中间件的依赖 4. 分布式事务实战案例5. 小结 1. 引言 在 架构思维：通用架构模式_从设计到代码构建稳如磐石的…...
[Java实战]Spring Boot 中Starter机制与自定义Starter实战（九）
[Java实战]Spring Boot 中Starter机制与自定义Starter实战（九） 引言 Spring Boot 的 Starter 是其“约定优于配置”理念的核心体现，通过简化依赖管理和自动配置，极大提升了开发效率。本文将深入剖析 Starter 的设计思想、实现原…...
 深入解析)
C++23 views::repeat (P2474R2) 深入解析
文章目录 引言C20 Ranges库回顾什么是Rangesstd::views的作用 views::repeat概述基本概念原型定义工作原理应用场景初始化容器模拟测试数据 总结 引言 在C的发展历程中，每一个新版本都会带来一系列令人期待的新特性，这些特性不仅提升了语言的性能和表达…...
【第三十五周】Janus-pro 技术报告阅读笔记
Janus-Pro 摘要Abstract文章信息引言方法Janus 架构Janus 训练Janus-Pro 的改进 实验结果总结 摘要 本篇博客介绍了Janus-Pro，这是一个突破性的多模态理解与生成统一模型，其核心思想是通过解耦双路径视觉编码架构解决传统方法中语义理解与像素生成的任务…...
基于Qt的app开发第七天
写在前面 笔者是大一下计科生，标题这个项目是笔者这个学期的课设，与学长共创，我负责客户端部分，现在已经实现了待办板块的新建、修改。 这个项目目前已经走上正轨了，博主也实现了主要功能的从无到有ÿ…...
第二十二节：图像金字塔-拉普拉斯金字塔
在数字图像处理的奇幻世界中，存在着一种能够连接不同视觉维度的神秘阶梯——图像金字塔。这种独特的结构让计算机视觉算法能够在不同尺度下观察和理解图像特征，而其中的拉普拉斯金字塔更是隐藏着图像细节重构的终极奥秘。 一、金字塔的数学基础：从高斯到拉普拉斯 1.1 高斯金…...
Flutter基础（）
导航栏 appBar: AppBar() title: const Text(搜索) //标题 backgroundColor: Colors.blue //背景颜色 centerTitle: true //标题居中leading 属性 作用： 放置在应用栏左侧的控件，通常是一个图标按钮，用于导航或打开菜单。 AppBar(le…...
ES面试题系列「一」
1、Elasticsearch 是什么？它与传统数据库有什么区别？ 答案：Elasticsearch 是一个基于 Lucene 的分布式、开源的搜索和分析引擎，主要用于处理大量的文本数据，提供快速的搜索和分析功能。与传统数据库相比，E…...
Oracle 通过 ROWID 批量更新表
Oracle 通过 ROWID 批量更新表 在 Oracle 数据库中，使用 ROWID 进行批量更新是一种高效的更新方法，因为它直接定位到物理行位置，避免了通过索引查找的开销。 ROWID 基本概念 ROWID 是 Oracle 数据库中每一行的唯一物理地址标识符ÿ…...
罗技无线鼠标的配对方法
罗技鼠标的配对方法： 重新连接鼠标 请按照以下步骤将鼠标与 USB 接收器重新配对。 1.将USB接收器插入计算机。 2.将鼠标关闭电源。 3.按住并持续按住向右按钮，直到操作结束。 4.切换鼠标电源。 5. 单击一次左侧按钮。 6. 单击一次中间按钮。 7.全部松开&…...
移动应用开发的六大设计原则
在移动应用开发中，遵循设计原则能大幅提升代码的可维护性和扩展性。本文以一个简单的学生管理系统为例，解析六大核心设计原则的实践方法。 1. 单一职责原则 优点： 提高可维护性：一个类只负责一项职责，代码的功能会更…...
LLM初识
从零到一：用 Python 和 LLM 构建你的专属本地知识库问答机器人 摘要： 随着大型语言模型（LLM）的兴起，构建智能问答系统变得前所未有的简单。本文将详细介绍如何使用 Python，结合开源的 LLM 和向量数据库技…...
【CTF】Linux Shell RCE绕过（bypass）技术总结
在Linux环境下，远程代码执行（RCE，Remote Code Execution）是一种常见的攻击手段。然而，许多系统会对命令注入进行过滤或限制，例如禁止特定关键字（如system）、斜杠（/&#…...
深入理解 Linux 权限控制机制
引言 在 Linux 系统中，权限控制是保障系统安全的核心机制。通过限制用户对文件和资源的访问，它能有效防止未授权操作，保护数据不被篡改或泄露。合理设置权限不仅有助于实现用户隔离和最小权限原则，还能降低系统被滥用或攻击的风险…...
)
技术书籍推荐(002)
20. 利用Python进行数据分析 免费 电子书 PDF 下载 书籍简介： 本书聚焦于使用Python进行数据处理和分析。详细介绍了Python中用于数据分析的重要库，如NumPy（提供高效的数值计算功能，包括数组操作、数学函数等）、panda…...
[SAP] SAP ERP用户参数设置
菜单路径 个人默认值的设置(数值，日期，时间) 个人参数值的设置 在给参数设置参数值后，当用户登录到对应功能页面时，这些参数值就会自动带出来 例如，我们分别对上述AAT，VKO以及VTW这3个参数设置了参数值&am…...
Python中，async和with结合使用，有什么好处？
在Python的异步编程中，async和with的结合使用（即async with）为开发者提供了一种优雅且高效的资源管理模式。这种组合不仅简化了异步代码的编写，还显著提升了程序的健壮性和可维护性。以下是其核心优势及典型应用场景的分析&#x…...
【信息系统项目管理师】第3章：信息系统治理 - 29个经典题目及详解
更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...
python实战项目69：基于Python爬虫的链家二手房数据采集方法研究
python实战项目69：链家二手房数据采集 一、项目需求1.1 房地产数据价值1.2 传统数据获取局限性1.3 技术可行性二、数据采集流程2.1 需求分析2.2 网页结构分析2.3 请求发送与反爬策略2.4 数据解析2.5 数据存储三、结论与展望四、完整代码一、项目需求 本文针对房地产数据分析需…...
PowerShell 脚本中文乱码处理
问题描述 脚本带中文，执行时命令行窗口会显示出乱码 示例 Write-Host "测试成功！"解决方法 问了DeepSeek，让确认是不是 UTF8 无 BOM 格式 事实证明方向对了 但是确认信息有偏差 改成 UTF8 with BOM 使用任意支持修改编码的文本…...
SpEL（Spring Expression Language）使用详解
SpEL（Spring Expression Language）是 Spring 框架中一种强大的表达式语言，支持在运行时动态查询和操作对象图。它与 Spring 生态深度集成，广泛应用于依赖注入、数据绑定、AOP、安全规则等场景。以下是其核心语法、应用场景及使用示…...
论文阅读与写作：《从探索到突破：解密科研和论文写作的思维密码》
文章目录 一、如何做科研1.科研的步骤2.课题选择3.快速入门一个新领域：读论文，先读综述(1)自己看论文的时候，每篇论文花3-5分钟记录一下自己的idea和一些瞬间的想法(2)高质量文献：顶会顶刊(3)如何检索 4.注重团队协作与学术交流5.…...
免费公共DNS服务器推荐
当自动获取的DNS或本地运营商的DNS出现问题，可能导致软件无法连接服务器。此时，手动修改电脑的DNS设置或许能解决问题。许多用户觉得电脑上网速度慢、游戏卡顿，归咎于DNS问题。确实，我们可以自行设置一个DNS来改善网络体验。不少用…...
CK-S650-PA60S半导体专用读写器|读写头与绿联RS232串口转接头联机测试说明
CK-S650-PA60S半导体专用读写器|读写头是一款国产替代欧姆龙V640系列，支持德州仪器公司(TI)制造的RI-TRP-DR2B、RI-TRP-WR2B-40低频玻璃管标签|射频标签读写，广泛应用半导体硅片盒、晶圆盒、花篮等RFID插件识别与产品追溯领域。 CK-S650-PA60S半导体专用…...
Babel 基础使用指南：从安装到编译的完整流程
Babel 是当今前端开发中不可或缺的工具，它允许开发者使用最新的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。本文将带你从零开始学习 Babel 的基础使用，涵盖安装、配置到实际编译的全过程。 1. 安装 Babel 和插件 首先&…...
uniapp-商城-52-后台 商家信息（商家信息数据，云对象使用）
1、概述 已经通过好几个篇幅来说明商家信息，包括logo、商家名称，地址，电话以及商家简介。通过表单组件和标签，以及我们的文件上传标签，都做了说明。（logo上传，用的文件上传组件是上传到公共的数…...
【我的创作纪念日】512
机缘 还记得 2023 年 12 月 15 日，我撰写了第 1 篇技术博客：《oracle 跟踪文件--审计日志》。从此，这平凡的一天，赋予了我不平凡的意义。在那一刻，我已在创作这趟旅程中出发，并立志将工作中的经验总结&…...
共享内存与信号量结合
在Linux系统中，进程间通信（IPC）和原子性是并发编程中的核心问题。以下是对这些概念的详细分步解释： 一、进程间通信（IPC）方法 1. 管道（Pipe） 匿名管道：用于父子进程等有…...
)
西门子PLC s7-1200工艺对象“轴”的应用(1)
1. 工艺对象 “ 轴 ” 的概念 在西门子 S7-1200 PLC 中，术语 “ 轴 ” 特指用 “ 轴 ” 工艺对象表示的驱动器工艺映像。 “ 轴 ” 工艺对象是用 户程序与驱动器之间的接口，用于接收用户程序中的运动控制命令、执行这些命令并监视其运行情况。 运动控制…...
ubuntu22.04在 Docker容器中安装 ROS2-Humble
22.04 安装 docker 容器并实现rviz功能 1 docker pull命令拉取包含ROS-Humble的镜像： docker pull osrf/ros:humble-desktop-full-jammy docker images验证该镜像是否拉取成功。 使用镜像osrf/ros:humble-desktop-full-jammy创建并运行容器 sudo docker run -it…...
【LwIP源码学习6】UDP部分源码分析
前言 本文对lwip协议栈里UDP部分的源码进行分析。将源码中最关键部分提取出来，梳理UDP部分的设计框架。 应用层例子 首先举一个应用层使用UDP的简单例子，如下： //第一步：申请套接字 sock socket(AF_INET, SOCK_DGRAM, 0); //…...
Python Cookbook-7.10 在 MySQL 数据库中储存 BLOB
任务 想把一个二进制的大对象(BLOB)存入MySQL数据库 解决方案 MySQLdb 模块并不支持完整的占位符，不过可以使用模块的escape_string 函数来解决: import MySQLdb,cPickle #连接到数据库，用你的本机来测试数据库，并获得游标 connection = MySQLdb.connect(db = "tes…...
LWIP的ICMP协议
ICMP协议简介 ICMP协议是一个网络层协议 背景：如果丢包了，IP协议并不能通知传输层是否丢包以及丢包的原因。因此我们需要ICMP协议来完成这样的功能 为什么需要ICMP协议 1，IP 协议本身不提供差错报告和差错控制机制来保证数据报递交的有效…...
Spring Web MVC响应
返回静态页面 第一步 创建html时，要注意创建的路径，要在static下面 第二步 把需要写的内容写到body内 第三步 直接访问路径就可以 返回数据ResponseBody RestController Controller ResponseBody Controller：返回视图 ResponseBody&…...
STM32智能窗帘系统：从零到一的开发实战
简介 智能窗帘控制系统是智能家居领域的经典应用，随着物联网技术的不断发展，其功能从简单的远程控制演变为具备环境感知、多设备联动和跨平台兼容的智能系统。本篇文章将全面解析基于STM32的智能窗帘系统开发方案，从硬件设计到软件实现，再到企业级扩展功能，提供完整的代码…...
第三方评测机构如何凭借专业公正提供高可靠性软件检测服务？
第三方评测机构与软件开发及使用单位保持独立，凭借其专业技能和公正立场，为企业提供多样化的软件检测服务。这些检测结果的可靠性极高，不仅有助于企业减轻负担，节省人力和物力资源，而且赢得了业界的普遍认可。下面&…...
相或为K（位运算）蓝桥杯（JAVA）
这个题是相或为k，考察相或的性质，用俩个数举例子，011001和011101后面的数不管和哪个数相或都不可能变成前面的数，所以利用这个性质我们可以用相与运算来把和k对应位置的1都积累起来，看最后能不能拼起来k如果能拼起来k那…...
X.509证书详解
文章目录 1. X.509证书基础1.1 什么是X.509证书1.2 X.509证书结构1.3 证书编码格式2. Java中的X509Certificate2.1 类层次结构2.2 核心方法3. 获取X509Certificate对象3.1 从文件加载证书3.2 从KeyStore获取证书3.3 从HTTPS连接获取证书4. 创建自签名证书5. 证书验证5.1 基本验…...
深入浅出：Spring Boot 中 RestTemplate 的完整使用指南
在分布式系统开发中，服务间通信是常见需求。作为 Spring 框架的重要组件，RestTemplate 为开发者提供了简洁优雅的 HTTP 客户端解决方案。本文将从零开始讲解 RestTemplate 的核心用法，并附赠真实地图 API 对接案例。 一、环境准备 在 Spring…...