溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue雙向綁定的原理是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue雙向綁定的原理是什么”文章能幫助大家解決問題。
核心Object.defineProperty()方法
原理
通過Object.defineProperty()來劫持各個屬性的setter， getter，在數據發生變動時通
知Vue實例，觸發相應的getter和setter回調函數。
當把一個普通 Javascript 對象傳給Vue 實例來作為它的 data 選項時， Vue 將遍歷它的屬性，用 Object.defineProperty 將
它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
特點
Vue的數據雙向綁定將MVVM作為數據綁定的入口，整合Observer， Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間
的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（input） —>數據model變更雙向綁定效果。
這就是通過數據劫持和發布-訂閱者功能來實現的.
js的簡單實現
<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>關于“Vue雙向綁定的原理是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
