web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
MVC和MVVM區(qū)別
前述
首先, 這兩種都只是一種思想, 一種設(shè)計模式
很多編程語言根據(jù)這種思想設(shè)計出了很多框架, 例如Java中的SpringMVC, PHP中的ThinkPHP , JavaScript中的Vue、React、Angular等
MVC
概述
1.數(shù)據(jù)要渲染到視圖上
定義一個模板引擎
得到數(shù)據(jù)
再將數(shù)據(jù)渲染到模板引擎中
2.視圖操作控制器
在頁面上的按鈕中添加點擊事件
在事件中調(diào)用方法
控制器再發(fā)送請求去修改數(shù)據(jù)
3.通過方法發(fā)送網(wǎng)絡(luò)請求修改數(shù)據(jù)
再發(fā)送網(wǎng)絡(luò)請求得到修改后的數(shù)據(jù)
再將數(shù)據(jù)渲染到視圖上
優(yōu)缺點
優(yōu)點:
降低耦合，便于代碼的維護(hù)和擴(kuò)展
缺點:
每次數(shù)據(jù)更新之后，都需要操作dom, 影響開發(fā)效率;
MVVM
概述
前言
為了提高開發(fā)效率，出現(xiàn)了新的思想：MVVM。它最大的特點：雙向數(shù)據(jù)綁定;
當(dāng)M中的數(shù)據(jù)發(fā)生改變時，V中的數(shù)據(jù)會自動發(fā)生改變當(dāng)V中的數(shù)據(jù)發(fā)生改變時，M中的數(shù)據(jù)會自動發(fā)生改變;
MVVM是MVC的進(jìn)步, 是MVC的替代品。
特點：
當(dāng)M改變時，V會自動改變當(dāng)V改變時，M會自動改變
關(guān)系：
一旦M改變，VM會檢測會M的變化，會自動去修改V
一旦V改變， VM會檢測到V的變化，會自動去修改M
有了MVVH之后，所有的dom操作都是由vm來操作，減少了程序員工作量，程序員就可以將大量的時間用在業(yè)務(wù)邏輯上，而不是dom操作上。
MVVM實現(xiàn)者 — Vue
Vue為什么沒有完全遵守MVVM?
原話來源于Vue官網(wǎng)作者自述, 但是作者并沒有給出原因, 根據(jù)查閱和自己整理, 認(rèn)為有2點原因
原因一: mvvm是指 “模型-視圖-視圖模型”, 應(yīng)該是讓"模型"和"視圖"實現(xiàn)完全的解耦, 但是vue中提供了一個屬性: ref, 通過ref可以拿到dom對象，通過ref直接去操作視圖。這一點上，違背了mvvm;
原因二: 如下圖, 結(jié)構(gòu)上, “數(shù)據(jù)層"包含在了"數(shù)據(jù)模型層”, 這兩個部分沒有完全獨立出來
以上就是web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答的詳細(xì)內(nèi)容，更多關(guān)于MVC與MVVM的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關(guān)于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue中使用vux配置的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue如何實現(xiàn)自定義步驟條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
這篇文章主要給大家介紹了關(guān)于如何通過shell腳本自動生成vue文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue-cli 作為 Vue 官方推薦的項目構(gòu)建腳手架，它提供了開發(fā)過程中常用的，熱重載，構(gòu)建，調(diào)試，單元測試，代碼檢測等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開發(fā)2017-11-11
詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺動態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺動態(tài)返回) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05