react/vue 的差异
行者、空山/2019-03-07 14:27
经常被问，react和vue的差异。其实最大差异在官网的自我介绍中，就已经很明显了。
React: A JavaScript library for building user interfaces.
Vue: The Progressive JavaScript Framework.
一个是库，一个是框架。框架专注于大而全，内嵌所有必须的功能，努力提供一个好的开发环境给开发者。库提供的功能相对来说更简单，单一。但专注于该功能，并尽力做到最好。
组件
React 和 Vue 都提供了组件，前端组件泛泛来说一般包含三个部分：
- 界面(HTML)
- 交互（JavaScript）
- 样式（CSS）
Vue
Vue 提供的单文件组件，同时包含了这三部分，而且还内置了classNames。（非常方便开发者）
- 样式是内置的功能
- 内置了classNames,来提供class和style的动态计算和绑定
- 行内样式，自带css兼容前缀
Vue 的 class 绑定使用起来非常方便，完全感知不到classNames这个库的存在。
// template
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
// data
data() {
return {
isActive: true,
hasError: false
}
}
//result
<div class="static active"></div>React
React 组件包含了交互和界面，但不含样式。 但幸运的是 React 社区十分活跃，有大量用于处理 CSS 的库可以选择。但是：
- 样式不是内置的功能
- 你必须知道这些CSS库的存在，并学习使用
- 支持行内样式，但没有兼容性前缀
没有内置classNames，你需要install，再使用。或者你也可以使用JavaScript自己计算，因为JavaScript确实可以做到。
状态管理和路由
随着前端程序变得越来越大，越来越复杂，状态管理和路由都是必不可少的部分。
Vue
Vue 同样内置了处理这两部分的功能，并在官网文档中有明确的提及到。
- Vue Router 处理路由
- Vuex 处理状态管理
- 最最重要的是，这两个库由 Vue 核心团队维护
这让新上手 Vue 的开发者，很明确的知道自己需要那些库来解决这些问题，没有挑选成本。（非常方便开发者）
React
React 处理这两部分的库，同样是由社区开发维护的，而且多种可选，有一定挑选成本。
- 路由 React-Router
- **状态管理 **Redux/Mobx
- 都由社区开发维护
而且从个人使用体验来说，React这些库的学习成本都比较高。（原因？）
指令（Vue独有）
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令修饰符
尤其是指令修饰符，极大的方便了开发者的使用。
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>自定义指令
const app = Vue.createApp({})
// Register a global custom directive called `v-focus`
app.directive('focus', {
// When the bound element is mounted into the DOM...
mounted(el) {
// Focus the element
el.focus()
}
})
<input v-focus />
v-modal（vue独有）
针对form表单，vue 还有一个比较方便的指令 v-modal 。
你可以用 v-model 指令在表单 、