Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、概述
vuejs是采取數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實(shí)現(xiàn)model-->view的數(shù)據(jù)綁定，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的數(shù)據(jù)回調(diào)。
至于view-model的綁定是對(duì)表單添加了change（input）的事件
二、思路
1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，如果有變動(dòng)可拿到最新值并通知訂閱者
2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
3、實(shí)現(xiàn)一個(gè)watcher，作為連接observer和compile 的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
4、mvvm入口函數(shù)，整合以上三者
上述流程如圖所示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
- 深入了解Vue中雙向數(shù)據(jù)綁定原理
- vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
- vue實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定
- Vue雙向數(shù)據(jù)綁定(MVVM)的原理
- vue中的雙向數(shù)據(jù)綁定原理與常見(jiàn)操作技巧詳解
- Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼
- vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
- Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
相關(guān)文章
使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問(wèn)題
這篇文章主要介紹了使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解vue-element Tree樹(shù)形控件填坑路
這篇文章主要介紹了vue-element Tree樹(shù)形控件填坑路，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識(shí)點(diǎn)總結(jié)，并做了代碼實(shí)例分析，有需要的朋友參考下。2018-04-04
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來(lái)給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，感興趣的朋友一起看看吧2016-09-09
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
如何解決npm i下載依賴的時(shí)候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時(shí)候出現(xiàn)某依賴版本沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02