vue中的雙向綁定
阿新 • • 發佈：2018-03-29
mode 但是 它的 .cn 綁定 row 雙向綁定 ron per
概述
今天對雙向綁定感興趣了,於是去查了下相關文章,發現有用臟檢查的(angular.js),有用發布者-訂閱者模式的(JQuery),也有用Object.defineProperty的(vue),其中用Object.defineProperty的(vue)特別簡單,今天順便記錄下供以後開發時參考,相信對其他人也有用.
我參考了這篇文章:Vue.js雙向綁定的實現原理.
類似雙向綁定的效果
其實用事件代理就可以實現類似雙向綁定的效果,原理是當檢測到數據改動時會觸發一個keyup事件或者表單的change事件,通過監聽這個事件做出響應,對應改變dom的內容.
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="a"> <span id="b"></span> <script> var b = document.getElementById('b'); document.addEventListener('keyup', function (e) { b.innerText = e.target.value; }); </script> </body> </html>
通過在輸入框裏面輸入內容,內容會在右邊同步顯示或改變.
需要註意的是,react其實是一種單向數據流,那麽怎麽用react實現雙向綁定呢?就是用的這個原理!
可以點擊下面的按鈕體會一下(在輸入框裏面輸入內容,右邊會即時更新):
vue的雙向綁定
但是所謂雙向綁定,所謂MVC,所謂MVVM,都強調的是數據的改變,數據(model)即是MVC裏面的M,所以我們在雙向綁定中必須有數據(model)
原理就是getter和setter函數,重寫setter函數,使數據改變的同時進行一些其它的操作(改變視圖),在視圖改變的時候觸發事件改寫數據.
而怎麽把數據和setter結合在一起呢?那就是利用Object.defineProperty方法,給對象定義一個屬性(數據),同時重寫setter方法.
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="a"> <span id="b"></span> <script> var obj = {}; Object.defineProperty(obj, 'hello', { set: function (newVal) { document.getElementById('a').value = newVal; document.getElementById('b').innerText = newVal; } }); document.addEventListener('keyup', function (e) { obj.hello = e.target.value; }); </script> </body> </html>
可以點擊下面的按鈕體會一下(在輸入框裏面輸入內容,右邊會即時更新):
vue中的雙向綁定