為什麼尤雨溪尤大說VUE沒有完全遵循MVVM？

05-03

收到這個問題邀請的時候我也一直在關注和思考，可惜沒有看到滿意的答案，於是自己找了很多資料，現在把推測的過程和證據和大家分享一下，作為技術交流~
下面多圖預警，流量不夠的可以直接看總結。
為了避免題主挖坑，隨意杜撰關斷，我特意查了下問題的來源應，該是 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 這種技術細節，重點考慮兩方面：

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中的不遵循體現在哪裡

推薦閱讀：