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

Vue 的数据代理机制

news 来源：原创 2025/7/19 8:42:13

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对象的属性名命名的时候，不能以_或$开始。

相关文章：

Vue 的数据代理机制

2025/4/22 向 一、什么是数据代理机制 通过访问代理对象的属性&#xff0c;来间接访问目标对象的属性&#xff0c;数据代理机制的实现需要依赖Object.defineProperty()方法。 如下所示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><…...

编程日记 2025/7/19 8:42:13

Android-KeyStore安全的存储系统

​ 在 Android 中&#xff0c;AndroidKeyStore 是一个安全的存储系统&#xff0c;用于存储加密密钥。它提供了一种安全的方式来生成、存储和管理密钥&#xff0c;而无需将密钥暴露给应用程序本身。以下是如何使用 AndroidKeyStore 的基本步骤和示例代码。 检查 AndroidKeyStor…...

编程日记 2025/7/19 8:39:07

部署私有gitlab网站

以下是建立私有 GitLab 代码版本维护平台的完整步骤&#xff0c;涵盖环境准备、安装配置、初始化及日常管理&#xff0c;适用于企业/团队内部代码托管&#xff1a; 一、环境准备 1. 服务器要求&#xff08;最低配置&#xff09; 用途CPU内存存储系统要求小型团队&#xff08…...

编程日记 2025/7/19 8:36:02

（区间 dp）洛谷 P6879 JOI2020 Collecting Stamps 3 题解

题意 给定一个周长为 L L L 的圆&#xff0c;从一个点出发&#xff0c;有 N N N 个黑白熊雕像&#xff0c;编号为 1 1 1 到 N N N&#xff0c;第 i i i 个雕像在顺时针 X i X_i Xi​ 米处&#xff0c;如果你没有在 T i T_i Ti​ 秒内收集到这个黑白熊雕像&#xff0c;那…...

编程日记 2025/7/19 8:31:38

AtCoder 第402场初级竞赛 A~E题解

A CBC 【题目链接】 原题链接：A - CBC 【考点】 枚举 【题目大意】 找出所有的大写字母 【解析】 遍历字符串，判断是否为大写字母，如果是则输出。 【难度】 GESP二级 【代码参考】 #include <bits/stdc++.h> using namespace std;int main() {string s;ci…...

编程日记 2025/7/19 8:32:37

驱动开发硬核特训 · Day 17：深入掌握中断机制与驱动开发中的应用实战

&#x1f3a5; 视频教程请关注 B 站&#xff1a;“嵌入式 Jerry” 一、前言 在嵌入式驱动开发中&#xff0c;“中断”几乎无处不在。无论是 GPIO 按键、串口通信、网络设备&#xff0c;还是 SoC 上的各种控制器&#xff0c;中断都扮演着核心触发机制的角色。对中断机制掌握程度…...

编程日记 2025/7/19 8:34:31

深入理解依赖、Jar 包与 War 包：Java 开发基石探秘

一、引言 在 Java 开发的广袤天地里&#xff0c;依赖管理如同建筑的基石&#xff0c;默默支撑着项目的稳定构建与运行。而 Jar 包和 War 包&#xff0c;作为 Java 应用的常见打包形式&#xff0c;各自承载着不同的使命。本文将深入探讨依赖的重要性&#xff0c;并清晰解说 Jar…...

编程日记 2025/6/29 9:35:58

01.Python代码Pandas是什么？pandas的简介

01.Python代码Pandas是什么&#xff1f;pandas的简介 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是pandas的使用语法。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性&#xff0c;希望对您有用~ pyth…...

编程日记 2025/7/19 8:36:02

国产紫光同创FPGA实现SDI视频编解码+图像缩放，基于HSSTHP高速接口，提供2套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目本博已有的 SDI 编解码方案本方案在Xilinx--Artix7系列FPGA上的应用本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用本方案在Xilinx--U…...

编程日记 2025/7/19 8:42:13

25.4.22学习总结

如何通过好友列表对聊天框的切换 首先&#xff0c;我们知道&#xff0c;你的好友列表是用ListView组件实现的&#xff0c;那么&#xff0c;接下来&#xff0c;我们将开始讲解如何实现切换。 一、改造数据结构 如果你是跟着我的上一篇文章做的话&#xff0c;应该需要修改一些的…...

编程日记 2025/7/19 8:33:36

Agent智能体ReAct机制深度解读：推理与行动的完美闭环

一、从Chain-of-Thought到ReAct的范式演进 1.1 传统决策机制的局限 #mermaid-svg-Jf3ygvgHcGciJvX8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Jf3ygvgHcGciJvX8 .error-icon{fill:#552222;}#mermaid-svg-Jf3y…...

编程日记 2025/6/29 10:56:46

UnityDots学习（四）

官方案例HelloCube和Tank学习研究&#xff1a; HelloCube: 通用部分&#xff1a; 使用Authoring根据Inspector的勾选添加为Entity添加不同Component。然后每个System会根据实体添加的Component运行不同的System逻辑。 1. MainThread 简单构造System 先看System接口定义&am…...

编程日记 2025/6/29 10:58:14

Debian 12.10 root 登录失败，两步解决！

大家好&#xff0c;这里是 DBA学习之路&#xff0c;专注于提升数据库运维效率。 前言 今天看到 debian 正式发布 12.10&#xff0c;安装完成后发现无法登录 root 用户&#xff1a; 这里我一开始怀疑是 root 密码错了&#xff0c;所以改了一下 root 密码&#xff0c;忘记 root …...

编程日记 2025/6/29 11:06:21

AI大模型：（二）2.3 预训练自己的模型

目录 1.预训练原理 2.预训练范式 1.未标注数据 2.标注数据 3.有正确答案、也有错误答案 3.手撕transform模型 3.1.transform模型代码 3.2.训练数据集 3.3.预训练 3.4.推理 4.如何选择模型 5.如何确定模型需要哪种训练 大模型预训练（Large-scale Pre-training…...

编程日记 2025/6/29 11:29:41

【C语言】初阶算法相关习题（一）

个人主页 文章目录 ⭐一、数字在升序数组中出现的次数&#x1f3e0;二、整数转换&#x1f680;三、至少是其他数字两倍的最大数&#x1f3dd;️四、字符个数的统计&#x1f384;五、自除数&#x1f3a1;六、除自身以外数组的乘积&#x1f389;七、两个数组的交集 ⭐一、数字在…...

编程日记 2025/6/29 10:17:58

WITH 临时表 SQL优化

在 SQL 优化中&#xff0c; 临时表&#xff08;CTE&#xff0c;Common Table Expression&#xff0c;公共表表达式&#xff09; 是一种强大的工具&#xff0c;它通过定义一个临时的结果集&#xff08;可以理解为 “虚拟表”&#xff09;&#xff0c;让复杂查询更易读、更高效&a…...

编程日记 2025/7/16 14:33:22

Go语言中 defer 使用场景及深度注意事项指南

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/6/29 10:58:59

第33周JavaSpringCloud微服务 面试题

一、项目面试 面试中介绍项目的方法 在面试过程中&#xff0c;若被问及相关项目&#xff0c;为提升通过几率&#xff0c;应着重介绍项目的功能点和架构升级内容。确保将项目的亮点讲透讲精彩&#xff0c;这对获取 offer 至关重要。 1. 项目架构 项目整体架构概述 项目整体…...

编程日记 2025/6/29 11:15:01

鸿蒙开发：Swiper轮播图

鸿蒙Swiper组件详解 一、Swiper组件概述 Swiper是鸿蒙(HarmonyOS)系统中提供的一个滑动容器组件&#xff0c;它允许用户通过手指滑动来切换子组件&#xff08;通常是页面或图片&#xff09;&#xff0c;实现轮播图、引导页、图片浏览器等常见UI效果。 说明 该组件从API versi…...

编程日记 2025/6/29 10:31:34

Go语言之sync包 WaitGroup的使用和底层实现

在 Go 语言里&#xff0c;sync 包中的 WaitGroup 是一个实用工具&#xff0c;用于等待一组 goroutine 完成任务。其核心原理是通过内部维护一个计数器&#xff0c;该计数器初始值为 0&#xff0c;每启动一个新的 goroutine 就将计数器加 1&#xff0c;每个 goroutine 完成任务后…...

编程日记 2025/7/9 14:54:04

7N60-ASEMI无人机专用功率器件7N60

编辑&#xff1a;LL 7N60-ASEMI无人机专用功率器件7N60 型号&#xff1a;7N60 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 最大漏源电流&#xff1a;7A 漏源击穿电压&#xff1a;600V 批号&#xff1a;最新 RDS&#xff08;ON&#xff09;Max&#xff1a;1.20Ω …...

编程日记 2025/7/11 8:16:32

SystemV-消息队列与责任链模式

一、SystemV 消息队列 1. 消息队列API Ftok 函数定义&#xff1a; key_t ftok(const char *pathname, int proj_id);函数作用&#xff1a; 获取唯一的key值标识符&#xff0c;用于标识系统V消息队列。参数解释&#xff1a; pathname&#xff1a;有效的文件路径&#xff08;需…...

编程日记 2025/7/18 15:28:52

Ubuntu与Linux的关系

Linux 是一个 操作系统内核。它是一个类 Unix 系统&#xff0c;免费、开源&#xff0c;许多不同的操作系统&#xff08;叫“发行版”&#xff09;都是基于 Linux 内核构建的。 Ubuntu 是一个 基于 Linux 内核的操作系统发行版。它是目前最流行、最易用的 Linux 发行版之一&…...

编程日记 2025/6/29 9:36:43

同时支持windows和Linux的NFC读写器web插件

一个网站集成了NFC读写器的功能&#xff0c;如何才能跨系统运行呢&#xff0c;既要在windows系统下正常运行&#xff0c;也需要在银河麒麟&#xff0c;统信UOS等信创系统下运行。 友我科技NFC读写器web插件很好的解决了这个问题&#xff0c;在客户端不仅支持windows系统&#x…...

编程日记 2025/7/2 11:07:14

突破AI检测边界：对抗技术与学术伦理的终极博弈

随着GPT-4、Claude等大模型的文本生成能力突破人类写作水平&#xff0c;AI检测工具与对抗技术的博弈已进入白热化阶段。本文深入解析基于对抗训练的文本风格混淆网络如何突破GPTZero最新防御体系&#xff0c;探讨OpenAI多模态内容溯源系统引发的技术升级&#xff0c;并针对学术…...

编程日记 2025/6/29 11:24:50

pg数据库删除自建表空间

1. tbs_sjzx已经创建&#xff08;略&#xff09; pg数据库删除自己创建表空间;--查看表空间相关表 SELECT * FROM pg_tablespace; SELECT relname FROM pg_class WHERE reltablespace (SELECT oid FROM pg_tablespace WHERE spcname tbs_sjzx); SELECT * FROM pg_tables WHE…...

编程日记 2025/6/29 9:36:00

C++ 学习指南

new 关键字 #include <iostream> using namespace std;int* func() {// 在堆区创建int* p new int(10); return p; }void test01(void) {int *p func();cout << *p << endl;cout << *p << endl;cout << *p << endl;delete p;// 这…...

编程日记 2025/7/19 7:23:43

Scribe: 一个非常方便的操作文档编写工具

在日常生活中&#xff0c;当我们需要指导别人使用一个软件/web应用时&#xff0c;我们常常需要按流程对工具进行操作&#xff0c;走一遍主要功能&#xff0c;然后针对每一步进行截图&#xff0c;并附上操作说明。往往这样一套流程走下来&#xff0c;就会花费很长的时间。那么有…...

编程日记 2025/6/29 12:16:58

数据结构与算法-顺序表应用

一.通讯录的创建 首先我们要理解的是通讯录本身就是以顺序表为底层的 只不过顺序表中的数组&#xff0c;这里我们是用结构体来替代&#xff0c;用来存储用户的信息 由于是通讯录的本质就是顺序表&#xff0c;所以顺序表的任何方法它都能套用 Contact.h: #pragma once #def…...

编程日记 2025/6/29 11:26:49

DeepSeek系列（5）：助力数据分析

数据解读与可视化建议 在数据驱动的商业环境中，有效解读数据并将其转化为直观可视化结果至关重要。DeepSeek作为强大的AI助手，可以帮助您从海量数据中提取洞见并提供专业的可视化建议。 DeepSeek在数据解读中的优势 DeepSeek可以通过以下方式帮助您更高效地解读数据： 上下…...

编程日记 2025/6/29 11:38:40

虚幻基础：动画k帧

文章目录 动画k帧&#xff1a;调整骨骼的变换达到自己想要的效果步骤打开动画原始文件选中骨骼调整到目标变换添加关键帧时间&#xff1a;自动添加到停留的那一帧数值&#xff1a;自动填写为调整后的数值 注释数值与骨骼细节面板上的数值并不对应&#xff0c;但是同样的效果为什…...

编程日记 2025/6/29 9:36:21

使用 LlamaIndex Workflows 与 Elasticsearch

作者&#xff1a;来自 Elastic Jeffrey Rengifo 在本文中&#xff0c;你将学习如何利用 LlamaIndex Workflows 与 Elasticsearch 快速构建一个使用 LLM 的自过滤搜索应用程序。 LlamaIndex Workflows 提出了一种不同的方式来处理将任务拆分给不同 agent 的问题&#xff0c;它引…...

编程日记 2025/6/29 9:36:06

相对论大师-记录型正负性质BFS/图论-链表/数据结构

看到这一题我的第一个思路就是双向bfs 起点是a&#xff0c;终点还是a&#xff0c;但是flag是相反的&#xff08;“越”的方向&#xff09; tip1.可以用字典vis来存储flag 刚开始初始化时vissta,visend一个对应0、1 要求两个队列相…...

编程日记 2025/7/13 19:58:02

代理设计模式：从底层原理到源代码的详细解释

代理设计模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过创建一个代理对象来控制对目标对象的访问。代理对象充当客户端和目标对象之间的中介&#xff0c;允许在不修改目标对象的情况下添加额外的功能&#xff08;如权限控制、日志记录、延迟…...

编程日记 2025/6/29 10:05:34

EasyRTC音视频实时通话：打造高清低延迟的远程会议新生态

一、项目背景​ 随着数字化办公的普及&#xff0c;远程会议成为企业、教育机构、政府部门等组织跨地域协作沟通的重要方式。传统远程会议系统在音视频质量、低延迟传输、多平台兼容性等方面存在不足&#xff0c;难以满足用户对高清、流畅、稳定会议体验的需求。EasyRTC作为一款…...

编程日记 2025/6/29 9:36:07

零基础上手Python数据分析 (21)：图表选择困难症？常用可视化类型详解与应用场景指南

写在前面 —— 告别盲目绘图，理解图表语言，为你的数据找到最佳“代言人” 在前面几篇博客中，我们已经学习了使用 Matplotlib 和 Seaborn 这两大 Python 可视化利器来绘制各种图表。我们掌握了创建折线图、柱状图、散点图、箱线图等常用图表的技术。然而，仅仅知道 如何 绘…...

编程日记 2025/6/29 12:23:42

HarmonyOS Next 编译之如何使用多目标产物不同包名应用

引言 在日常的开发中涉及到多签名和多产物构建输出时手动切换签名文件和包名在开发中是容易出错且费时的一个操作&#xff0c;鸿蒙提供了自定义hvigor插件和多目标产物构建&#xff0c;那我们可以通过hvigor插件来动态修改不同项目配置所需要的代码&#xff0c;保证一套代码在…...

编程日记 2025/6/29 9:36:10

Oracle Database Resident Connection Pooling (DRCP) 白皮书阅读笔记

本文为“Extreme Oracle Database Connection Scalability with Database Resident Connection Pooling (DRCP)”的中文翻译加阅读笔记。觉得是重点的就用粗体表示了。 白皮书版本为March 2025, Version 3.3&#xff0c;副标题为&#xff1a;Optimizing Oracle Database resou…...

编程日记 2025/7/8 15:48:22

Sharding-JDBC 系列专题 - 第七篇：Spring Boot 集成与 Sharding-Proxy 简介

Sharding-JDBC 系列专题 - 第七篇：Spring Boot 集成与 Sharding-Proxy 简介 本系列专题旨在帮助开发者全面掌握 Sharding-JDBC，一个轻量级的分布式数据库中间件。本篇作为系列的第七篇文章，将重点探讨 Sharding-JDBC 与 Spring Boot 的集成，以及 Sharding-Proxy 的基本概念…...

编程日记 2025/6/29 10:25:57

day30 学习笔记

文章目录 前言一、凸包特征检测1.穷举法2.QuickHull法 二、图像轮廓特征查找1.外接矩形2.最小外接矩形3.最小外接圆 前言 通过今天的学习&#xff0c;我掌握了OpenCV中有关凸包特征检测&#xff0c;图像轮廓特征查找的相关原理和操作 一、凸包特征检测 通俗的讲&#xff0c;凸…...

编程日记 2025/7/8 3:01:11

变更管理 Change Management

以下是关于项目管理中 变更管理 的深度解析，结合高项（如软考高级信息系统项目管理师）教材内容，系统阐述变更管理的理论框架、流程方法及实战应用： 一、变更管理的基本概念 1. 定义 变更管理是对项目范围、进度、成本、质量等基准的修改进行系统性控制的过程，旨在确保变…...

编程日记 2025/7/15 11:58:52

PaddlePaddle线性回归详解：从模型定义到加载，掌握深度学习基础

目录 前言一、paddlepaddle框架的线性回归1.1 paddlepaddle模型的定义方式1.1.1 使用序列的方式 nn.Sequential 组网1.1.2 使用类的方式 class nn.Layer组网1.2 数据加载 1.3 paddlepaddle模型的保存1.3.1 基础API保存1.3.2 高级API模型的保存1.3.2.1 训练fit进行保存1.3.2.2 …...

编程日记 2025/7/9 14:08:07

几种Word转换PDF的常用方法

使用 Word 内置功能 步骤&#xff1a;打开需要转换的 Word 文档&#xff0c;点击左上角的 “文件” 菜单&#xff0c;选择 “另存为”&#xff0c;选择保存位置&#xff0c;在 “保存类型” 下拉菜单中选择 “PDF”&#xff0c;点击 “保存” 按钮即可。适用场景&#xff1a;适…...

编程日记 2025/6/29 9:36:01

【美化vim】

美化vim 涉及文件一个例子 涉及文件 ~/.vimrc修改这个文件即可 一个例子 let mapleader ,set number " 显示行号"set relativenumber " 显示相对行号set incsearch " 实时开启搜索高亮set hlsearch " 搜索结果高亮set autoinden…...

编程日记 2025/6/29 11:42:24

【git】subtree拆分大的git库到多个独立git库

【git】subtree拆分大的git库到多个独立git库 一、拆分一个子目录为独立仓库 # 这就是那个大仓库 big-project git clone gitgithub.com:tom/big-project.git cd big-project# 把所有 eiyo 目录下的相关提交整理为一个新的分支 eiyo_code git subtree split -P eiyo -b eiyo_…...

编程日记 2025/7/18 14:52:01

Elasticsearch 使用reindex进行数据同步或索引重构

1、批量复制优化 POST _reindex {"source": {"index": "source","size": 5000},"dest": {"index": "dest"} }2、提高scroll的并行度优化 POST _reindex?slices5&refresh {"source": {…...

编程日记 2025/7/17 14:25:54

JDBC对数据的增删改查操作：从Statement到PrepareStatement

目录 一 . Statement简介 二. 通过Statement添加数据 1. 创建表 2. 通过Statement添加数据 a. 获取连接 b. 获取Statement对象 c. 定义SQL语句 d. 执行SQL语句 e. 关闭资源 3. 通过Statement修改数据 4. 通过Statement删除数据 三. PreparedStatement的使用(重点) …...

编程日记 2025/7/10 12:29:22

智体OS上线智体管家：对话式智体应用商店访问

DTNS.OS 更新公告 - 智体管家功能发布 &#x1f31f; 2024年4月22日重要更新&#xff1a;智体管家正式上线 智体管家是智体OS推出的全新功能&#xff0c;旨在让用户通过自然对话轻松发现和使用智体节点上的所有智体应用&#xff0c;相当于为智体网络打造了一个智能化的应用商…...

编程日记 2025/6/29 10:44:28

vscode flutter 插件, vscode运行安卓项目，.gradle 路径配置

Flutter Flutter Widget Snippets Awesome Flutter Snippets i dart-import Dart Data Class Generator Json to Dart Model Dart Getters And Setter GetX Snippets GetX Generator GetX Generator for Flutter flutter-img-syncvscode运行安卓项目&#xff0c;.gradle 路径配…...

编程日记 2025/6/29 10:41:46

dolphinscheduler实现(oracle-hdfs-doris)数据ETL

dolphinscheduler执行 完整脚本(自行替换相关变量)配置文件conf配置文件解析脚本转base64脚本 完整脚本(自行替换相关变量) user_olsh conf/getInfo.sh Oracle user conf/databases.conf password_olsh conf/getInfo.sh Oracle password conf/databases.conf dblink_olsh conf…...

编程日记 2025/6/29 12:17:49