Vue的雙向綁定原理

益達(dá)學(xué)妹 2021-12-17 09:50:55 瀏覽數(shù) (3232)

反饋

核心
?Object.defineProperty()?方法

原理
通過?Object.defineProperty()?來劫持各個(gè)屬性的?setter?， ?getter?，在數(shù)據(jù)發(fā)生變動(dòng)時(shí)通
知Vue實(shí)例，觸發(fā)相應(yīng)的?getter?和?setter?回調(diào)函數(shù)。

當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給Vue 實(shí)例來作為它的 data 選項(xiàng)時(shí)， Vue 將遍歷它的屬性，用 ?Object.defineProperty? 將
它們轉(zhuǎn)為 ?getter/setter?。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時(shí)通知變化。

特點(diǎn)
Vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口，整合Observer， Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間
的通信橋梁，達(dá)到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input） —>數(shù)據(jù)model變更雙向綁定效果。
這就是通過數(shù)據(jù)劫持和發(fā)布-訂閱者功能來實(shí)現(xiàn)的.

js的簡單實(shí)現(xiàn)

<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>

HTML

0 人點(diǎn)贊