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的一大特性 雙向...