關於Vue的理解以及與React框架的對比

一、Vue的理解

• 概念：
  • Vue是一套用於構建用戶界面的漸進式框架；
  • Vue的核心庫只關注視圖層；
  • 是一個數據驅動的MVVM框架；　　
• 特性：
  • 確實輕量：體積比較小；
  • 數據綁定簡單、方便；
  • 有一些簡單的內置指令（v-*），也能夠自定義指令，經過對應表達式的值就能夠修改對應的DOM；
  • 插件化：Vue核心庫不包含Router、Ajax等功能，但能夠很是方便的加載對應的組件；

二、Vue與React的區別

• 相同點：
  • 都支持服務器端的數據渲染；
  • 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件；
  • 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫；
  • 都有Virtual DOM，組件化開發，經過props參數進行父子組件數據的傳遞,都實現webComponent規範；
  • 都有支持native的方案，React的React native，Vue的weex；
  • 都有管理狀態，React有redux,Vue有本身的Vuex（自適應vue，量身定作）；
• 不一樣點：
  • React嚴格上只針對MVC的view層，Vue則是MVVM模式；

  • virtual DOM不同，vue會跟蹤每個組件的依賴關係，不須要從新渲染整個組件樹；

                而對於React而言，每當應用的狀態被改變時，所有組件都會從新渲染，因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制；

• • 組件寫法不同，React推薦的作法是 JSX + inline style，也就是把HTML和CSS全都寫進JavaScript了，即'all in js'；

                Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html，css，js寫在同一個文件；

• • 數據綁定: vue實現了數據的雙向綁定，react數據流動是單向的；

  • state對象在react應用中不可變的，須要使用setState方法更新狀態；

    在vue中，state對象不是必須的，數據由data屬性在vue對象中管理；

三、MVC與MVVM的理解

• MVC

　　   MVC分爲Model（模型層）、View（視圖）、Controller（控制器）三層，View與Model不直接聯繫，經過Controller進行聯繫，所以也說Controller是View和Model的協調者；

• • 當沒有用戶操做的狀況下：基本聯繫都是「單向」的，model用來存放data

                   

• • 存在用戶操做：

• MVVM

          MVVM就是把MVC的Controller改爲了ViewModel，View的變化會自動更新到ViewModel，ViewModel的變化也會自動同步到View上顯示，這種自動同步是由於ViewModel中的屬性實現了Observer，當屬性變動時都能觸發對應的操做；