vue實現資料雙向繫結主要是採用資料劫持結合發布者、訂閱者的模式的方式來實現。通過object.defineproperty()的get和set來劫持每個屬性，在資料發生變化時通過發布者發訊息給訂閱者，觸發相應的監聽回掉。具體就是先把說有的資料做乙個資料劫持。第一先修改資料，在input框輸入值的時候會觸發乙個對應的方法。把對應的資料修改掉。第二修改檢視，在檢視中使用到的每乙個資料繫結乙個watcher監聽，在object.defineproperty()中的get中把每個watcher監聽儲存到訂閱者的陣列中，當object.defineproperty()中的set響應到資料發生改變的時候通過發布者通知對應的watcher，watcher會在資料中獲取對應的值通過watcher回掉返回，通過node.textcontent = 新值來改變檢視。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
<
/head>
"box"
>
"text" v-model=
"val"
>
}}<
/p>
<
/div>
}<
/p>
<
/div>
"./mvvm.js"
>
<
/script>
newmvvm(}
})<
/script>
<
/body>
<
/html>
class
depsubscription
(obj)
issue()
)}}dep.target =
null
;const dep =
newdep()
;class
watcher
init()
sendval()
}class
observer
this
.data = data;
this
.init()
;}init()
)}observer
(obj, key, value)
// console.log(value)
return value;},
set(newvalue)
value = newvalue;
//重新賦值
dep.
issue()
;//執行發布者
newobserver
(value)
;//為了相容新值為乙個物件的時候，該物件的屬性也得新增劫持}}
)}}const utils =
,getvalue
(data,key)
return data;
}else},
getcontent
(node, data, key)
}文字}
,//觸發input事件，檢視改變，改變資料
changekeyval
(data, key, newval)
data[arr[arr.length-1]
]= newval;
}else
// console.log(data) 資料已根據試圖改變}}
class
mvvm
)init()
initdom()
createfragment()
return newfargment;
//返回文件片段
}compiler
(node)
) utils.
setvalue
(node,
this
.data, val.nodevalue);}
})}else
if(node.nodetype ===3)
}')[0
];//拿到文字值 判斷格式是否以}分割，截取出剩餘的。就把}去掉了。
contentval && utils.
getcontent
(node,
this
.data, contentval)
;//判斷contentval是否為真，把}修改為真實資料
contentval &&
newwatcher
(this
.data, contentval,
(newval)
=>);
}if(node.childnodes && node.childnodes.length >0)
)}}}
vue雙向繫結實現原理
當我們學會使用乙個東西的時候，就開始想要去知道這個東西是怎麼實現的，這個也是我們一直繼續 下去的動力，博主學了vue的時間也比較長了，自己也寫了乙個demo，還在不定時更新，有興趣的小夥伴可以去看看，如果這個專案能讓您有所收穫，那也是博主希望看到的，接下來也是聊聊自己開始學習vue一些實現原理的過程...
vue資料雙向繫結的實現原理
object.defineproperty?var model object.defineproperty model,txt console.log model.txt hello word defineproperty是es5的特性，該方法允許精確新增或修改物件的屬性。通過賦值操作新增的普通屬性...
Vue實現雙向資料繫結的原理
vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法通過重新定義物件，獲取屬性值 get 和設定屬性值 set 的操作來實現。object.defineproperty 方法會直接在乙個物件上定義乙個新屬性，或者修改乙個物件的現有屬性，並返回這個物件。obje...