Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
一、概述
vuejs是采取數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實現(xiàn)model-->view的數(shù)據(jù)綁定，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的數(shù)據(jù)回調(diào)。
至于view-model的綁定是對表單添加了change（input）的事件
二、思路
1、實現(xiàn)一個數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對象的所有屬性進(jìn)行監(jiān)聽，如果有變動可拿到最新值并通知訂閱者
2、實現(xiàn)一個指令解析器Compile，對每個元素節(jié)點的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
3、實現(xiàn)一個watcher，作為連接observer和compile 的橋梁，能夠訂閱并收到每個屬性變動的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
4、mvvm入口函數(shù)，整合以上三者
上述流程如圖所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這些年寫前端vue時經(jīng)常碰到虛擬DOM這個單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個東西就完了，因為感覺也沒有影響我實現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點時間探討下虛擬DOM相關(guān)的知識，給自己補補課2022-10-10
Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue插件之滑動驗證碼用法,結(jié)合實例形式詳細(xì)分析了Vue滑動驗證碼插件相關(guān)使用方法與操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue為什么要求組件模板只能有一個根元素，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了Vue監(jiān)測數(shù)據(jù)的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2021-10-10
詳解Vue.js iview實現(xiàn)樹形權(quán)限表（可擴(kuò)展表）
這篇文章主要介紹了詳解Vue.js iview實現(xiàn)樹形權(quán)限表（可擴(kuò)展表），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue項目上傳Github預(yù)覽的實現(xiàn)示例
這篇文章主要介紹了vue項目上傳Github預(yù)覽的實現(xiàn)示例，在完成Vue項目以后，在上傳到github并實現(xiàn)預(yù)覽2018-11-11