結合vue、react、angular簡談MVC、MVVM框架

React
如其官方介紹:React - A JavaScript library for building userinterfaces, React是一個爲數據提供渲染爲HTML視圖的開源JavaScript庫。從這個定義來看,可以發現React是一個View層,它的作用是提供了一套數據機制。用了virtual dom,屬於facebook公司的

vue的官方文檔是說vue的核心庫也只是關注視圖(View)層。
在這裏插入圖片描述

所以,實際上來說,和angular有完整的解決方案不同,狹義的vue.js和react.js實際上只是library,還並不是一個framework,因爲他們沒有一整套的解決方案,屬於一種“小而美”框架

換句話來說,現在我們所討論的vue、react,都是我們將他們武裝之後,他們有了一整套解決方案了。成爲了一個框架,我們再來討論他們的架構模式,屬於一種“大而廣”框架。
在這裏插入圖片描述

Vue

個人認爲,這是毫無爭議的一個MVVM框架,對MVVM理念的貫徹也是最顯而易見的。
關於漸進式框架的理解
https://baijiahao.baidu.com/s?id=1647203004323024188&wfr=spider&for=pc

Model層:接口層,原始數據模型。

View層:視圖層,template中的html代碼。

ViewModel層:基於一個html元素構建的vue實例。將Model中的原始數據模型,構建成一份View層可以使用的視圖模型。這個時候,Model層、View層完全解耦。開發者已經完全不需要顧及View的展示更新了,只需要專注業務邏輯以及ViewModel層與Model的交互邏輯就ok。

AngularJs

Model層:接口層,原始數據模型。

View層:html頁面。

ViewModel層:基於ng-app構建的應用實例,與vue類似,數據雙向綁定機制不同。

React

Model層:接口層,原始數據模型。

View層:編譯之後的Dom。

ViewModel層:基於jsx語法,以及react構建的VDom,單向數據流。

這麼一看,vue、react、angularJS不就都是MVVM框架嗎?唯一的區別就是,VM層中的Model與View,vue與angular是數據雙向綁定,而react由於是單向數據流,所以需要手動更改狀態。
參考鏈接:
https://zhuanlan.zhihu.com/p/76988636
https://zhuanlan.zhihu.com/p/64257809
其他的參考鏈接:
https://www.cnblogs.com/zhouyangla/p/6936455.html
https://blog.csdn.net/qq_18832439/article/details/51038454
https://www.jianshu.com/p/11c89d58d5d5
https://blog.csdn.net/qq_36228442/article/details/79470408

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章