vue入門學習篇 資料雙向繫結原理及簡單實現

2022-07-26 05:06:11 字數 1607 閱讀 8311

vue雙向繫結的原理是通過object.defineproperty()劫持資料結合發布者-訂閱者模式的方式來實現的。

object.defineproperty()

object.defineproperty()方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性, 並返回這個物件。

語法:object.defineproperty(obj,prop,descriptor);

obj: 要在其上定義屬性的物件。

prop: 要定義或修改的屬性的名稱。

descriptor: 將被定義或修改的屬性描述符。

這裡用到了object.defineproperty()的get和set方法。

get:當訪問該屬性時,該方法會被執行,方法執行時沒有引數傳入,但是會傳入this物件(由於繼承關係,這裡的this並不一定是定義該屬性的物件)。

set:當屬性值修改時,觸發執行該方法。該方法將接受唯一引數,即該屬性新的引數值。

具體用法

此處

簡單實現

<

input

type

="text"

id="model"

/>

<

div

id="modeltext"

>

div>

let modelinfo ={};

let defaultvalue = 'hello object.defineproperty';

let model = document.getelementbyid('model');

let text = document.getelementbyid('modeltext');

model.value =defaultvalue;

text.innertext =defaultvalue;

/*** writable屬性的值是否可以被重寫。設定為true可以被重寫;設定為false,不能被重寫。預設為false。

* value屬性對應的值,可以使任意型別的值,預設為undefined

* configuable是否可以刪除目標屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設定為true可以被刪除或可以重新設定特性;設定為false,不能被可以被刪除或不可以重新設定特性。預設為false。

* enumerable此屬性是否可以被列舉(使用for...in或object.keys())。設定為true可以被列舉;設定為false,不能被列舉。預設為false。

*/object.defineproperty(modelinfo,'key',,

set(value)

});model.addeventlistener('input',function

());

如果想要深入了解,建議看vue的雙向繫結原理及實現。

vue雙向資料繫結

話術 vue中v model可以實現雙向繫結,其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持,使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令,繫結試圖更新方法 第三部...

vue雙向資料繫結

1.資料響應式原理 主要是利用object.defineproterty 來自定義object的getter,setter function observe value,cb function definereactive obj,key,val,cb set newval class vue da...

Vue學習日誌之資料雙向繫結

如果搭建大型專案或者比較複雜的企業級軟體是需要用vue cli,webpack進行打包開發的。鴨鴨作為乙個初學者,選擇了匯入vue.js的方法在html裡進行學習 提取碼 o9ym 在頁面中進行匯入 具體位址根據相對路徑第乙個資料繫結的 案例 data 效果如圖所示 此主要體現vue的一大特性 雙向...