vue雙向資料繫結原理

"text" id=

"text"
>
"show"
>
<
/p>
var text = document.
getelementbyid
("text"),
show = document.
getelementbyid
("show");
var model =; 
object.
defineproperty
(model,
"name",,
set:
function
(newvalue)})
;    text.
oninput
=function()
;<
/script>

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

說明：會直接在乙個物件上定義乙個新屬性，或者修改乙個物件現有的屬性，並返回這個物件。

描述：obj：必須，目標物件；

prop：必須，要定義或者修改的屬性名；

descriptor：必須，是被定義或者修改的屬性描述符，是乙個物件。

首先我們通過object.defineproperty方法來對model資料各個屬性新增訪問器屬性以此來實現資料的劫持，因為當model中的資料發生變化的時候，我們可以通過配置的set和get方法來實現對view的資料更新和通知。

vue雙向資料繫結原理

vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...

vue資料雙向繫結原理

vue的資料雙向繫結的小例子 html index.js function selfvue data,el,exp 對data的每一層級的屬性進行監聽，如果變化執行notify observe data 初始化模板資料的值 el.innerhtml this data exp new watcher...

vue 雙向資料繫結原理

1 2 input type text id input 34 p id desc p 1 let obj 2 let temp 採用臨時變數 obj 3 object.defineproperty obj,name 8 給obj的name屬性賦值會觸發 9set val 15 1617 設定了id...