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值不需要document.getelementbyid()
18//
呼叫上面的set方法，設定初始值
19 obj.name = "message";
20//
呼叫上面的get方法，獲取屬性值並放到輸入框
21 input.value =obj.name;
2223
//輸入框的變化時執行，這裡不能使用箭頭函式，因為箭頭函式不繫結this，找的是上下文的this
24 input.addeventlistener('input',function
());

1

'name',);7//
object.keys(obj)返回乙個給定物件obj的所有可列舉屬性的字串陣列，即obj的屬性名陣列89
//若有：
10 let obj2 ={};
1112
//一方面設定屬性和值
13 obj2.name = 1;
14//
等同於：（後三個屬性的預設值都是true）
15 object.defineproperty(obj2, "name", );
2122
//另一方面設定屬性和值
23 object.defineproperty(obj2, "name", );
26//
等同於：（後三個屬性的預設值都是false）
27 object.defineproperty(obj2, "name", );

vue雙向資料繫結原理

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

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...

vue資料雙向繫結原理

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