Vue基础知识

1. vue 的两个核心点
Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

应用类UI可以看作全部是由组件树构成的。

2. vue 组件中 data 为什么必须是一个函数？
js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data（Object的实例），类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

3. vue路由切换和用location切换url的区别
使用location.href=’/url’来跳转，简单方便，但是刷新了页面。
使用history.pushState(’/url’)，无刷新页面，静态跳转。
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

4. vue如何获取并操作DOM元素
直接给相应的元素加id,然后再document.getElementById(“id”)获取
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

5. 说出几种 vue 当中的指令和它的用法
{{…}}（双大括号） 插值表达式,数据绑定最常见的形式
v-html 用于输出 html 代码
v-text 是用于输出文本
v-if/v-show 条件判断指令
v-for 循环语法
v-bind 用于绑定属性的指令。可以简写为 : 要绑定的指令。
v-model 表单元素 和 数据的双向绑定。注意： v-model指令只能运用在表单元素中。
v-on 事件监听
事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
按键修饰符 v-on:keyup.enter : 允许为 v-on 在监听键盘事件时添加按键修饰符

6. v-if 和 v-show 有什么区别？
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换

v-if 会控制这个 DOM 节点的存在与否。

当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销。当只需要一次显示或隐藏时，使用v-if更加合理。

7. Vue中计算属性computed和监听属性函数watch的比较
1、计算属性computed适用的情形

当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。
计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。

computed: {
a1 () {
return this.obj.a
}
}
2、监听器watch适当的情形

watch 主要作用是监听某个数据值的变化。和计算属性相比除了没有缓存，作用是一样的。

比如现在需要监控data中，obj.a 的变化。Vue中监控对象属性的变化你可以这样：

watch: {
obj: {
handler (newValue, oldValue) {
console.log(‘obj changed’)
},
deep: true
}
}
deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: {
‘obj.a’: {
handler (newName, oldName) {
console.log(‘obj.a changed’)
}
}
}
借助 watch 还可以做一些特别的事情，例如监听页面路由，当页面跳转时，我们可以做相应的权限控制，拒绝没有权限的用户访问页面。

8. 简述Vue的响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

9. Vue.js特点
核心：组件化，数据驱动
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入

10. this.set 给data对象新增属性，并触发视图更新this.set(this.data,‘key’,‘value’)

• {{value}}

原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()：

addObjB () {
// this.obj.b = ‘obj.b’
this.$set(this.obj, ‘b’, ‘obj.b’)
console.log(this.obj)
}

11. vue怎么实现页面的权限控制

利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。

12. keep-alive有什么作用
在 Vue 中，每次切换组件时，都会重新渲染。如果有多个组件切换，又想让它们保持原来的状态，避免重新渲染，这个时候就可以使用 keep-alive。 keep-alive 可以使被包含的组件保留状态，或避免重新渲染。

例如：比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

13. vue-router原理
说简单点，vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。
每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。

14. vue路由传参数
使用query方法传入的参数使用this.$route.query接受使用params方式传入的参数使用this.$route.params接受

15. vue-router的路由的几种形式、路由的组件、路由的钩子函数
命名路由搭配params，刷新页面参数会丢失
查询参数搭配query，刷新页面数据不会丢失
接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点

params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失
路由的传参形式有：this.$router.push()
路由的组件有：

钩子函数有：全局前置守卫beforeEach，路由独享的守卫beforeEnter ，全局后置钩子afterEach，组件内的守卫beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave

16. route和router的区别
$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数。

而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等

17. Vue中注册在 router-link 上事件无效解决方法？

事件被阻止
因为router-link的作用是单纯的路由跳转，如果不阻止事件的话，也许会有很多坑，所以作者干脆阻止了其他事件的触发

如何解决

只需要在@click后面加上native就可以了

<router-link @click.native=“change”>{ {item.text} }
原生事件

添加native事件修饰符之后变为原生事件
$element.addEventListener(click, callback);

18. RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题？

把这种声明式的方式换成编程式的方式

<button class=“btn-card” @click=“changePath”>
methods: {
changePath () {
this.$router.push({ name: ‘Login’ })
}
}

19. vue中实现的数据双向绑定
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.

实现一个监听器Observer，数据监听器的核心方法就是Object.defineProperty( ),用来劫持并监听所有属性，如果有变动的，就通知订阅者。
实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。
实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

20. vuex原理
vuex的原理其实非常简单，它为什么能实现所有的组件共享同一份数据？

因为vuex生成了一个store实例，并且把这个实例挂在了所有的组件上，所有的组件引用的都是同一个store实例。

store实例上有数据，有方法，方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例，所以一个组件改变了store上的数据， 导致另一个组件上的数据也会改变，就像是一个对象的引用。

21. vuex的5个属性
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
在Vue组件中获得Vuex属性:

const store = new Vuex.Store({
state: {
count:0
}
})
我们可以通过Vue的Computed获得Vuex的state，如下：

const app = new Vue({
// …
store,
computed: {
count() {
return this.$store.state.count
}
}
})
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

computed:{
…mapState({
count: state => state.count // 使用ES6的箭头函数来给count赋值
})
}
22. v-for key的作用
使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;

我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;

{{item.name}}

const list = [
{
id: 1,
name: ‘test1’,
},
{
id: 2,
name: ‘test2’,
},
{
id: 3,
name: ‘test3’,
}
]
上面这种是我们做项目中常用到的一种场景,因为不加key,vue现在直接报错,所以我使用index作为key;

在最后一条数据后再加一条数据,此时前三条数据直接复用之前的,新渲染最后一条数据,此时用index作为key,没有任何问题;
在中间插入一条数据,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染;
最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性;使用id作为key值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

现在对比发现只有一条数据变化了,就是id为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的;

key的作用: 主要是为了高效的更新虚拟DOM。

另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

23. delete和Vue.delete删除数组的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

var a = [1,2,3,4]
var b = [1,2,3,4]
delete a[0]
console.log(a) // [empty,2,3,4]
this.$delete(b,0)
console.log(b) // [2,3,4]

24. 单页面应用和多页面应用区别及优缺点
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
前后端分离
页面效果会比较炫酷（比如切换页面内容时的专场动画）
单页面缺点：

不利于seo
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
初次加载时耗时多
页面复杂度提高很多

25. MVC,MVVC,MVVM模式的理解
MVC(Model-View-Controller)

Model(模型):数据层，负责存储数据。
View(视图):展现层，用户所看到的页面
Controller(控制器):协调层，负责协调Model和View，根据用户在View上的动作在Model上作出对应的更改，同时将更改的信息返回到View上。
三者之间的关系
Controller可以直接访问Model，也可以直接控制View,但是Model和View不能相互通信，相当于COntroller就是介于这两者之间的协调者。

MVVC(Model-View-View-Controller)

Model(模型):数据层，负责存储数据。
View(视图):展现层，创建需求创建cell
View(视图):定义数组，用来接收控制中的数据。处理回调（比如:刷新回调、点击cell回调、加载更多回调、动态视图高度回调等等）
Controller(控制器):加载网络数据懒加载

MVVM(Model-View-ViewModel)

Model(模型):数据层，负责存储数据。
View(视图):就是ViewController层，他的任务就是从ViewModel层获取数据，然后显示。
ViewModel(视图模型):就是View和Model层的粘合剂，封装业务逻辑处理，封装网络处理，封装数据缓存。就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。

MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

26. vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。

27. vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件

28. prop 验证，和默认值
我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。

props: {
visible: {
default: true,
type: Boolean,
required: true
}
}

29. vue 组件通信
父传递子
父：自定义属性名 + 数据（要传递）=> :value=“数据”
子：props ["父组件上的自定义属性名“] =>进行数据接收)

子传递父
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
子：this.$emit(‘自定义事件名称’, 数据) 子组件标签上绑定@自定义事件名称=‘回调函数’
父：methods: {自定义事件() {//逻辑处理} }

兄弟组件
通过中央通信 let bus = new Vue()
A：methods :{ 函数{bus.emit(‘自定义事件名’，数据)} 发送 B：created(){bus.on(‘A发送过来的自定义事件名’，函数)} 进行数据接收

30. 如何让CSS只在当前组件中起作用？
将当前组件的

31. $nextTick有什么作用？
vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

32 v-for 与 v-if 的优先级
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级,永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

• { { user.name } }

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历：

computed: {
activeUsers () {
return this.users.filter(user => user.isActive)
}
}
为了获得同样的好处，我们也可以：通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for

• {{ user.name }}

// ------

• {{ user.name }}

33. Vue子组件调用父组件的方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

34. axios的特点有哪些？
axios是一个基于promise的HTTP库，支持promise的所有API；
它可以拦截请求和响应；
它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
它安全性更高，客户端支持防御XSRF；

35. vue如何兼容ie的问题
babel-polyfill插件

36. 页面刷新vuex被清空解决办法？
localStorage 存储到本地再回去
重新获取接口获取数据

37. 如何优化SPA应用的首屏加载速度慢的问题？
将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
加一个首屏loading图，提升用户体验；

38. Vue 改变数组触发视图更新
以下方法调用会改变原始数组：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

39. 动态绑定class
对象方法

// active加不加单引号都可以，一样都能渲染
:class=“{ ‘active’: isActive }”

// 判断是否绑定一个active

:class=“{‘active’: isActive == 1}”

// 绑定并判断多个

// 第一种（用逗号隔开）
:class=“{ ‘active’: isActive, ‘sort’: isSort }”

// 第二种（放在data里面）
:class=“classObject”
data() {
return {
classObject: { active: true, sort: false }
}
}

// 第三种（使用computed属性）
:class=“classObject”
data() {
return {
isActive: true,
isSort: false
}
},
computed: {
classObject: function () {
return {
active: this.isActive,
sort:this.isSort
}
}
}

数组方法

// 单纯数组
:class=“[isActive, isSort]”

// 数组与三元运算符结合判断选择需要的class
:class=“[isActive ? ‘active’ : ‘’]”
:class=“[isActive ==1 ? ‘active’ : ‘otherActiveClass’]”

// 数组对象结合动态判断
// 前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class=“[{ active: isActive }, ‘sort’]”
:class=“[{ active: isActive == 1 }, ‘sort’]”

40. vue生命周期的理解？
总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。

41. 第一次加载会触发哪几个钩子？
会触发beforeCreate , created ,beforeMount ,mounted

42. 简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框

43. DOM 渲染在哪个周期中就已经完成？
mounted

=mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted() {
this.$nextTick(function () {
// …
})
}

44. Vue中如何在组件内部实现一个双向数据绑定？
假设有一个输入框组件，用户输入时，同步父组件页面中的数据

具体思路：父组件通过 props 传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下：

const Child = {
props: [‘value’],
template: <div> <input type="text" @input="handleInput" :value="value"> </div> ,
data () {
return {
}
},
methods: {
handleInput (e) {
this.$emit(‘input’, e.target.value)
}
}
}

new Vue({
components: {
CompOne: Child
},
el: ‘#root’,
template: <div> <Child :value1="value" @input="value = arguments[0]"></Child> </div> ,
data () {
return {
value: ‘123’
}
}
})
可以看到，当输入数据时，父子组件中的数据是同步改变的

我们在父组件中做了两件事，一是给子组件传入props，二是监听input事件并同步自己的value属性。

精简操作

45. vue中的 ref 是什么？
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

46. v-on可以监听多个方法吗？
可以。

<input type=“text” :value=“name” @input=“onInput” @focus=“onFocus” @blur=“onBlur” />

<input @keyup.enter=“submit” @focus=“onFocus”>

47. vue 与 react优缺点对比
vue
API设计上简单，语法简单，学习成本低
构建方面不包含路由和ajax功能，使用vuex, vue-router
指令（dom）和组件（视图，数据，逻辑）处理清晰
性能好，容易优化
基于依赖追踪的观察系统，并且异步队列更新
独立触发
v-model 实时渲染
适用于：模板和渲染函数的弹性选择
简单的语法及项目搭建
更快的渲染速度和更小的体积
react

利用jsx创建虚拟dom
是一种在内存中描述dom数状态的数据结构
函数式的方法描述视图
使用虚拟dom作为模板
程序片段
不好控制dom
服务端渲染：react的虚拟dom的生成可以在任何支持js的环境生成的，所以可以在node环境生成，直接转为string,然后插入到html文件中输出浏览器便可
适用于：大型应用和更好的可测试性；同时适用于web端和原生app;更大的生态圈
优点

React伟大之处就在于，提出了Virtual Dom这种新颖的思路，并且这种思路衍生出了React Native，有可能会统一Web/Native开发。在性能方面，由于运用了Virtual Dom技术，Reactjs只在调用setState的时候会更新dom，而且还是先更新Virtual Dom，然后和实际Dom比较，最后再更新实际Dom。这个过程比起Angularjs的bind方式来说，一是更新dom的次数少，二是更新dom的内容少，速度肯定快

ReactJS更关注UI的组件化，和数据的单向更新，提出了FLUX架构的新概念，现在React可以直接用Js ES6语法了，然后通过webpack编译成浏览器兼容的ES5，开发效率上有些优势.

React Native生成的App不是运行在WebView上，而是系统原生的UI，React通过jsx生成系统原生的UI，iOS和Android的React UI组件还是比较相似的，大量代码可以复用

维护UI的状态,Angular 里面使用的是 $scope，在 React 里面使用的是 this.setState。 而 React 的好处在于，它更简单直观。所有的状态改变都只有唯一一个入口 this.setState()，同构的JavaScript

单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。

React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。

因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

缺点

React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合，也不能称之一个完整的框架，比如你想用Promise化的AJAX？对不起没有，自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的，我也就只知道有Yahoo的Email。React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Redux和route相关的东西。

vue,react共性

虚拟dom实现快速渲染
轻量级响应式组件
服务端渲染易于集成路由工具，打包工具及状态管理工具