vue入門 vue與react和Angular的關系和差別

一、為什麼學習vue.js

vue.js兼具angular.js和react的優點，并且剔除了他們的缺點。

二、vue.js是什麼

Vue是一個"MVVM架構（庫）"，和angular類似，相比angular小巧，比較容易上手

Vue是一個建構使用者界面點的漸進式架構，與其他重量級架構不同的是，vue采用自底向上增量開發的設計

vue的核心庫"隻關注視圖層"，并且"非常容易學習"，非常容易與其他庫或者已有的項目整合，另一方面，vue完全有能力驅動采用單檔案元件和vue生态系統支援的庫開發的複雜單頁面應用

vue的目标是通過盡可能簡單的API實作"響應的資料綁定"和"組合的視圖元件"

三、MVC/MVP/MVVM的差別

複雜的軟體必須有清晰合理的架構，否則無法開發和維護

MVC、MVP和MVVM否是用來解決界面呈現和邏輯代碼分離而出現的模式

通俗的講：就是友善大多數人開發和維護出現的代碼分離模式

四、MVC

視圖（view）:使用者界面

控制器（controller）：業務邏輯

模型（Model）:資料處理

五、MVP

MVP 是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供資料，View負 責顯示。作為一種新的模式，MVP與MVC有着一個重大的差別：在MVP中View并不直接使用Model，它們之間的通信是通過Presenter (MVC中的Controller)來進行的，所有的互動都發生在Presenter内部，而在MVC中View會從直接Model中讀取資料而不是通過 Controller。

六、MVVM

MVVM在概念上是真正将頁面與資料邏輯分離的模式，在開發方式上，它是真正将前台代碼開發者（JS+HTML）與背景代碼開發者分離的模式（asp,asp.net,php,jsp）

雙向綁定：view的變動，自動反映在viewModel,反之亦然

七、vue對比其他架構

1、vue-angular

1）、vue在設計之初參考了很多angular的思想

2）、vue相比于angular來說更加的簡單

3)、vue相當于angular要變得小巧很多，運作速度比angular快

4）、vue和angular綁定都可以用{{}}

5）、vue指令用v-xxx，angular用ng-xxx

6）、vue中資料放在data對象裡面，angular資料綁定在$scope上面

7）、vue有元件化概念，angular中沒有

2、vue-react

他們都有：

1）、react和vue都是用虛拟DOM Virtual DOM

2)、React和Vue都提供了響應式（Reactive）群組件化（Componsable）的視圖元件

3）、React和vue都将注意力集中保持在核心庫，伴随于此，有配套的路由和負責處理全局狀态管理的庫

4）、React使用JSX渲染頁面，Vue使用簡單的模闆

5）、Vue比react運作更快