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.pswp.cn/web/12760.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/12760.shtml
英文地址,請注明出處:http://en.pswp.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;三個進階…