vue.js與react.js相比較的優點

 

 

vue.js的簡介

vue.js是一個javascript mvvm庫，它是以數據驅動和組件化的思想構建的。咱們平時多用js去操做dom，vue.js則是使用了數據綁定驅動來操做dom的，也就是說建立了view和model之間的綁定後，當model數據層發生變化時，view的dom就會發生相應變化。

mvvm便是model-view-viewmodel，model和view之間的銜接交互都是經過viewmodel來實現的。viewmodel就是建立一個vue實例，vue實例是做用於某一個dom元素上的。

DOM Listeners和Data Bindings是實現雙向綁定的關鍵。
從View層看，ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化，若是有變化，則更改Model中的數據；
從Model層看，當咱們更新Model中的數據時，Data Bindings工具會幫咱們更新頁面中的DOM元素。

與React框架相比它的優點

react和vue的類似之處：

1.使用虛擬dom

2.提供了響應式和組件化的視圖組件

3.關注核心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫

比較之處：

#性能方面

1.渲染性能

渲染用戶界面的時候，dom的操做成本是最高的，那爲了儘量的減小對dom的操做，Vue和React都利用虛擬DOM來實現這一點，但Vue的Virtual DOM實現（一個陷阱的叉子）的權重要輕得多，所以比React的引入開銷更少。

Vue 和 React 也提供功能性組件，這些組件由於都是沒有聲明，沒有實例化的，所以會花費更少的開銷。當這些都用於關鍵性能的場景時，Vue 將會更快。

2.更新性能

在react中，當一個組件的狀態發生變化時，它將會引發整個組件的子樹都進行從新渲染，從這個組件的根部開始。那爲了不子組件沒必要要的從新渲染，您須要隨時使用shouldComponentUpdate，並使用不可變的數據結構。 在Vue中，組件的依賴關係在它的渲染期間被自動跟蹤，所以系統準確地知道哪些組件實際上須要從新渲染。這就意味着在更新方面,vue也是快於React

3.開發中

在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是因爲 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。vue在實現這些檢查時，也更加密切地關注了性能方面。

#HTML & CSS

在react中，html和css都是經過javascript編寫的，全部組件的渲染都須要依靠JSX。JSX是使用xml語法編寫javascript的一種語法糖

JSX的渲染功能有如下優點：

（1）你可使用完整的編程語言javascript來實現你的視圖界面

（2）工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的（好比，linting、類型檢查、編輯器的自動完成）

在 Vue 中，因爲有時須要用這些功能，咱們也提供了渲染功能 而且支持了 JSX。然而，對於大多數組件來講，渲染功能是不推薦使用了

vue提供的是在html中寫模板，優勢以下：

• 在寫模板的過程當中，樣式風格已定並涉及更少的功能實現。
• 模板老是會被聲明的。
• 模板中任何 HTML 語法都是有效的。
• 閱讀起來更貼合英語（好比，for each item in items）。
• 不須要高級版本的 JavaScript 語法，來增長可讀性

css的組件做用域 

除非你把組件分佈在多個文件上(例如 CSS Modules)，要不在 React 中做用域內的 CSS 就會產生警告。很是簡單的 CSS 還能夠工做，可是稍微複雜點的，好比懸停狀態、媒體查詢、僞類選擇符等要麼經過沉重的依賴來重作要麼就直接不能用。

而 Vue 可讓你在每一個單文件組件中徹底訪問 CSS。

<style scoped> @ media (min-width: 250px) { .list-container:hover { background: orange; } } </style>

這個可選 scoped 屬性會自動添加一個惟一的屬性（好比 data-v-21e5b78）爲組件內 CSS 指定做用域，編譯的時候.list-container:hover 會被編譯成相似 .list-container[data-v-21e5b78]:hover。

#規模

向上擴展

Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的

React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮

最後，Vue 提供了Vue-cli 腳手架，能讓你很是容易地構建項目，包含了 Webpack, Browserify, 甚至 no build system。React 在這方面也提供了create-react-app，可是如今還存在一些侷限性：

• 它不容許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定製。
• 它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各類用途的模板。
• 它不能用用戶自建的模板構建項目，而自建模板對企業環境下預先創建協議是特別有用的。

向下擴展

 react學習須要你知道JSX和ES2015，vue使用比較簡單，只須要引用<script src="https://unpkg.com/vue/dist/vue.js"></script>就可使用了，生產環境時替換成min版的便可