有能力的人影响别人，没能力的人受人影响。
人生就像一杯茶，不会苦一辈子，但总会苦一阵子。
最近比较火的前端mvvm框架分别是angular、react和vue。作为一个合格的程序员，如果不掌握这些mvvm框架真的会被残酷的现实淘汰掉。最近研究了下vue.js，感觉这款小巧的mvvm框架非常的不错...前端MVVM框架之“Vue.js实战篇”
前言：看过我之前写的系列文章（、)，相信大家对vue.js这个前端框架有了一定的了解。想必也想把Vue急切的运用在项目中，看看它的魅力到底有多大？别急，今天我会满足大家的想法。我们一起来看看“Webpack+Vue”的开发模式相比以往老项目(Gulp+jQuery)的开发模式的魅力在哪里。一、配置开发环境& 1、先安装Node和Webpack,如何安装请看这篇文章“”。& 2、建立一个文件夹为:Vue-project，然后初始化生成package.json。运行以下指令:npm&init& &初始化完成后，添加项目开发所依赖的包&dependencies&:&{
&&&vue&:&&^2.2.2&,
&&&vue-router&:&&^2.3.0&,
&&&vue-template-compiler&:&&^2.2.2&
&devDependencies&:&{
&&&axios&:&&^0.15.3&,
&&&babel&:&&^6.3.13&,
&&&babel-core&:&&^6.3.21&,
&&&babel-loader&:&&^6.2.0&,
&&&babel-plugin-component&:&&^0.4.1&,
&&&babel-preset-es2015&:&&^6.3.13&,
&&&babel-preset-stage-2&:&&^6.22.0&,
&&&babel-runtime&:&&^5.8.34&,
&&&clean-webpack-plugin&:&&^0.1.9&,
&&&cross-env&:&&^1.0.6&,
&&&css-loader&:&&^0.16.0&,
&&&extract-text-webpack-plugin&:&&^1.0.1&,
&&&file-loader&:&&^0.8.5&,
&&&html-webpack-plugin&:&&^2.17.0&,
&&&moment&:&&^2.15.1&,
&&&node-sass&:&&^4.5.0&,
&&&sass-loader&:&&^3.2.3&,
&&&style-loader&:&&^0.12.3&,
&&&url-loader&:&&^0.5.6&,
&&&vue-loader&:&&^11.1.4&,
&&&vue-hot-reload-api&:&&^2.0.6&,
&&&webpack&:&&^1.12.0&,
&&&webpack-dev-server&:&&^1.14.0&
}& &&& &在package.json的scripts模块，添加项目运行指令和打包指令&dev&:&&webpack-dev-server&--progress&--colors&--inline&,
&build&:&&cross-env&NODE_ENV=production&webpack&--progress&--hide-modules&& && 3、安装所需模块，运行指令npm&install& &注：可能由于网络原因，导致某些包不能下载成功。别担心，我们可以尝试把npm的镜像地址切换成淘宝镜像。运行如下指令:npm&install&-g&cnpm&--registry=https://registry.npm.taobao.org& &安装指令跟npm一样，只不过前面需要添加一个c。比如：cnpm&install&xxxx二、搭建项目结构& &可能在我们以前开发一个项目，所搭建的项目结构如下图所示:& && &可是现在的项目基本都是基于前端工程化的，包括的东西也很多(前端路由、包管理、配置文件...)。很显然，从最开始按照单一资源分类，来划分目录结构是不可行的。 于是，又得改造项目目录结构。可能是这样的 (仅供参考)& & &俗话说的好:“工欲善其事必先利其器”。一个合理的项目结构，能体现各模块的职责与分工，减少成员间的沟通成本，更好的管理项目。&& &三、正式开发& &好了，可能有人会说，你前面扯了很多废话。都还没谈如何开发呢? 别急大兄弟，心急可吃不了热豆腐，得慢慢来!&& &运行我们之前添加好的指令&npm&run&dev& &访问http://localhost:8188& &不出意外，你会看到如下图一样:& && &那么恭喜你，一个Vue+Webpack的初始化项目已经完成了。不妨赶紧修改下文件:& &1、看是否能实现热加载。& &2、父组件传递数据到子组件,子组件能否收到。& &3、ajax能否正常运行 &注:(ajax模块看下图)& &....& && &于是，我们很愉快的把项目开发完成。那么怎么把项目上线呢?& &可以运行以下打包命令npm&run&build& &打包成功后，就行生成一个dist文件夹。然后把这个文件夹放到后端的web容器里面就行了。&& 看完文章后，可能有些朋友会有一些疑问:& &1、前端页面之前跳转是如何是实现的？& &答：因为Vue提供了一款叫路由的工具Vue-Router，页面的切换于跳转就是靠它实现的。& &2、组件间的数据传递，跨组件通信有什么方法呢？或者说几个组件同时共享一份数据!& &答：虽然官方提供了事件总线来解决，但我个人建议你可以用Vuex(全局状态管理)来解决。& &3、除了用你的项目脚手架(初始化)，还有其它的脚手架可以直接生成项目吗？& &答：官方提供了Vue-cli的工具，也可以帮你完成项目初始化工作。&& &项目下载GitHub地址: 写在最后：Vue+webapck的这种开发模式，相对于老项目。我觉得在最大的好处在于:& &1、提升了我们的开发效率(通过webpack可以实现组件按需加载、静态资源打包合并压缩...)& &2、组件化友好(任何一个组件都是一个独立的模块,互不影响)Vue是一个渐进式的框架，你可以把它当成简简单单的模板使用。也可以用作SPA(单页面应用)，进行前后端分离开发。& &还犹豫什么啊，赶紧上车啊!本文出自段亮个人博客,如需转载请注明出处。本文出处:
如果您觉得文章对你有帮助，可以进行打赏。
打赏多少，您高兴就行，谢谢您对段亮这小子的支持！ ~(@^_^@)~
微信扫一扫
支付宝扫一扫
下一篇：没有了
把此文章分享给其它人..
或许你还喜欢以下内容:
你也想建立一个独立博客？七周七种前端框架四：Vue.js 组件和组件通信
基本是按照官网的 Guide 全部梳理了一遍：http://vuejs.org/guide/index.html
这里我们以一个 Todo List 应用为例来把相关的只是都串起来，这篇里面的全部代码都在github上 /lihongxun945/vue-todolist
一个 Vue 应用是由一个 root vue instance 引导启动的，而 Vue instance 是这么创建的：
var vm = new Vue({
// options
一个 instance 实际上就是 MVVM 中的一个 VM。 传入的配置对象中data里的所有属性都会被挂载到 instance上，而为了避免命名冲突，Vue 内置方法都会以 $ 开头的属性挂载到 instance 上。
instance 从创建到销毁会经历如下生命周期：
在初始化的时候大致经过三步:
绑定数据监听，即对 data 的监听
插入document或者替换对应dom
# Vue 基本语法
Vue 使用的是一种 类 mastache 语法。常用绑定语法分这么几类：
mastache 语法，比如 {{ data }} {{ data | filter}}
v-bind 绑定属性，比如 v-bind: href, v-bind:class
v-on 绑定事件, 比如 v-on:click, v-on:submit
其中 v-* 都是 directive
Vue 支持一个很有意思的属性计算语法，可以指定一个属性由其他属性计算出来，这样就不用通过 $watch 来实现了：
var vm = new Vue({
el: '#example',
computed: {
// a computed getter
b: function () {
// `this` points to the vm instance
return this.a + 1
## 流程控制和列表相关的语法
包括 `v-if`, `v-show`, `v-else`, `v-for`
双向数据绑定：
动画的实现方式和 Angular 以及 React 都是一样的，都是通过添加和删除 class 来实现的。
# Component
组件的基本用法
Component 的定义包括两部分：
1 创建component类：
var Profile = Vue.extend({
template: " Lily "
2 注册一个 tagname：
<ponent("me-profile", Profile);
这样我们就可以通过 tagname 来使用这么组件了：
<ponent("me-profile", Profile); 属于全局注册，如果只是在某一个页面内使用，可以通过局部注册的方式：
var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
其中因为我们的 Vue 实例是绑定在 todo 元素上的，所以如果把 my-profile 放在这个元素外面是无效的，只有放在这个里面才会被 Vue 的这个实例引导初始化。
注意事项：
Vue 构造函数可以传的参数基本都可以用在 Vue.extend 上，但是对 el 和 data 两个参数需要注意，为了避免不同实例间共享同一个对象，总是要通过 function 返回一个新的对象比较靠谱：
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
因为参数都一样，其实他们俩就是同一个东西，不过一个是组件，一个是用来引导Vue启动的。
模板注意事项
因为 Vue 就是原生的DOM，所以有些自定义标签可能不符合DOM标准，比如想在 table 中自定义一个 tr，如果直接插入 my-component 不符合规范，所以应该这样写：
Props 传递数据
在 Vue 中每个组件都是独立的，不能也不应该直接访问父类的data。所以我们通过 props 来向子组件传递数据，是不是和 React 的方式很像？
不同于 React，在 Vue 中子组件需要先声明自己的 props 才行：
var Profile = Vue.extend({
props: ["name"],
template: `
{{name}}'s Todo List
{{name}} is a good girl
然后我们可以在使用 Profile 的时候这样传递参数：
这种是通过字面量传递参数，所以传递的值一定是字符串。还有一种方式是动态传参，通过 v-bind 来传递参数，可以双向绑定数据或者传非字符串参数：
v-bind 如果是一个字符串，则是绑定父组件的data中对应的字段，比如上面就是双向绑定了 input 的值。如果是一个数字则就是绑定了一个数字。
Vue 还可以显式指定单向还是双向的数据绑定：
Props 校验
一个好的组件总是应该先验证参数是否正确，另外可能还需要设置一些参数的默认值：
var Profile = Vue.extend({
type: String
父子组件通信
上面讲到的 props 其实就是父组件向子组件传递消息的一种方式。
在子组件中有一个 this.$parent 和 this.$root 可以用来方法父组件和根实例。不过，现在我们应该避免这么做。因为组件本身就是为了封装独立的逻辑，如果又去直接访问父组件的数据就破坏了组件的封装性。
所以我们应该还是应该通过父组件向子组件传递 props 的方式来通信。
当然 props 其实只能做回调。在 React 中就探讨过这个问题，React 的做法就是通过 props 来做，传一个回调函数给子组件。其实我不是很喜欢这种把回调函数传来传去的方式，我更喜欢的是事件的方式。Vue 中子组件可以通过通过事件和父组件进行通信的。向父组件发消息是通过 this.$dispatch，而向子组件发送消息是通过 this.$boardcast，这里都是向所有的父亲和孩子发送消息，但是一旦执行一个回调之后就会停止，除非这个回调函数显式返回了 true。
我们把之前的Todo List拆成不同的组件来实现，这样可以体验下如何进行组件的双向通信，我们拆分出两个组件，分别是 List 和 Form 。
Form 负责处理用户输入，并在提交表单的时候向父组件发送一个 add 消息，代码如下:
var Form = Vue.extend({
username: {
type: String,
default: "Unnamed"
data: function() {
input: "",
template: `
{{username}}'s Todo List
methods: {
add: function() {
this.$dispatch("add", this.input); //这里就是向父组件发送消息
this.input = "";
List 只负责展示列表和处理用户勾选操作，它接收到 add 消息之后会在自己上添加一个条目：
var List = Vue.extend({
template: `
{{todo.title}}
initList: {
type: Array
data: function() {
add: function(input) {
if(!input)
this.list.unshift({
title: input,
done: false
然后，因为这是两个组件，当然需要一个 Vue 实例来引导启动，我们的实例如下：
var vm = new Vue({
el: "#todo",
components: {
"todo-form": Form,
"todo-list": List
add: function(input) {
this.$broadcast("add", input);
注意，其实 Form 和 List 在逻辑上是平级的组件，所以他们没有父子关系，他们共同都是 vm 的孩子。这里 vm 接到 Form 的消息之后会转发给 List。
html 代码就更简单了：
通过 Slot 可以实现把父组件渲染出来的HTML插入到子组件中，目前还不清楚什么时候会需要这样做，而且这么做对子组件的侵入性太大。
动态切换组件
这个功能感觉有点多余，感觉很多情况下我们应该是通过逻辑代码来实现切换，而不是通过Vue内置的动态组件来切换。不过用来实现一个类似 tab 切换的功能还是很方便的。
我们这里给 Todo List 增加一个 about 页面。那么首先我们需要把 vm 改成一个组件，这个组件叫 Todo，它就是整个 Todo 页面：
var Todo = Vue.extend({
template: `
components: {
"todo-form": Form,
"todo-list": List
add: function(input) {
this.$broadcast("add", input);
其实改动就第一行。
然后我们需要创建一个 About 组件：
var About = Vue.extend({
template: `
About Todo List V0.1.0
Content here
接下来是重点了，我们要创建一个实例 vm，这vm要负责切换这两个页面：
var vm = new Vue({
el: "body",
currentView: "todo"
components: {
"todo": Todo,
"about": About
这里我们定义了一个 currentView 字段，当然可以是任意名称，然后通过特殊的 component 标签来进行组件切换：
上面的代码有两处需要注意：
通过 component
这个特殊标签，然后用 :is 属性来进行组件的切换。
radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。
数据绑定的实现原理
Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter 和 setter 方法实现的，所以不支持 IE8 及以下，这种实现方式有两个容易犯错的地方：
如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能会动态添加，这个时候应该通过 vm.$set(“name”, value) 的方式来添加。
无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 是一个对象，那么 data.a.b = 1 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。
异步更新机制
Vue 对DOM的更新是异步的！ 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 中执行完，所以如果修改了 Data 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：
vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
或者这样：
vm.$nextTick(function () {
this.$el.textContent === 'new message' // true
花了半天时间才看完组件，下面应该去看一下另一个重点： Directive当前位置: &>&&>& >
vue+leancloud轻松实现个人博客
最开始是在用wordpress做为个人博客，由于其过于臃肿和繁琐，后来改为Hexo托管在github上，但是个人觉得还是在访问速度方面有些慢且发布文章不是很方便快捷，所以决定自己作一个轻便的blog。首先贴出自己的demo
为什么使用vue
因为Vue是一个非常轻量级的前端框架，其他原因我不再一一赘述，具体可见Vue官方文档
leancloud是什么
leancloud为我们提供数据存储、实时消息和推送、统计分析，对于个人站点的使用是绰绰有余。
本博客框架
采用前端使用vue 1.0做为开发框架，leancloud为本站提供数据储存服务。
23.38.20.png
看到文件目录之后应该对本站的结构了解很清楚了，代码中使用到了vuex，使数据流动更加清晰和简单。这个时候我们应该关心在什么地方使用到了leancloud？怎么调用leancloud？如何在leancloud上存储数据并查看数据？切莫急，接下来便是：
在什么地方使用到了leancloud？
从上图中可看出，代码中使用了vuex操作数据，所以在service层与leanchoud了发生了数据交互，部分代码如下：
export const getArticles = ({
}, data) =& {
const query = new AV.Query('Articles');
query.descending('createdAt');
query.limit(data.limit); // 最多返回 10 条结果
query.skip(data.start);
query.find().then(function(results) {
ditch('getArticles', results);
}, function(error) {});
但是这样使用就可以了吗？No
怎么调用leancloud？
本站是直接在index.html中加入下面代码：
&script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"&&/script&
在ext/vue_ext.js文件中封装leancloud初始化的方法，如下：
function AVInit(){
const appId = 'Your appID';
const appKey = 'Your appkey';
AV.init({ appId:appId, appKey:appKey });
然后在App.vue中调用此方法进行初始化，就可以创建 class 或任何其他操作了。
如何在leancloud上存储数据并查看数据?
在对leancloud进行初始化之后，数据的增删改查操作全部是在src／service层中完成的，具体方法可查看代码以及leancloud官方数据存储文档
由于时间仓促，本站目前仅实现了以下功能：
博客内容的发布、管理
支持markdown语法编辑
支持简单的代码高亮
页面自适应
后续需要实现的功能
由于markdown组件中的样式是自己编写的，所以只能支持简单的语法高亮，后续改进中会加入 PHP、javascript、html等代码样式
账户的登录(包括创建用户和第三方用户的登录)
可根据白天夜间调节主色调
后三个都是可以使用leancloud提供的服务完成，具体方法会在后续代码中提供。代码在build完成之后是存放在cdn上的，所以访问速度会快很多。
至此，书写完毕，如有欠缺，请多指教。
延伸阅读：
(责任编辑：美朵)
每日重点推荐
夏医生是自己多年老同事的儿子，国外学成归来做事业，老同事担心儿子诊所刚开，门厅罗雀伤了自尊，便偷偷塞钱给李梅，求她装病去“捧场”。
一周热点文章
在线阅读专题2016年，React在Web端和移动端都实现了迅速的成长，稳稳地领先于其主要竞争对手Augular，巩固了其作为前端框架之王的地位。
但是Vue在这一年里的表现也可谓同样的耀眼。Vue.js 2.0 的发布在整个JavaScript社区都引起了巨大反响，这一点仅从它在Github中涨了25,000颗star，就足以得到证明。
不得不说React和Vue的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。
因此，很多Web开发者都难免纠结到底要从中选择哪一个框架。这两者中能否分出个高下好坏？或者它们各自有哪些优缺点是需要我们注意的？还是说它们实际上差不多，用谁都一样？
两种框架，两个拥护者
在这篇文章中我想用尽可能公平，全面的对比来回答这些疑问。但是问题来了：我是个不折不扣的Vue迷弟，肯定会偏向它。今年我在项目中大量地使用了Vue，在Medium上安利它的好处，甚至还在Udemy开设了一门关于Vue的入门课程。
为了平衡一下，我邀请了我的朋友Alexis Mangin一起参与讨论。他是一名优秀的Javascript开发者，且是React的铁粉。与我相似的是，他也频繁地在各种项目中（包括Web端和移动端项目）使用着React。
有一天他问我说：“为什么你这么喜欢用Vue，而不是React？”，当时由于我不太了解React，所以很难给出一个很好的回答。于是我向他提议，我们找一天带上各自的笔记本电脑，一起探讨我们各自喜爱的框架的好处。
Anthony（左）和 Alexis（右）在泰国清迈的Bull and Bear咖啡馆里比较React和Vue
经过大量地讨论和互相学习，我们得出了以下六个关键点：
如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue
Vue应用的默认选项是把markup放入HTML文件中。数据绑定表达式使用的是与Angular相似的双大括号（moustache）语法，而指令（特殊的HTML属性）则用于向模板中添加功能。
下面是一个简单的Vue应用示例。它会展示一条消息（message），和一个用来动态反转这条消息的按钮：
&div id="app"&
&&p&{{ message }}&/p&
&&button v-on:click="reverseMessage"&Reverse Message&/button&
&el: '#app',
& &message: 'Hello Vue.js!
&methods: {
& &reverseMessage: function () {
& & &this.message = this.message.split('').reverse().join('');
React应用则与之相反，不使用模板，而是要求开发者借助JSX在JavaScript中创建DOM。下面是用React实现的相同的应用：
&div id="app"&&/div&
// JS (pre-transpilation)
class App ponent {
&constructor(props) {
& &super(props);
& &this.state = {
& & &message: 'Hello React.js!'
&reverseMessage() {
& &this.setState({
& & &message: this.state.message.split('').reverse().join('')
&render() {
& &return (
& & &&div&
& & & &&p&{this.state.message}&/p&
& & & &&button onClick={() =& this.reverseMessage()}&
& & & & &Reverse Message
& & & &&/button&
& & &&/div&
ReactDOM.render(App, document.getElementById('app'));
对于来自标准Web开发的新开发者来说，模板更容易理解。然而甚至连一些资深的开发者也喜欢使用模板，因为模板能更好地把功能和布局分割开来，还为使用Pug之类的模板引擎提供了可能。
不过使用模板的代价在于你需要学习所有的HTML扩展语法，而渲染函数（render function）只要求会使用标准的HTML和JavaScript。而且比起模板，渲染函数更易于调试和测试。但是，你并不应该因此就错过Vue，因为在Vue2.0中已经提供了使用模板或者渲染函数的选项。
如果你喜欢简单和“能用就行”的东西，请使用Vue
一个简单的Vue项目能不需要转译直接使用在浏览器中，这使得在项目中使用Vue可以像使用jQuery一样容易。当然这对于React来说在技术上也是可行的，但典型的React代码是更多地依赖于JSX和诸如class等ES6特性的。而Vue的简单则是更深层地源于其设计的。让我们来比较一下这两个框架是如何处理应用数据的（即“state”）：
React里的状态（state）是不可变（immutable）的，因此你不能直接地改变它，而是要用setState&API方法：
this.setState({
& &message: this.state.message.split('').reverse().join('')
React是通过比较当前状态和前一个状态的区别来决定何时及如何重新渲染DOM的内容，因此需要使用不可变的状态。
而与此相反的是，Vue中的数据是可变的（mutated），所以同样的数据变量可以用简洁得多的方式修改：
// Note that data properties are available as properties of
// the Vue instance
this.message = this.message.split('').reverse().join('');
让我们来看看Vue中是如何对状态进行管理的：当你向状态中添加一个新对象时，Vue将遍历其中的所有属性并且将它们转换为getter，setter方法。于是Vue的响应系统开始保持对该状态的跟踪，当该状态的内容发生变化的时候就会自动重新渲染DOM。令人佩服的是，Vue中改变状态的操作不仅更加简洁，而且它的重新渲染系统实际上比React的更快更高效。
不过Vue的响应系统还是有些坑的，比如它无法检测属性的添加和删除，以及某些数组更改。这时候就要用Vue API中的类似于React的set方法的措施来解决。
如果你的应用需要尽可能的小和快，请使用Vue
当应用程序的状态改变时，React和Vue都会构建一个虚拟DOM并同步到真实DOM中。两者都有它们各自的优化这个过程的方式。
Vue的核心开发者提供了一个benchmark测试，来表明Vue的渲染系统比React的更快，具体基准的设定以及同其他框架的比较详见vuejs.org。测试方法是将含有10000个项目的列表渲染100次，结果如下图。
从实用的角度来看，这种benchmark只跟边缘情况有关，而大部分应用程序中不会经常进行这种操作，所以这不应该被视作一个重要的比较点。但是，页面大小则是与所有项目有关的，这方面Vue又一次优于React，它目前的版本压缩后只有25.6KB。要用React实现同样的功能，你需要React DOM（37.4KB）和React with Addon库（11.4KB），共计44.8KB，几乎是Vue的两倍大。虽然从React你的确会得到更丰富的API，但双倍的体积并不能带来双倍的功能。
如果你计划构建一个大型应用程序，请使用React
像文章开头那样，用Vue和React实现的简单应用程序来比较两者，可能会让一个开发者从一开始就更倾向于Vue。这是因为基于模板的应用程序乍看上去更易理解，而且能很快地写好并跑起来。但是这些最初的便利会引入技术债并阻碍应用扩展到更大的规模。模板容易出现难以注意到的运行时错误，同时也不易于测试，重构和分解。
相比之下，Javascript模板可以组织成经过良好分解，且使用DRY（don't repeat yourself - 避免重复代码）原则的代码的组件，因而具有更强的可重用性和可测试性。Vue也有组件系统和渲染函数，但React的渲染系统可配置性更强，并包含如shallow rendering这样的特性，可结合React的测试工具一起使用，从而大为提高代码的可测试性及可维护性。
虽然React的不可变（immutable）应用状态写起来可能不够Vue简洁，但它在大型应用中仍会大放异彩，因为透明度和可测试性此时变得至关重要。
如果你想要一个同时适用于Web端和原生App的框架，请选择React
React Native是一个用于通过Javascript构建移动端原生应用程序的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。 如果你学过React.js，很快就能上手React Native，反之亦然。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class HelloWorld extends Component { &
&render() { & &
& &return ( & & &
& & &&View& & & & &
& & & &&Text&Hello, React Native!&/Text&
& & &&/View&
AppRegistry.registerComponent('HelloWorld', () =& HelloWorld);
其意义在于，开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。如果你想同时做Web端开发和移动端开发，学习React对你来说是相当划算的。
阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法，并计划未来实现完全集成Vue，不过集成的时间和具体细节还未确定。由于Vue的设计中将HTML模板作为其核心部分之一，并且现有特性不支持自定义渲染，因此以Vue.js目前的形态来说，很难看到Weex与之的关系将能像React和React Native一样紧密。
如果你想要最大的生态圈，请使用React
毫无疑问，React目前比Vue要受欢迎许多——它在NPM上每个月的下载量约为250万次，而Vue只有22.5万次。
人气带来的好处不仅是表面上的名声，还意味着更多相关的技术文章，教程和更多Stack Overflow上的解答和帮助；以及有着更多的工具和插件可以在项目中使用，开发者不用从零开始，可以省很多力气。
这两个框架都是开源的，但是React诞生于Facebook，自带给力的资助，它的开发者和Facebook都承诺会持续维护React。而Vue则是由独立开发者尤雨溪创造，目前也只有他一名全职维护者。虽然也有一些公司资助Vue，但是规模和Facebook和Google没得比。
不过由于Vue的团队的努力，它的小规模和独立性并没有成为劣势。Vue有着固定的发布周期，甚至更令人称道的是，Github上Vue只有54个待解决问题（open issue），已关闭问题（closed issue）则有3456个；与之相比，React的已关闭问题数目相差不多（3447个），待解决问题却有多达530个。
如果你已经对其中一个用得满意了，就没有必要换了
总结一下，我们发现，Vue的优势包括：
模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积
React的优势包括：
更适用于大型应用和更好的可测试性
同时适用于Web端和原生App
更大的生态圈带来的更多支持和工具
而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的：
利用虚拟DOM实现快速渲染
响应式组件
服务器端渲染
易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区
PS：最近这一周都晚睡，前天晚上都凌晨一点了，才睡觉，为啥？因为我在想，明年的一些工作安排，同时做一些计划和规划。我大学有几个好友，我们几个好友之间都会做个自己的个人年计划，大家公开说，然后到了年底就自报，之前，我们的内容基本就是：今年我要存多少钱，今年我要读几本，具体哪些书，今年要学一个什么新技能或者发展一个新爱好，今年要去哪里玩一下，计划很广泛，只要是自己想的均可以，所以我在想，我的2017，我要做点什么，你们也可以想想，你的2017，想好了，就要行动，光想不做，没用！
原文：/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d#.s40zfgkf1
译者：凯伦酱
译文：http://www.zcfy.cc/article/react-or-vue-which-javascript-ui-library-should-you-be-using-2159.html}