Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理:Object.defineProperty()
vue實現(xiàn)數(shù)據(jù)雙向綁定主要是:采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)相應(yīng)監(jiān)聽回調(diào)。
vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口,整合Observer,Compile和Watcher三者,通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化,通過Compile來解析編譯模板指令(vue中是用來解析 {{}}),最終利用watcher搭起observer和Compile之間的通信橋梁,達到數(shù)據(jù)變化 —>視圖更新;視圖交互變化(input)—>數(shù)據(jù)model變更雙向綁定效果。
vue 雙向數(shù)據(jù)綁定
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 剖析Vue實現(xiàn)原理 - 如何實現(xiàn)雙向綁定mvvm 本文能幫你做什么?1、了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模...
- 剖析Vue原理、實現(xiàn)雙向綁定MVVM 幾種實現(xiàn)雙向綁定的做法 目前幾種主流的mvc(vm)框架都實現(xiàn)了單向數(shù)據(jù)綁定...
- # 前言 ? MVVM 是與 MVC 進化出來的,區(qū)別在與將view層的數(shù)據(jù)變動直接響應(yīng)到viewModel層上而...
- # 前言 MVVM 是與 MVC 進化出來的,區(qū)別在與將view層的數(shù)據(jù)變動直接響應(yīng)到viewModel層上而不是...
- 要點:寫作動機:vue因為文檔友好,上手容易,已經(jīng)得到大家使用認可,我很好奇它的實現(xiàn)原理關(guān)于vue數(shù)據(jù)綁定原理的文...