Vue和React都是轻量级框架,不过从总体来看,Vue的性能是要高于React的。
1. 虚拟DOM
在处理用户界面时,DOM操作成本是最高的,两者都在渲染流程中采用虚拟DOM以降低页面开销。
原理如下图。
不过,Vue的虚拟DOM实现的层级要更高一些,这也意味着Vue比React更轻量,性能更高一些。
2. 功能性组件
两者都提供一些功能性组件以减少用户开销。
但是Vue的渲染速度要比React快一些,因为在React中有大量用于提示警告和错误提示信息的检查机制。
3. 轻量级-将与核心库无关的业务封装成独立库
React和Vue都将着重点放在核心库上,也都有专门负责路由和全局状态管理等功能的配套库。
例如,与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来构建视图。不过,对于从传统HTML+CSS+JS分离开发走向组件化开发的前端工程师来说,这种语法感觉并不友好。
- Vue提供了更简单的模板开发。
语法如下:
<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在其他方面也占据了一些优势,比如Vue的状态管理库vuex和路由库vue-router都是由官方维护更新,从而保证了这些库与Vue本身的统一性。而React的相关库则由社区进行维护,不过,这也使得React的社区生态更繁荣一些。
此外,Vue提供了项目快读构建工具——vue-cli脚手架,提供了包含npm依赖管理、Webpack模块打包、vue-router前端路由、eslint语法检测、单元测试等集成功能,能够让开发者快速构建一个高质量的项目环境。