一、认识
Vue是目前比较流行了前端框架，git上的start数也是非常的多的（57.4K），接近react的start数了，可以说目前的趋势：前端两大框架“react”和“vue”，自身公司一直是在用react，所以对react有一定的了解，组件化、单项数据流、虚拟Dom等是react的特点，简单的来说一下本公司react的大概架构：webpack+react+redux+redux-form,UI框架用的是antd-design这一套，可以说中等以下的项目这些都能实现的了。那为什么要学习Vue，其实也是出于兴趣，并且公司目前的任务不多，所以就在各种关于前端信息的网站上看到了Vue（ps：其实早就听说过），也看过很多关于对比的文章，这里就不多阐述了，有兴趣的同学可以百度，相信你一定会找到答案的。我想说的就是从react的角度去理解Vue。
仔细阅读过官网后，做了些小的例子，能看出Vue其实也挺好用的，react有的Vue也有，虚拟dom，虽然说是后加的，但是原理都是相通的，尽可能的去减少dom的操作，而且也不用我们开发者去操心有关dom性能的问题，这些react和Vue都帮助我们操心了，开发者只需要关注业务实现的逻辑。此外生命周期，一开始我以为是react独有的，没想到看到官网的后期，Vue也存在。可能是借鉴的吧！在这里就不多喷了…
1）下面是有关二者的生命周期：
Vue的生命周期官网分的比较细致,共有10个,react有7个,你可以根据项目的应用选择需要的生命周期去做相关的操作。
| react | Vue |
|---|---|
| componentWillMount | beforeCreate |
| componentDidMount | created |
| componentWillReceiveProps | beforeMount |
| shouldComponentUpdate | mounted |
| componentWillUpdate | beforeUpdate |
| componentDidUpdate | updated |
| componentWillUnmount | activated |
| deactivated | |
| beforeDestroy | |
| destroyed |
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
二、语法
二者的语法呢就属于完全不一样了。
1）Vue写页面遵循三大块1
2
3
4
5
6
7
8
9<template>
//写html的地方
</template>
<script>
//写js逻辑，vue相关方法，生命周期的位置
</script>
<style scoped>
//写css或者less等样式 scoped表示样式只在这个文件中起作用，有点类似react中css的模块化的配置一样，只在当前这个模块起作用
</style>
2）react的语法，大部分用于es61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16class Example extends React.Component {
constructor(props) {
super(props);
this.handleBtn = this.handleBtn.bind(this);//事件绑定的this书写在这里
this.state = {
}
}
render() {
return(
<div>
example
</div>
)
}
}
注意的是：react组件的命名需要 大写字母开头，vue就不需要,其他的用法也都不同，也没有什么可以比较的，具体的可以参考官网！
vue给开发者提供了很多的方法，相关类似的－－修饰－－就有很多，而react就需要自己去写，没有修饰！唯一可以做文章的地方就是在props和state上。
三、项目的结构
从react搭建的项目结构能预测到vue的项目结构，首先打包工具webpack ：这里面就包涵了插件的管理，服务的启动，脚本的命令等等，绝对的开发利器，其次就是router了，路有的管理，react有react-router，那vue就是vue-router,这点都是痛的，第三：状态管理器，react有redux，vue有vuex，但是二者的区别还是挺大的，我学习的时候也花了一点时间。其他的就没有什么了。
总之就是三大块：打包器＋开发框架＋路由管理＋状态管理器
关于这两个前端框架在我个git上都有相关的项目，有兴趣的同学可以copy下来，学习一下相关的各自的项目搭建，以及差异，这里就不细说了！奉上地址:
react 项目结构
或者直接clone https://github.com/jeremyChenMing/example-practice-webpack2.git
vue 项目结构
或者直接clone https://github.com/jeremyChenMing/vues.git
注：相关项目结构的说明已经在项目中标记了，各位看官应该能明白，其实明白了项目结构，大体也就明白了60％了。文章写的短，精华都在项目里面。
最后如果有什么问题，可以通过这个博客上有的联系方式给我提出问题，或者留言！一般都会在segmentfault
