vue2 双向数据绑定的实现及原理

Oject.defineProperty() 是 JavaScript 中用于定义或修改对象的属性的方法,可以控制属性的特性(如可枚举性、可配置性、可写性等)
Object.defineProperty(obj, prop, descriptor)
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:属性的描述符对象,包含属性的特性设置。
descriptor 对象包含以下属性:
configurable:属性是否可配置,默认为 false。
enumerable:属性是否可枚举,默认为 false。
value:属性的值,默认为 undefined。
writable:属性是否可写,默认为 false。
get:获取属性值的函数。
set:设置属性值的函数

	<input type="text" placeholder="请输入" id="aInput" /><span id="txtName"></span>
```javascript
//eg:1 数据促使视图发生变化let aInput = document.getElementById("aInput")let label = document.getElementById("txtName")let obj = {name: ''}Object.defineProperty(obj, 'name', {get() {console.log("get")return obj.name //返回值将被用作该属性的值},set(val) { //当该属性被赋值时,将调用此函数,并带有一个参数(要赋给该属性的值)console.log("set", val)aInput.value = vallabel.innerHTML = val}})aInput.oninput = function() {obj.name = aInput.value}// setTimeout(() => {// 	obj.name = '哈哈改变了'// }, 2000)//eg:2let bvalue = 50let o = {}Object.defineProperty(o, 'b', {get() {return bvalue},set(val) {console.log("Seto", val)bvalue = valconsole.log("bvalue", bvalue)label.innerHTML = bvalue}})console.log("o", o.b)setTimeout(() => {o.b = 233333333333}, 1500)console.log("o", o.b)console.log("bvalue", bvalue);

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

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

相关文章

P7222 [RC-04] 信息学竞赛

文章目录 题目[RC-04] 信息学竞赛题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 思路AC代码 题目 [RC-04] 信息学竞赛 题目描述 小 R 今天学习了余角有关的数学知识&#xff0c;请你帮帮他计算一个角的余角吧&#xff01; 一个角的余角的计算公式如下&#…

SHELL编程(一)

目录 一、 Linux操作系统&#xff08;一&#xff09;内核与操作系统&#xff08;二&#xff09;操作系统的功能 二、Linux高级命令&#xff08;一&#xff09; 离线安装 dpkg1. 安装2. 使用3. 查看安装详细信息4. 安装路径5. 不完全删除6. 完全删除 &#xff08;二&#xff09;…

KNN算法用于回归分析

生成数据集 from sklearn.datasets import make_regression import matplotlib.pyplot as plt# 生成特征数量为1&#xff0c; 噪音为50的数据集 X, y make_regression(n_features1, n_informative1, noise50, random_state8)# 散点图 plt.scatter(X, y, c"orange",…

什么是TCP的粘包、拆包问题?

一、问题解析 TCP粘包和拆包问题是指在进行TCP通信时&#xff0c;因为TCP是面向流的&#xff0c;所以发送方在传输数据时可能会将多个小的数据包粘合在一起发送&#xff0c;而接收方则可能将这些数据包拆分成多个小的数据包进行接收&#xff0c;从而导致数据接收出现错误或者数…

uniapp swiper添加点击切换 上一张 下一张

<view click"switchPrev"><text>上一张</text> </view> <view click"switchNext"><text>下一张</text> </view> <swiper class"swiper" circular :current"current"> data() {…

MySQL数据库练习二

素材&#xff1a;表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如部门号、工资、职工号、参加工作等 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10) NOT NULL DE…

欢乐钓鱼大师攻略大全,新手钓鱼入坑必备攻略!

《欢乐钓鱼大师》是一款深受玩家喜爱的钓鱼手游&#xff0c;在游戏中&#xff0c;玩家可以通过升级和更换鱼竿来享受钓鱼的乐趣&#xff0c;并有机会钓到各种稀有鱼类。然而&#xff0c;很多玩家在闯关过程中遇到了不少困难。为了帮助大家更好地掌握游戏技巧&#xff0c;小编特…

4 软件定义安全综合:使用c/s模式进行控制器数据安全交互管理

在SDN三层结构中&#xff0c;我们通过OpenFlow 协议可以控制数据转发设备的相关行为&#xff08;包括收集设备的信息&#xff09;&#xff0c;那么控制器上的数据能否通过应用层的程序进行管理调用呢&#xff1f; SDN&#xff08;软件定义网络&#xff09;的北向开发是指通过编…

ASUS Zenbook PE重装系统后一直转圈不断重启

问题描述&#xff1a; ASUS Zenbook PE重装系统后一直转圈不断重启 问题原因&#xff1a; RST驱动问题 解决办法&#xff1a; 使用U盘安装原版系统&#xff0c;安装过程中&#xff0c;发现磁盘页面没有不识别硬盘&#xff0c;此时选择加载驱动&#xff0c;加载RST驱动。一…

二进制搭建k8s

实验环境&#xff1a; k8s集群master01:192.168.1.11 k8s集群master02:192.168.1.22 master虚拟ip&#xff1a;192.168.1.100 k8s集群node01:192.168.1.33 k8s集群node01:192.168.1.44 nginxkeepalive01&#xff08;master&#xff09;:192.168.1.55 nginxkeepalive02&a…

渲染农场是什么意思?瑞云渲染为你解答

渲染农场是一种通过集合多台计算机的计算能力来加速图像渲染过程的系统。它尤其适用于动画、电影特效和高端视觉效果的制作&#xff0c;这些领域通常需要处理非常复杂和计算密集型的渲染任务。 渲染农场就是一大群电脑&#xff0c;他们一起可以快速渲染出漂亮的图像。在做动画片…

客观需求验证的常见5大步骤(实施版)

我们在挖掘用户需求时&#xff0c;往往容易犯伪需求或需求错位等问题&#xff0c;因此需要进行客观需求验证。通过客观的验证&#xff0c;我们可以有效减少主观判断误差问题&#xff0c;确保需求的准确性&#xff0c;从而降低需求变更和项目风险的概率&#xff0c;减少开发成本…

LeetCode算法题:11. 盛最多水的容器(Java)(双指针问题总结)

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 提示&#xff1a; n height.length2 <…

第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组 数三角

//枚举顶点。 //不存在等边三角形 #include<bits/stdc.h> using namespace std; #define int long long const int n2e311; int a,b,c,l[n],r[n]; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a;for(int i1;i<a;i){cin>>…

UE4_环境_局部雾化效果

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff01;祝愿大家生活越来越好&#xff01; 本文重点介绍下材质节点SphereMask节点在体积雾中的使用方法。 一、球体遮罩SphereMask材质节点介绍&#xff1a; 球体蒙版&#xff08;SphereMask&#xff09; 表达式根据距…

【笔记】Android Studio 版本信息

Android Studio Jellyfish | 2023.3.1 | Android Developers Android Studio 是开发 Android 应用的官方 IDE&#xff0c;包含构建 Android 应用所需的所有功能。 AS与AGP版本适用关系 AGP(Android Gradle plugin) Android gradle插件 Androdi Studio versionRequired AG…

2024红帽全球峰会:CEO行业洞察分享

作为全球IT领域一年一度的行业盛宴&#xff0c;2024红帽全球峰会于近日盛大召开。生成式AI与大模型是当前IT行业最受关注的热点话题&#xff0c;而红帽在生成式AI与大模型领域的最新动作&#xff0c;也理所当然地成为了本届峰会观众目光聚集的焦点。 作为世界领先的开源解决方案…

使用vcpkg与json文件自动安装项目依赖库

说明 本文记录自己使用vcpkg.json文件自动安装依赖库并完成编译的全过程。 关于vcpkg是什么这里就不多详细解释&#xff0c;可以看一下专门的介绍及安装的文章&#xff0c;总之了解这是一个C的包管理工具就可以了。 流程 下面介绍从GitHub上克隆C项目以及为这个项目安装所需…

二叉树的常见操作

建立树 复制二叉树 计算深度 计算总结点数 计算叶子结点数

OpenHarmony标准设备应用开发(二)——布局、动画与音乐

本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例&#xff1a;分布式音乐播放、传炸弹、购物车等样例&#xff0c;分别介绍下音乐播放、显示动画、动画转场&#xff08;页面间转场&#xff09;三个进阶…