Vue和React的小对比

Vue和React有很多相似的地方，比如两个的目标都是要以组件化的方式来重用前端代码。这就像是两超级英雄，在我们开发前段代码的时候帮我们出工出力。

超级英雄的内裤？

如果要说这两个超级英雄的差别，那么我们可以打这么一个比方：

Vue像是那个内裤外穿的超级英雄
React像是那个内裤内穿的超级英雄

来看一个最简单的Vue程序：

<div id="app">
  <p> {{ message }} </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue是基于模版的，像那个div标签的内容就是一个模板，里面可以内嵌逻辑{{ message }}。

再来看一个简单的React程序

<div id="app"></div>

class Message extends React.Component {
  render() {
    return <p> {{ this.props.message }} </p>
  }
}

ReactDOM.render(<Message massage="Hello React!"/>, document.getElementById("#app"))

在上面的两个例子里面，Vue版本的例子把<p> {{ message }} </p>放在了逻辑代码之外，而React版本的例子把<p> {{ this.props.message }} </p>放到了逻辑代码之内。

模板还是JSX

对于React来说，JSX是一个预处理器，它把类似<p> {{ this.props.message }} </p>这样的代码翻译成JavaScript表达式。虽然JSX支持一定的条件操作，但总体而言功能不强，因为JSX可以依托外部的JavaScript来进行条件操作。

对于Vue来说，<p> {{ message }} </p>是放置在外部的模板中的，而不是放在JavaScript代码中的。所以Vue要把很多逻辑内嵌在模板里面（参考Vue的文档Template Syntax），提供更多的语法糖。Vue的模板不仅是一个预处理器，同时肩负的数据流处理任务更重。在创建Vue实例的时候，可以相当多类型的的属性，比如除了基本的el、data和methods之外，Computed Properties and Watchers里面还描述了两种额外的属性：Computed和Watchers。

仔细看Vue的生命周期图Lifecycle Diagram，和React的生命周期图其实很像，不过多了一些模板相关的处理。

从另一个层面，React强迫程序员基于Component来设计代码；而在Vue的世界里，Component是一套机制，可以穿在里面，也可以穿在外面。下面是一个穿在里面的例子：

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

在上面的例子中，<button v-on:click="count++">You clicked me {{ count }} times.</button>被穿在了button-counter里面，于是button-counter变成了一个Component。

总结

总的来说，Vue替程序员做了很多决定，比较带有偏向性（opinionated）；而React把很多责任交给程序员。Vue更像是MVVM模型，而React更像是MVC模型。

超级英雄的内裤？#

模板还是JSX#

总结#

超级英雄的内裤？

模板还是JSX

总结