Vue和React都是輕量級框架微饥，不過從總體來看且叁，Vue的性能是要高于React的。
1. 虛擬DOM
在處理用戶界面時详民，DOM操作成本是最高的，兩者都在渲染流程中采用虛擬DOM以降低頁面開銷撞羽。
原理如下圖阐斜。
不過，Vue的虛擬DOM實現(xiàn)的層級要更高一些诀紊，這也意味著Vue比React更輕量谒出，性能更高一些。
2. 功能性組件
兩者都提供一些功能性組件以減少用戶開銷邻奠。
但是Vue的渲染速度要比React快一些笤喳，因為在React中有大量用于提示警告和錯誤提示信息的檢查機制。
3. 輕量級-將與核心庫無關(guān)的業(yè)務封裝成獨立庫
React和Vue都將著重點放在核心庫上碌宴，也都有專門負責路由和全局狀態(tài)管理等功能的配套庫杀狡。
例如，與React配套的有React Router贰镣、Redux呜象，與Vue配套的有Vue router、Vuex碑隆。
4. 視圖模板
React采用JSX渲染組件恭陡，而Vue則采用模板，比如.vue后綴的文件上煤。
- JSX是使用XML語法編寫JavaScript的一種語法糖休玩。
語法如下：
class HelloMessage extends React.Component {
render() {
return {
<div>
Hello {thiss.props.name}
</div>
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
}
通過JSX，我們可以只用JavaScript來構(gòu)建視圖劫狠。不過拴疤，對于從傳統(tǒng)HTML+CSS+JS分離開發(fā)走向組件化開發(fā)的前端工程師來說，這種語法感覺并不友好独泞。
- Vue提供了更簡單的模板開發(fā)呐矾。
語法如下：
<template>
<div class="demo-title">{{title}}</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello World'
}
}
}
</script>
<style scoped>
.demo-title{
font-size: 24px;
font-weight: 600;
}
</style>
Vue模板更貼合HTML，而不是用更高層的東西去封裝它懦砂，學習曲線十分平緩凫佛。在Vue模板的style標簽上標注scoped屬性可劃分作用域，使CSS樣式表只作用于當前組件孕惜。
5. 其他
除框架本身外愧薛，Vue在其他方面也占據(jù)了一些優(yōu)勢，比如Vue的狀態(tài)管理庫vuex和路由庫vue-router都是由官方維護更新衫画，從而保證了這些庫與Vue本身的統(tǒng)一性毫炉。而React的相關(guān)庫則由社區(qū)進行維護，不過削罩，這也使得React的社區(qū)生態(tài)更繁榮一些瞄勾。
此外费奸，Vue提供了項目快讀構(gòu)建工具——vue-cli腳手架，提供了包含npm依賴管理进陡、Webpack模塊打包愿阐、vue-router前端路由、eslint語法檢測趾疚、單元測試等集成功能缨历，能夠讓開發(fā)者快速構(gòu)建一個高質(zhì)量的項目環(huán)境。
