【IT168 评论】React和Vue就像可口可乐和百事可乐一样,在React中可以做的,同样可以在Vue中做。但是这两者之间还有一些重要的概念性差异,尤其是反映在Angular对Vue的影响。本文就和大家一起来探讨一下React和Vue的异同。
React和Vue之间有多大区别?
其实说起来,React和Vue的相似之处要绝对多于差异:
· 两者都是用于创建UI的JavaScript库
· 两者都快速轻便
· 都有基于组件的架构
· 都是用虚拟DOM
· 都可放入单个HTML文件中,或者成为更复杂webpack设置中的模块
· 都有独立但常用的路由器和状态管理库
但是它们之间的最大区别是Vue通常使用HTML模板文件,而React则完全是JavaScript。Vue具有可变状态,以及自动系统用于重新渲染,被称为“reactivity”。除此之外,React和Vue还有哪些具体的差异呢?
组件
在Vue.js中,通过API方法.component声明组件,该方法接受id和定义对象的参数。你可能会注意到Vue组件的熟悉方面和不太熟悉的方面:
模板
你会注意到组件有一个模板属性,它是HTML标记的字符串。该Vue库包括一个编译器,它将模板字符串转换成渲染函数,这些渲染函数由虚拟DOM使用。
如果你想要定义自己的渲染功能,你可以选择不使用模板,你甚至可以使用JSX。但切换到Vue只是为了做到这一点就像是去意大利旅游不吃披萨。
Lifecycle Hooks
Vue中的组件与React组件有着相似的生命周期方法。例如,当组件状态准备就绪时,所创建的hook会被触发,但是在组件安装在页面之前。
一个很大的区别:没有 shouldComponentUpdat,因为Vue的reactivity系统不需要。
重新渲染
Vue的初始化步骤之一是遍历所有数据属性,并将其转换为getter和setter。在下图中,你可以看到消息数据属性如何添加get和set函数:
Vue添加这些getter和setter以在访问或修改属性时启用依赖关系跟踪和更改通知。
可变状态
在Vue中,如果想要更改Vue中组件的状态,你不需要setState方法,直接赋值改变即可:
// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';
当消息值被改变时,其setter被触发。这个set方法会设置新值,但也将执行第二个任务,通知Vue值已更改,以及依赖该页面的任何部分可能需要重新渲染。
如果消息作为prop传递给任何子组件,Vue知道它们依赖于此,它们也将被自动重新渲染。这就是为什么Vue组件不需要shouldComponentUpdate 方法的原因。
主模板
在主模板文件方面,Vue更像Angular。与React一样,Vue需要安装在页面某个位置:
但与React不同,你可继续添加到该主index.html,因为这是你根组件的模板。
在index.html中,还有一种方法可定义子组件模板,通过使用x-template或inline-template等HTML功能。不过,这不被认为是非常好的做法,因为它将模板与组件定义其余部分分开。
指令
类似Angular,Vue允许通过“指令”加强模板,这些是具有v-前缀的特殊HTML属性,例如v-if用于条件渲染,v-bind用于绑定表达式到常规HTML属性。
分配到指令的值是JavaScript表达式,你可以引用数据属性,包括三元运算符等。
工作流程
Vue没有正式的create-react-app,但有社区构建的create-vue-app。启动项目的官方建议是vue-cli。它可从简单项目通过HTML文件生成任何内容到完整的webpack+server-side rendering项目:
$ vue init template-name project-name
单个HTML文件项目
Vue的创造者Evan You将其项目称为“渐进式框架”,因为它可为复杂的应用程序进行扩展,或者为简单应用程序进行缩小。当然,React也可做到这一点。不同的是,Vue项目通常使用较少的ES6功能,很少使用JSX,所以通常不需要添加Babel。此外,Vue库都在一个文件中,而对应的ReactDOM没有单独文件。
下面是如何添加Vue到单个HTML文件项目:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
请注意:如果你不打算使用模板字符串,因此不需要模板编译器,则会有较小的Vue省略,被称为vue.runtime,大约为20KB。
单个文件组件
如果你乐意使用Webpack工具添加构建步骤到你的项目,可使用Vue的单文件组件(SFC)。这些文件具有.vue扩展名,并封装组件模板、JavaScript配置和样式在单个文件中:
这些毫无疑问是Vue最酷的功能之一,因为你通过HTML标记获得“正确”模板,但JavaScript也需要在这里,让模板和逻辑之间没有尴尬的分离。还有名为vue-loader的Webpack加载器,负责处理SFC。在构建过程中,模板转换为渲染函数,这是浏览器中vue.runtime.js的完美用例。