相同之处
React与Vue存在很多相似之处,例如他们都是JavaScript的UI框架,专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的插件,又称为渐进式框架。
1、Virtual DOM
Vue.js(2.0版本)与React的其中最大一个相似之处,就是都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思:虚拟DOM,DOM树的虚拟表现。它的诞生是基于这么一个概念:改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。
Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
例子如下,可以看看下面这个列表在HTML中的代码是如何写的:
1、Virtual DOM
Vue.js(2.0版本)与React的其中最大一个相似之处,就是都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思:虚拟DOM,DOM树的虚拟表现。它的诞生是基于这么一个概念:改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。
Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
例子如下,可以看看下面这个列表在HTML中的代码是如何写的:
[JavaScript] 纯文本查看 复制代码
1
2
3
4
|
<ul class= "list" >
<li>item 1</li>
<li>item 2</li>
</ul>
|
而在JavaScript中,可以用对象简单地创造一个针对上面例子的映射:
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
|
{
type: 'ul' ,
props: { 'class' : 'list' },
children: [
{ type: 'li' , props: {}, children: [ 'item 1' ] },
{ type: 'li' , props: {}, children: [ 'item 2' ] }
]
}
|
真实的Virtual DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组的原生对象
当新一项被加进去这个JavaScript对象时,一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在,React和Vue在实现上有点不同。·
Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
而对于React而言,每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。
小结:如果应用中,交互复杂,需要处理大量的UI变化,那么使用Virtual DOM是一个好主意。如果你更新元素并不频繁,那么Virtual DOM并不一定适用,性能很可能还不如直接操控DOM
2、组件化
React与Vue都鼓励组件化应用。这本质上说,是建议将应用分拆成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系。
在Vue中,如果遵守一定的规则,可以使用单文件组件:
React与Vue都鼓励组件化应用。这本质上说,是建议将应用分拆成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系。
在Vue中,如果遵守一定的规则,可以使用单文件组件:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<template>
<div>
<h1>{{ detailData.title }}</h1>
<article v-html= "detailData.content" ></article>
</div>
</template>
<script>
import Axios from 'axios'
export default {
props: [ 'dataList' ],
data () {
return {
detailData: {}
}
},
created () {
let { id } = this .$route.params
Axios.get( 'https://cnodejs.org/api/v1/topic/' + id).then(res => {
let { data } = res.data
this .detailData = data
})
}
}
</script>
<style scoped>
</style>
|
正如上面你看到的例子中,HTML, JavaScript和CSS都写在一个文件之中。你不再需要在.vue组件文件中引入CSS,虽然这也是可以的。
React也是非常相似的,JavaScript与JSX被写入同一个组件文件中
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/**
import React, { Component } from 'react'
class Footer extends Component{
render() {
constructor(props) {
super (props)
}
return (
<footer className= "footer" >
<span className= "todo-count" >
<strong>0</strong>
<span>item left</span>
</span>
<ul className= "filters" >
<li>
<a href= "jvascript:;" >All</a>
</li>
<li>
<a href= "jvascript:;" >Active</a>
</li>
<li>
<a href= "jvascript:;" >Completed</a>
</li>
</ul>
<button className= "clear-completed" >
clear all completed
</button>
</footer>
)
}
}
export default Footer
|
3、提供了响应式 (Reactive)
4、props
在上面两个例子中,可以看到React和Vue都有'props'的概念,这是properties的简写。props在组件中是一个特殊的属性,允许父组件往子组件传送数据。
5、构建工具
React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境。React可以使用Create React App (CRA),而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。
由于CRA有很多选项,使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选,能按需创造不同模板,使用起来更灵活一点。
6、Chrome 开发工具
React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用,让你看到Vue或者React中的变化。你也可以看到应用中的状态,并实时看到更新。
7、配套插件
Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。
而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex,它们都是作为官方推荐的存在。而React的react-router和react-redux则是由社区成员维护,它们都不是官方维护的。
8、Vue和React均是单向数据流传递
单向数据流指只能从一个方向修改数据,姑且我们可以这样理解,如下图所示。一个父组件下有两个子组件1和子组件2,父组件可以向子组件传递数据。假如子组件都获取到了父组件的name,在子组件1中对name重新修改之后,子组件2和父组件中的值并不会发生改变,这正是因为Vue中的机制是单向数据流,子组件不能直接改变父组件的状态。但反过来,如果是父组件中的name修改了,当然两个子组件中的name也就改变了
4、props
在上面两个例子中,可以看到React和Vue都有'props'的概念,这是properties的简写。props在组件中是一个特殊的属性,允许父组件往子组件传送数据。
5、构建工具
React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境。React可以使用Create React App (CRA),而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。
由于CRA有很多选项,使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选,能按需创造不同模板,使用起来更灵活一点。
6、Chrome 开发工具
React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用,让你看到Vue或者React中的变化。你也可以看到应用中的状态,并实时看到更新。
7、配套插件
Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。
而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex,它们都是作为官方推荐的存在。而React的react-router和react-redux则是由社区成员维护,它们都不是官方维护的。
8、Vue和React均是单向数据流传递
单向数据流指只能从一个方向修改数据,姑且我们可以这样理解,如下图所示。一个父组件下有两个子组件1和子组件2,父组件可以向子组件传递数据。假如子组件都获取到了父组件的name,在子组件1中对name重新修改之后,子组件2和父组件中的值并不会发生改变,这正是因为Vue中的机制是单向数据流,子组件不能直接改变父组件的状态。但反过来,如果是父组件中的name修改了,当然两个子组件中的name也就改变了