web面試MVC與MVVM區別及Vue為什麼不完全遵守MVVM解答

Posted on by

MVC和MVVM區別

前述

首先, 這兩種都隻是一種思想, 一種設計模式

很多編程語言根據這種思想設計出瞭很多框架, 例如Java中的SpringMVC, PHP中的ThinkPHP , JavaScript中的Vue、React、Angular等

MVC

概述

 

1.數據要渲染到視圖上
  定義一個模板引擎
  得到數據
  再將數據渲染到模板引擎中

2.視圖操作控制器
  在頁面上的按鈕中添加點擊事件
  在事件中調用方法
  控制器再發送請求去修改數據

3.通過方法發送網絡請求修改數據
  再發送網絡請求得到修改後的數據
  再將數據渲染到視圖上

優缺點

優點:

降低耦合，便於代碼的維護和擴展

缺點:

每次數據更新之後，都需要操作dom, 影響開發效率;

MVVM

 

概述

前言

為瞭提高開發效率，出現瞭新的思想：MVVM。它最大的特點：雙向數據綁定;

當M中的數據發生改變時，V中的數據會自動發生改變當V中的數據發生改變時，M中的數據會自動發生改變;

MVVM是MVC的進步, 是MVC的替代品。

特點：

當M改變時，V會自動改變當V改變時，M會自動改變

關系：

一旦M改變，VM會檢測會M的變化，會自動去修改V

一旦V改變， VM會檢測到V的變化，會自動去修改M

有瞭MVVH之後，所有的dom操作都是由vm來操作，減少瞭程序員工作量，程序員就可以將大量的時間用在業務邏輯上，而不是dom操作上。

MVVM實現者 — Vue

在這裡插入圖片描述

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

在這裡插入圖片描述

原話來源於Vue官網作者自述, 但是作者並沒有給出原因, 根據查閱和自己整理, 認為有2點原因

原因一: mvvm是指 “模型-視圖-視圖模型”, 應該是讓”模型”和”視圖”實現完全的解耦, 但是vue中提供瞭一個屬性: ref, 通過ref可以拿到dom對象，通過ref直接去操作視圖。這一點上，違背瞭mvvm;

原因二: 如下圖, 結構上, “數據層”包含在瞭”數據模型層”, 這兩個部分沒有完全獨立出來

在這裡插入圖片描述

以上就是web面試MVC與MVVM區別及Vue為什麼不完全遵守MVVM解答的詳細內容，更多關於MVC與MVVM的資料請關註WalkonNet其它相關文章！

推薦閱讀：