淺談什麼是MVVM與MVC設計模式，在MVC裡，View是可以直接存取Model的！從而，View裡會包含Model訊息，不可避免的還要包含一些業務邏輯。

1、MVVM與MVC的差別是什麼？

在MVC裡，View是可以直接存取Model的！從而，View裡會包含Model訊息，不可避免的還要包含一些業務邏輯。 MVC模型關注的是Model的不變，所以，在MVC模型裡，Model不依賴View，但是 View是依賴Model的。不僅如此，因為有一些業務邏輯在View裡實現了，導致要更改View也是比較困難的，至少那些業務邏輯是無法重用的，mvc的所有通訊都是單向的。而MVVM在概念上是真正將頁面與資料邏輯分離的模式並且可以實現資料雙向綁定。

2、什麼是VM？

vm就是由View抽象化的資料模型，需要注意的是開發中不在其他在vm在寫與資料不相關的東西，例如一些方法等。

3、MVVM和程式碼怎麼對應的？

MVVM是由Model、View、VM三部分組成。 Model對應了將獲取數據，處理數據成能夠供VM使用的邏輯部分，而View對應的是數據展示，數據綁定部分，VM則是抽象的數據模型對象。

4、有哪些框架使用了MVVM模型？

使用MVVM模式的前端框架有很多，例如AngularJS、avalon、emberjs、knockoutjs、winjs、react、riverts、way、vue、regular、drop等框架

5、MVC、MVP、MVVM使用場景？

要想了解它們的使用場景，首先應該了解它們的優缺點。

MVC的優點和缺點：

優點：

1.將業務邏輯全部分離到Controller中，模組化程度高。當業務邏輯變更的時候，不需要變更View和Model，只需要Controller換成另外一個Controller就行了（Swappable Controller）。

2、觀察者模式可以做到多重視野同時更新。

缺點：

1、Controller測驗困難。因為視圖同步操作是由View自己執行，而View只能在有UI的環境下運作。在沒有UI環境下對Controller進行單元測試的時候，Controller業務邏輯的正確性是無法驗證的：Controller更新Model的時候，無法對View的更新操作進行斷言。

2、View無法被元件化。 View是強烈依賴特定的Model的，如果需要把這個View抽出來作為一個另外一個應用程式可重複使用的元件就困難了。因為不同程式的的Domain Model是不一樣的

MVP的優缺點：

優點：

1、方便測試。 Presenter對View是透過介面進行，在對Presenter進行不依賴UI環境的單元測試的時候。可以透過Mock一個View對象，這個對像只需要實作了View的介面即可。然後依賴注入到Presenter中，單元測試的時候就可以完整的測試Presenter業務邏輯的正確性。 ###### 2、View可以進行組件化。在MVP當中，View不依賴Model。這樣就可以讓View從特定的業務場景中脫離出來，可以說View可以做到對業務邏輯完全無知。它只需要提供一系列介面提供給上層操作。這樣就可以做高度可重複使用的View元件。 ###### 缺點：###### 1、Presenter中除了業務邏輯以外，還有大量的View->Model，Model->View的手動同步邏輯，造成Presenter比較笨重，維護起來會比較困難。 ######MVVM的優點和缺點：###### 優點：###### 1、提升可維持性。解決了MVP大量的手動View和Model同步的問題，提供雙向綁定機制。提高了程式碼的可維護性。 ###### 2、簡單測試。因為同步邏輯是交由Binder做的，View跟著Model同時變更，所以只要確保Model的正確性，View就正確。大幅減少了對View同步更新的測試。 ###### 缺點： ###### 1、過度簡單的圖形介面不適用，或指牛刀殺雞。 ###### 2、對於大型的圖形應用程序，視圖狀態較多，ViewModel的建置和維護的成本都會比較高。 ###### 3.資料綁定的宣告是指令式地寫在View的模版當中的，這些內容是沒辦法去打斷點debug的。 ###

As can be seen from the above advantages and disadvantages, from MVC->MVP->MVVM, it is like a process of killing monsters and upgrading. The latter solves the problems left by the former, optimizes the shortcomings of the former into advantages, and selects the most appropriate framework according to the actual project.

6. How to choose between Angular, avalon and Vue?

Angular contains all parts of MV* and has its own set of rules, so it is suitable for PC, but the code structure will be clearer; avalon is lightweight and is suitable for old browsers Vue has a high degree of browser support, and the minimum support is IE6, so it is suitable for projects compatible with Lao Liu browser; Vue is mainly lightweight and is only used as the view part in MV*. It has the advantages of being lightweight, easy to learn and use, but the disadvantage is that it is a large project When using it, it has to be used with other frameworks or libraries, which is quite troublesome.

7. Origin of development.

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

登入後複製

8. How to implement two-way data binding.

There are currently three main ways to implement two-way data binding:

1. Manual binding

The older implementation method uses the observer programming mode , the main idea is to define get and set methods on the data object, manually call the get or set data when calling, and trigger the rendering operation of the UI layer after changing the data; the scene where the view drives the data change is mainly applied to input, select, and textarea When the UI layer changes, it triggers events to change the data in the data layer by listening to the dom's change, keypress, keyup and other events. The entire process is completed through function calls.

2. Dirty detection mechanism

Represented by the typical mvvm framework angularjs, angular updates the UI layer by checking dirty data. Regarding Angular's dirty detection, there are a few things you need to know:

The dirty detection mechanism does not use scheduled detection.
The timing of dirty detection is when the data changes.
angular encapsulates commonly used DOM events, xhr events, etc., and triggers the digest process to enter angular.
In the digest process, it will traverse from the rootscope and check all watchers. (For the specific design of angular, you can see other documents, here we only discuss data binding), then let’s look at how to do dirty detection: mainly through the set data to find all elements related to the data, and then compare The data changes, and if it changes, the command operation is performed.

3. Front-end data hijacking

The basic idea is to use Object.defineProperty to monitor the property get and set of the data object. When there is data reading and During the assignment operation, the node's instruction is called, so just use the most common = equal sign to assign the value.

9. MVC-MVVM transformation.

The core of the software is data. Business logic appears around the generation, modification and other changes of data. Different interface technologies have emerged around the display of data. Without well-designed code, there will often be coupling between the data layer (persistence layer), the business logic layer, and the interface code.

Because mvc does not achieve the complete separation of view and model, but mvvm does, this drives the transition from mvc to mvvm.