Vue中的数据代理与数据劫持

devtools/2025/3/1 20:16:01/

在vm身上,有两个属性$data,_data,这两个属性都指向Vue底层的真实的data对象,

通过$data,_data获取各属性值,是不会走数据代理机制的

其中:_data是框架内部使用的,可以看做是私有的

$data,这是Vue框架对外公开的一个属性

也就是说Vue框架会将data中的数据实时通过Object.defineProperty拷贝一份放在$data以及_data身上,供vm去使用

1、Vue的数据代理
(1)、基本阐述

vue将_data中的所有数据属性通过Object.defineProperty添加到vm实例上,并且提供了getter和setter方法,于是通过vm直接获取数据的时候就调用getter,获取_data中的值,当修改的时候调用setter修改_data中的值

(2)数据代理有什么用呢?

既然vm上挂的属性就是_data中的数据代理,那么{{vm._data.name}}和{{name}}是等价的,{{vm_data.name='szk2'}}和{{name='szk2'}}也是等价的

所以就是为了写代码的方便,在{{}}直接写数据,或者直接修改就能操作到_data中

2、数据劫持

数据劫持就是将vue代码里我们写的data加工了一下,变成_data,让每个属性有了getter和setter

vue通过监听者observer来监听data中的数据,通过getter和setter监听者里面的方法,监听数据的读取与修改,当修改属性的时候,setter被调用,在setter方法中就会让订阅者执行重新解析模板的操作,从而改变了页面

先看看我们写的data和加工之后的data有什么区别

3、总结

数据劫持:

创建Vue实例vm,vm身上会有_data属性,_data通过劫持data配置项,再通过defineProperty的getter和setter,得到的响应式的数据。把vue中的data数据拦截改写成具有getter和setter形式的_data,就是数据劫持。

数据代理

vm中_data中的数据又通过数据代理(也是通过defineProperty的getter和setter实现),放置到vm身上,vm可以通过getter方法,setter方法直接使用_data中的数据,方便书写数据

步骤:

1-把vue实例中的data,通过Object.defineProperty的setter和getter进行数据劫持,使得data改写为到_data(使得数据改写为响应式的数据,具有getter和setter);

2-通过vm进行数据代理,代理_data


http://www.ppmy.cn/devtools/163720.html

相关文章

HarmonyOS学习第10天: 解锁线性布局的魔法排列

线性布局初相识 在 HarmonyOS 开发的奇妙旅程中,界面布局就像是搭建房屋的基石,而线性布局(LinearLayout)无疑是其中最为常用且基础的一块。它是构建有序界面排列的关键,通过线性容器 Row 和 Column,能够让…

Harmony os next~鸿蒙应用开发入门教程

鸿蒙应用开发入门教程 基础准备与环境搭建 1. 了解鸿蒙系统 1.1 核心理念学习 HarmonyOS(鸿蒙系统)是华为推出的全场景分布式操作系统,其核心特点如下: 分布式能力 设备协同:手机、平板、智能手表、IoT设备等可无…

ctfshow——域名TXT记录泄露

提示: 域名其实也可以隐藏信息,比如ctfshow.com 就隐藏了一条信息 5月30日 修复,目标地址为flag.ctfshow.com 我们可以从DNS查询工具来搜索它的TXT记录: Jsons域名解析记录在线工具 ITDOG域名解析在线工具 任意一个网站都可以帮…

记录此刻:历时两月,初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计!

背景 为满足实验室横向项目需求,在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为:通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。 实现过程 调研 花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…

STM32--SPI通信讲解

前言 嘿,小伙伴们!今天咱们来聊聊STM32的SPI通信。SPI(Serial Peripheral Interface)是一种超常用的串行通信协议,特别适合微控制器和各种外设(比如传感器、存储器、显示屏)之间的通信。如果你…

Zookeeper(80)Zookeeper的常见问题有哪些?

Zookeeper作为分布式系统的协调服务,常见的问题主要集中在配置、性能、连接管理、数据一致性和节点故障等方面。以下是一些常见问题及其详细解决方法和代码示例。 1. 配置问题 问题描述 配置不当可能导致 Zookeeper 集群无法正常启动或运行效率低下。 解决方法 …

力扣-动态规划-139 单词拆分

思路 dp数组定义:用wordDict数组可以完成不超过j的字符串的可能为dp[j]递推公式: tmp s.substr(j - wordDict[i].size(), wordDict[i].size()); dp[j] (dp[j - wordDict[i].size()] && wordDict[i] tmp) || dp[j]; dp数组初始化:…

手写RPC框架-V1版本

配合源代码使用体验更佳 Version 1.0一、Provider模块1.ProviderExample2.UserServiceImplpom.xml 二、Consumer模块1.ConsumerExample3.UserServiceProxy(静态代理)pom.xml 三、RPC模块Proxy包1.ServiceProxy2.ServiceProxyFactory Registry包LocalRegi…