MVC和MVVM區(qū)別

前述

首先, 這兩種都只是一種思想, 一種設(shè)計(jì)模式

很多編程語(yǔ)言根據(jù)這種思想設(shè)計(jì)出了很多框架, 例如Java中的SpringMVC, PHP中的ThinkPHP , JavaScript中的Vue、React、Angular等

MVC

概述

1.數(shù)據(jù)要渲染到視圖上
  定義一個(gè)模板引擎
  得到數(shù)據(jù)
  再將數(shù)據(jù)渲染到模板引擎中

2.視圖操作控制器
  在頁(yè)面上的按鈕中添加點(diǎn)擊事件
  在事件中調(diào)用方法
  控制器再發(fā)送請(qǐng)求去修改數(shù)據(jù)

3.通過方法發(fā)送網(wǎng)絡(luò)請(qǐng)求修改數(shù)據(jù)
  再發(fā)送網(wǎng)絡(luò)請(qǐng)求得到修改后的數(shù)據(jù)
  再將數(shù)據(jù)渲染到視圖上

優(yōu)缺點(diǎn)

優(yōu)點(diǎn):

降低耦合，便于代碼的維護(hù)和擴(kuò)展

缺點(diǎn):

每次數(shù)據(jù)更新之后，都需要操作dom, 影響開發(fā)效率;

MVVM

概述

前言

為了提高開發(fā)效率，出現(xiàn)了新的思想：MVVM。它最大的特點(diǎn)：雙向數(shù)據(jù)綁定;

當(dāng)M中的數(shù)據(jù)發(fā)生改變時(shí)，V中的數(shù)據(jù)會(huì)自動(dòng)發(fā)生改變當(dāng)V中的數(shù)據(jù)發(fā)生改變時(shí)，M中的數(shù)據(jù)會(huì)自動(dòng)發(fā)生改變;

MVVM是MVC的進(jìn)步, 是MVC的替代品。

特點(diǎn)：

當(dāng)M改變時(shí)，V會(huì)自動(dòng)改變當(dāng)V改變時(shí)，M會(huì)自動(dòng)改變

關(guān)系：

一旦M改變，VM會(huì)檢測(cè)會(huì)M的變化，會(huì)自動(dòng)去修改V

一旦V改變， VM會(huì)檢測(cè)到V的變化，會(huì)自動(dòng)去修改M

有了MVVH之后，所有的dom操作都是由vm來(lái)操作，減少了程序員工作量，程序員就可以將大量的時(shí)間用在業(yè)務(wù)邏輯上，而不是dom操作上。

MVVM實(shí)現(xiàn)者 — Vue

Vue為什么沒有完全遵守MVVM?

原話來(lái)源于Vue官網(wǎng)作者自述, 但是作者并沒有給出原因, 根據(jù)查閱和自己整理, 認(rèn)為有2點(diǎn)原因

原因一: mvvm是指 “模型-視圖-視圖模型”, 應(yīng)該是讓"模型"和"視圖"實(shí)現(xiàn)完全的解耦, 但是vue中提供了一個(gè)屬性: ref, 通過ref可以拿到dom對(duì)象，通過ref直接去操作視圖。這一點(diǎn)上，違背了mvvm;

原因二: 如下圖, 結(jié)構(gòu)上, “數(shù)據(jù)層"包含在了"數(shù)據(jù)模型層”, 這兩個(gè)部分沒有完全獨(dú)立出來(lái)

以上就是web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答的詳細(xì)內(nèi)容，更多關(guān)于MVC與MVVM的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論