收到這個問題邀請的時候我也一直在關注和思考，可惜沒有看到滿意的答案，於是自己找了很多資料，現在把推測的過程和證據和大家分享一下，作為技術交流~

下面多圖預警，流量不夠的可以直接看總結。

為了避免題主挖坑，隨意杜撰關斷，我特意查了下問題的來源應，該是 Vue.js 官網上的這句話：

鏈接地址：

Vue 實例 — Vue.js?

cn.vuejs.org圖標

既然觀點是真的，那麼可以開始來回答這個問題。這個問題有兩個主體：MVVM 和 Vue，下面我們從兩個主體開始分析。

什麼是MVVM？

網上的文章很多，我們選用比較權威的。

維基百科關於MVVM的解釋（考慮到有些人可能沒梯子看不到，我總結一下幾個重點）：

  • MVVM 對應 3個組成部分，Model（模型）、View（視圖） 和 ViewModel（視圖模型）。
  • View 是用戶在屏幕上看到的結構、布局和外觀，也稱UI。
  • ViewModel 是一個綁定器，能和 View 層和 Model 層進行通信。
  • Model 是數據和邏輯。
  • MVVM 模式是大神 Martin Fowler 的 PM（Presentation Model）設計模式的變體，當然 PM 模式和 MVVM 模式都是 MVC 模式的變體。
  • 兩個完全遵循的 MVVM 的例子：ZK（Java寫的一個Web應用框架）和KnockoutJS（一個JavaScript庫）
  • MVVM 的核心實現是由 ViewModel 層數據綁定，它的核心思想是分離（如果你看過我即將出版的《了不起的JavaScript開發者》的話會了解，其實這就是軟體開發兩個最重要的思想之一「拆分」的體現），也就是通過 ViewModel 讓 View 層和 Model 層解耦，這樣有什麼好處呢？初衷是想讓設計師專註 View 層的設計和編寫，軟體工程師專註 Model 層的業務邏輯編寫。

MVVM的結構圖如下：

看完一遍大家可能沒什麼感覺，但是這裡有個重要的細節值得關注，這也是我參考了阮一峰老師的文章《MVC，MVP 和 MVVM 的圖示》（大師就是大師，寫文章精簡直白）後知道的，那就是 View 層不直接和 Model 層通信，他們只能通過 ViewModel 層通信。

Vue是怎麼實現的MVVM？

這裡我們不細談Vue怎麼實現數據綁定，如何利用了 virtual DOM 這種技術細節，重點考慮兩方面：

  1. MVVM 在 Vue 中的體現。

2. Vue 哪些地方違反了 MVVM。

寫個 Vue 組件的人應該都知道它的單文件組件開發方式。那麼怎麼和 MVVM 設計模式對應起來？

  • Model：對應的是組件中的 data、props 屬性。
  • View：組件中 template 的部分（也包括 style ？）。
  • ViewModel。繼承自 Vue 類的組件實例。

看上去不是完美地遵循了 MVVM 么？

先別急著下結論，來看看官網上的另一段話：

看到了么， ref 屬性雖然為父組件操作子組件大開了方便之門，但是它繞開了 ViewModel 來訪問 View。

當然可能還有其它局部設計也違反 MVVM ，歡迎各位補充。

總結：

嚴格的MVVM要求View不能和Model直接通信，而Vue在組件提供了$refs這個屬性，讓Model可以直接操作View，違反了這一規定，所以說Vue沒有完全遵循MVVM。

碼字不易，感謝點贊~

了不起的JavaScript工程師：從前端到全端高級進階京東去購買?

現在我們統一說 MV* ，不要糾結 * 具體指什麼

本身js就太靈活了，這給開發大型項目帶來了一些問題，所以誕生了typescript等。vue本身也是不支持typescript的，但是社區中開始使用typescript的人越來越多，支持的呼聲也越來越高，而支持的難度也不高，所以最終尤大還是支持了。但是這不代表typescript就是最好的和萬能的。

這個道理同樣適用於mvvm。可能我的例子舉得不太恰當。mvvm有它自己的好處，也有一些弊端，並不是每個人都喜歡mvvm。本身js真的很靈活，既可以面向對象，又可以面向過程，而且mvc，mvp，mvvm等在前端中各有實踐，不存在哪一種架構非常優秀，能夠完美解決所有問題而成為最佳實踐的範本的情況。取其精華，去其糟粕，我想這是每一個框架和類庫作者想要做好的事。我個人覺得vue的這種做法是為了適當的保留寫法的靈活性。這點在文檔中是能夠看得出來的。

以下是mvc和mvvm的對比圖

從input的角度來說，是直接反饋給v的，那麼至少web前端是不存在MVC模式的

那麼vue是什麼模式，其實個人猜測尤大的意思是別糾結這種屁問題

要討論是否遵循mvvm關鍵還是得看怎麼劃分模塊

如果邏輯都跟v比較密切的話，那麼整個vue其實就是v而已，不存在mv和m

但是官方標榜new Vue出來的是vm，那麼vue至少是一個vm層的工具

但換個角度，你可以把vue跟dom跟css扒拉一塊當做一層當做v，那麼其實你的架構只有m和v

其實意思就是mvvm這三者不存在非黑即白的劃分界限，中間的過程其實是灰度的

目前的VUE 什麼都沒完全遵循，都亂來的。

當做複製的事情都很麻煩，生態也很麻煩（每做一件東西都是一小部分人合適）

問題可以轉化為MVVM模式有什麼樣的優缺點，以及mvvm的特點在vue中的不遵循體現在哪裡

推薦閱讀：
相关文章