Vue数据代理的原理

一、Object.defineProperty方法

我们可以使用一个Object.defineProperty方法给一个对象添加属性,并对该属性进行权限设置

语法格式如下:

Object.defineProperty(对象 , "属性名" , { // 配置项 })

let Person = {name:"寻霖",age:18
}
Object.defineProperty(Person, "gender", {value:"女",enumerable:true,  // 控制属性是否可以枚举,默认值是falsewritable:true,  // 控制属性是否可以被修改,默认值是falseconfigurable:true  // 控制属性是否可以被删除,默认值是false
})

 我们可以利用Object.defineProperty方法中的 get() 和 set() 配置项连接一个变量和一个对象中的属性值,也就是变量改变属性值也变化,属性值变化对象也变化,就和MVVM模型很像。

let num = 18;
let Person = {name:"寻霖",
}
Object.defineProperty(Person, "age", {// 当有人读取Person中的age属性时,get函数(getter)就会被调用,且返回值就是age的值get() {console.log("age属性被读取了");return num;},// 当有人修改Person中的age属性时,set函数(setter)就会被调用,且会收到修改后的值set(value) {console.log("age属性被修改了,且修改值为"+value);num = value;}
})

二、理解数据代理

数据代理就是一个对象代理对另一个对象中属性的操作(读/写)。

比如在如下代码中,我们在obj2对象中代理obj1对象的x属性:

let obj1 = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2, "x", {get() {return obj1.x;},set(value) {obj1.x = value;}
})

三、Vue中数据代理的原理

首先我们先了解数据代理的作用:使我们编写代码简便

我们的Vue身上之所以有在data中编写的属性,就是使用的数据代理

我们在data中编写的数据全被Vue存在了_data中:

然后Vue通过Object.defineProperty方法使一个对象(Vue对象)在另一个对象(_data对象)中完成对数据的代理:

我们可以进行简单的验证:

这么做就是为了我们在编写模板字符串时只需要写 {{name}} 而不是 {{_data.name}} 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/153315.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构:排序- 插入排序(插入排序and希尔排序) , 选择排序(选择排序and堆排序) , 交换排序(冒泡排序and快速排序) , 归并排序

目录 前言 复杂度总结 预备代码 插入排序 1.直接插入排序: 时间复杂度O(N^2) \空间复杂度O(1) 复杂度(空间/时间): 2.希尔排序: 时间复杂度 O(N^1.3~ N^2) 空间复杂度为O(1) 复杂度(空间/时间&#…

ctfshow web入门 php特性 web131-web135

1.web131 和上题一样差不多,正则最大回溯次数绕过 import requests url"" data{f:very*250000360Dctfshow } rrequests.post(url,datadata) print(r.text)2.web132 通过扫描发现robots.txt,访问/admin发现源码 &&和||都是短路运算符 只要满足co…

PyCharm搭建Scrapy环境

Scrapy入门 1、Scrapy概述2、PyCharm搭建Scrapy环境3、Scrapy使用四部曲4、Scrapy入门案例4.1、明确目标4.2、制作爬虫4.3、存储数据4.4、运行爬虫 1、Scrapy概述 Scrapy是一个由Python语言开发的适用爬取网站数据、提取结构性数据的Web应用程序框架。主要用于数据挖掘、信息处…

景联文科技:AI大模型强势赋能,助力自动驾驶迭代升级

我国一直以来都将自动驾驶作为新兴产业发展的重点领域之一,工信部等相关部委出台了一系列自动驾驶发展战略、规划和标准,一些地方政府也在积极开展关于自动驾驶的地方立法,为自动驾驶技术的研发和应用提供更加具体的法律保障。例如&#xff0…

浅谈风力发电场集中监控系统解决方案

作为清洁能源之一,风力发电场近几年装机容量快速增长。8月17日,国家能源局发布1-7月份全国电力工业统计数据。截至7月底,全国累计发电装机容量约27.4亿千瓦,同比增长11.5%。其中,太阳能发电装机容量约4.9亿千瓦&#x…

【鼠标右键菜单添加用VSCode打开文件或文件夹】

鼠标右键菜单添加用VSCode打开文件或文件夹 演示效果如下: 右击文件 或右击文件夹 或在文件夹内空白处右击 方法一:重装软件 重装软件,安装时勾选如图所示方框(如果登录的有账号保存有配置信息可以选择重装软件&#xff0c…

Windows服务器获取本地文件夹文件

1、直接复制粘贴 通过远程连接到这个服务器,然后本机到服务器能直接粘贴复制文件上去 注:首先服务器要先开启远程桌面哦 2、Windows远程连接 有的不能复制粘贴的,可以用第二种方法。 ①、windowsR,输入mstsc ②、点击“选项”按钮&#x…

OpenWRT配置SFTP远程文件传输,实现数据安全保护

文章目录 前言1. openssh-sftp-server 安装2. 安装cpolar工具3.配置SFTP远程访问4.固定远程连接地址 前言 本次教程我们将在OpenWRT上安装SFTP服务,并结合cpolar内网穿透,创建安全隧道映射22端口,实现在公网环境下远程OpenWRT SFTP&#xff…

万万没想到,我用文心一言开发了一个儿童小玩具

最近关注到一年一度的百度世界大会今年将于10月17日在北京首钢园举办,本期大会的主题是“生成未来(PROMPT THE WORLD)”。会上,李彦宏会做主题为「手把手教你做AI原生应用」的演讲,比较期待 Robin 会怎么展示。据说&am…

使用枚举Enum代替Integer类型

一、问题 虽然项目使用了枚举Enum,来替代原来的Constant常量类,但DTO对象的入参仍然是Integer类型,顶多再加个 {link } 说明它是对应哪个枚举。 但这仍然无法限制传入的值不会乱传。要是有人不写{link } 或者{link } 写错,那更死…

host配置

配置host文件的作用主要是用于自定义域名与IP地址之间的映射关系。Host文件是一个操作系统用于将人类可读的域名(例如:www.example.com)映射到IP地址(例如:192.168.1.1)的文件。当你在浏览器中输入一个网址…

【小工具-生成合并文件】使用python实现2个excel文件根据主键合并生成csv文件

1 小工具说明 1.1 功能说明 一般来说,我们会先有一个老的文件,这个文件内容是定制好相关列的表格,作为每天的报告。 当下一天来的时候,需要根据新的报表文件和昨天的报表文件做一个合并,合并的时候就会出现有些事新增…

H5逆向之远程RPC

引言前一讲说过H5 怎么去抓包,逆向分析。其中说到RPC。这一节详细讲一下。有一种情况,JS 比较复杂,混淆的厉害。 这个时候就用到RPC。原理就是,hook web 浏览器,直接调用js 里边的方法。 Node 服务。为什么用到Node 服务,先来看下这架构 Node 对外提供各种接口,外部可以…

基于乌燕鸥优化的BP神经网络(分类应用) - 附代码

基于乌燕鸥优化的BP神经网络(分类应用) - 附代码 文章目录 基于乌燕鸥优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.乌燕鸥优化BP神经网络3.1 BP神经网络参数设置3.2 乌燕鸥算法应用 4.测试结果&#x…

【pycharm】sqlite3:Driver class ‘org.sqlite.JDBC‘ not found

pycharm 连接sqlite3的时候,点击:Test Connection 提示:Driver class ‘org.sqlite.JDBC’ not found. 点击:Download missing driver files 点击:Test Connection 这样就ok了;

VR全景拍摄酒店,为用户消除“不透明度”

近日在各大社交平台上,出现了不少吐槽国庆期间酒店价格太贵的帖子,而一些热门旅游地的度假酒店、网红民宿的热门房型已经“一房难求”,这就出现酒店房型与预定房型不同的现象出现,VR全景拍摄技术同酒店行业的结合,就可…

linux中Crontab定时参数

注:图片转载于 点我进入图片出处 * * * * * sh /data/var/test.sh >> test_crontab_log.log分钟 0~59 0表示没分周 小时 0~23 0表示每小时 天 1~31 *表示每天 月 1~12 *表示每月 周 0~7 */0/7表示每周

PDF编辑和OCR文字识别工具ABBYY FineReader PDF

ABBYY FineReader PDF是一款专业的OCR文字识别和PDF编辑工具,可以帮助用户更好地处理和管理PDF文档。以下是ABBYY FineReader PDF的一些特点: 1. 文字识别精准:ABBYY FineReader PDF具有强大的OCR文字识别功能,可以将PDF中的文字…

【香橙派-OpenCV-Torch-dlib】TF损坏变成RAW格式解决方案及python环境配置

前言 本文将介绍在香橙派(Orange Pi)开发板上进行软件配置和环境搭建的详细步骤,以便运行Python应用程序。这涵盖了以下主要内容: 获取所需软件:提供了香橙派操作系统和balenaEtcher工具的下载链接,以确保…

Netty通信在中间件组件中的广泛使用-Dubbo3举例

Netty是一个高性能异步IO通信框架,封装了NIO,对各种bug做了很好的优化解决。所以很多中间件底层的通信都会使用Netty,比如说:Dubbo3,rocketmq,ElasticSearch等。 比方说,我们使用dubbo作为rpc跨…