迎接人人关注腾讯云手艺社区-segmentfault官方主页，我们将延续在博客园为人人引荐手艺佳构文章哦~

纪俊，处置Web前端开辟事变，2016年到场腾讯OMG广告平台产物部，喜好研讨前端手艺框架。

这里要议论的话题，不是前端框架哪家强，因为在 Vue 官网就已经有了比较周全客观的引见，而且是中文的。

上图是二月份前端框架排名，React 位居第一，Vue 排名第三。还清楚记得，16 年十月份该 showcase 首页并未看到 Vue，如今已有 40000+ stars，当时的 React 也差不多这个结果，可见 Vue 2.0 有多受关注，而排名第二的 Angular 当时位居第一，短短数月 React、Vue 都有比较好的结果，而 Angular 的 stars 没有显著增进，是不是能够断章取义，Angular 正在慢慢地退出这个舞台。

关于近期关注度最高的 React 和 Vue，想在这里谈谈两个框架在开辟作风上的差别。Vue 升级到2.0今后新增了许多 React 原有的特征，我的邃晓是 Vue 在这些方面临 React 的一定和致敬，下面将在几个细节上作对照。

Vue更轻易上手

Vue 更轻易上手！这是真的吗？我书读的少，作者是想支撑国产吗？

Vue 的语法很自在，比方：

前期不须要熟习庞杂的性命周期函数，能够只体贴 mounted 和 Vue.nextTick（保证 this.$el 在 document 中）

熟习的前端模板

父子组件间通讯更天真

slot，能够大标准地扩大组件（但也不要过分运用哦）

v-model，mvvm 的体式格局处置惩罚表单更轻易

官网中文文档（哈哈，不能不认可）

从入门进修一个框架的角度看，少一些划定规矩多一些自在空间，门坎会低些。

表单在 React 中的蛋疼的地方

React 和 Vue 怎样拿 input 的 value，先上代码

Reactjs

class Demo extends React.Component{
  constructor(props){
    super(props)
    this.state={
      inputA: '',
      inputB: ''
    }
  }
  _onChangeA(e){
    this.setState({
      inputA: e.target.value
    })
  }
  _onChangeB(e){
    this.setState({
      inputB: e.target.value
    })
  }
  render() {
    return (
      <div>
          <input 
          onChange={this._onChangeA.bind(this)} 
          value={this.state.inputA}
          />
        <input 
          onChange={this._onChangeB.bind(this)} 
          value={this.state.inputB}
          />
      </div>
    );
  }
};

ReactDOM.render(
  <Demo/>,
  document.getElementById('container')
);
###**Vuejs**

<div id="demo">
    <input 
      v-model="inputA"
      :value="inputA"/>
    <input 
      v-model="inputB"
      :value="inputB"
      />
    <button
      @click="show"
      >
      show
    </button>
</div>
new Vue({
    el: '#demo',
    data: {
      inputA: '',
      inputB: ''
    }
})

Vue 举行表单处置惩罚的体式格局是不是是更简约，因为 v-model 属性支撑数据双向绑定，说白了就是（value 的单向绑定 + onChange 事宜监听）的语法糖，但这个滋味还不错吧，比起在 React 中须要绑定多个 onChange 事宜确切要轻易很多。

JSX vs Templates

刚打仗 React，因为用惯了javascript 模板引擎，一向深信视图与功用逻辑星散是准确的挑选，倏忽看到 JSX 把 html 写在 js 里，心田是谢绝的！

Facebook 官方彷佛晓得人人对 JSX 有私见，在文档一开始就给出诠释

We strongly believe that components are the right way to separate concerns rather than “templates” and “display logic.” We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.

在这里连系我的邃晓翻译一下， React 团队深信一个组件的准确用处是 “separate concerns”，而不是前端模板或许展现逻辑。我们认为前端模板和组件代码是严密相连的。别的，模板言语常常让展现的逻辑变得更庞杂。

刚开始没弄邃晓什么是 “separate concerns”，实在如今也… Facebook 多是在强调组件应当从功用上去笼统定义，而不仅仅从视觉上辨别。

看完官方回复我欣然接受了，有谁在写前端模板的时刻，没有搀杂营业逻辑的，搀杂了不就违犯 MVC 吗！Facebook 认为这类“星散”让题目更庞杂，不如把模板和逻辑代码连系到一块。而开辟者一开始不接受 JSX，是遭到传统js拼接字符串模板的枯燥体式格局影响，实在 JSX 更天真，它在逻辑才能表达上完爆模板，但也很轻易写出缭乱的render函数，不如模板直观
组件通讯

Vue 组件向上通讯可经由过程触发事宜，但在 Vue 2.0 烧毁 dispatch，发起运用global event bus。而大多初学者认为 React 只能靠挪用父组件的 callback，而且这类体式格局碰到组件条理太深的时刻险些就是恶梦。实在 React 也能够经由过程事宜通讯来解决题目，只不过须要分外 coding 或挪用第三方插件，而 Vue 的中心库已完成了该功用。React 具有雄厚的生态圈，许多事变是人人一同完成的。

ref or props

父组件可经由过程 ref 定位子组件并挪用它的 api，也可经由过程 props 通报数据，完成父组件关照子组件，ref 和 props 这两种体式格局将决议组件的形状。在现实开辟中，能够 Vue 先入为主，ref 也用的比较多，因为它在组件封装力度上确切有上风， api 可以让组件更笼统、更关注本身的功用，不受外界影响。而厥后转到 React 险些都是用 props 通讯，一开始还认为是 React 的题目，以至还得出了如许的结论：React 组件像是 UI 组件，Vue 组件更靠近对象。直到近来看了 Facebook 文档，才发明尚有蹊跷。先看看之前用 Vue ，我是怎样去建立一个列表（List）组件，并完成列表数据的新增和删除，以及挪用体式格局。

没用过 ref 的同砚，能够先看下文档，不过看完下面代码也能也许晓得 ref 的作用。

Vuejs

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">
  <input
    :value="input"
    v-model="input"
    />
  <button
    @click="add"
    >
    add
  </button>
  <List
    ref="list"
  />
</div>
var List = Vue.extend({
  props: {
    list: {
      type: Array,
      default: function(){return []}
    }
  },
  template:'<div><ul v-for="(item, index) in list"><li>{{item.name}} <i @click="deleteItem(item, index)">delete</i></li></ul></div>',
  data: function(){
    return{
        input: ''
    }
  },
  methods: {
    addItem: function(name){
        this.list.push({name: name})
    },
    deleteItem: function(item, index){
        this.list.splice(index, 1)
    }
  }
})

Vue.component('List',List)

new Vue({
    el: '#demo',
    data: {
      input: ''
    },
    methods: {
      add: function(){
        this.$refs.list.addItem(this.input)
      }
    }
})

再看看 React 是怎样做的

class List extends React.Component{
  _delete(index){
    this.props.onDelete && this.props.onDelete(index)
  }
  render() {
    return (
      <ul>
      {
          this.props.list.map((item, index)=>{
          return (
            <li 
              key={index}
            >
                 {item} 
              <i onClick={this._delete.bind(this, index)}>
                  delete
              </i>
            </li>
          )
        })
      }
      </ul>
    );
  }
};

class Page extends React.Component{
  constructor(props){
    super(props)
    this.state={
      input: '',
      list: []
    }
  }
  _bindChange(e){
    this.setState({
      input: e.target.value
    })
  }
  _add(){
    this.state.list.push(this.state.input)
    this.forceUpdate()
  }
  _delete(index){
    this.state.list.splice(index, 1)
    this.forceUpdate()
  }
  render() {
    return (
      <div>
        <input
          onChange={this._bindChange.bind(this)}
          value={this.state.input}
          />
        <button
          onClick={this._add.bind(this)}
          >
          add
        </button>
        <List
          list={this.state.list}
          onDelete={this._delete.bind(this)}
        />
      </div>
    );
  }
};

ReactDOM.render(
  <Page/>,
  document.getElementById('container')
);

经由过程上面两段代码能够看出，在挪用 List 组件的时刻，React 比 Vue 庞杂的多，不仅仅是多了 onChange，另有新增和删除的逻辑，都必须在父组件中完成，如许会致使项目中多处挪用 List 组件，都必须完成这套类似的逻辑，而这套逻辑在 Vue 中已封装在组件里，这也是为何应用 ref 在封装力度上有上风，所以给我的觉得，React 比较关注组件的展现，而 Vue 比较关注功用。

仔细的同砚能够发明了，React也有 ref 属性，它也能够让父组件挪用子组件的 api，但现实项目中却很少看到，为何人人都这么同步一致呢？我查了一下文档，本来 Facebook 不引荐过分运用 ref

Your first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. See the Lifting State Up guide for examples of this.

官方另有个栗子，这里我也举个比较罕见的

基于上面的栗子，比方如今列表数据多啦！须要在列表顶部显现有若干条数据！我们能够定义一个显现条数的组件 Counts。

Vuejs

var bus = new Vue()
var Counts = Vue.extend({
  data: function(){
    return{
      count: 0
    }
  },
  template: '<span>{{count}}</span>',
  mounted: function(){
    var self = this
    bus.$on('plus', function(){
      self.count++
    })
    bus.$on('minus', function(){
      self.count--
    })
  }
})
Vue.component('Count', Count)
Reactjs

let Counts = (props)=>{
  return (
    <span>
      {props.count}
    </span>
  );
}

如根据 Vue 的完成要领（好吧！这里彷佛要黑 Vue，现实上是我一开始的误会），Counts 组件需监听两个事宜（plus & minus），在事宜回调中去更新条数，当 List 举行add() 或 delete() 需触发plus / minus，且不说 Counts 组件庞杂，这事宜流也很难追溯，代码放久看着费劲！但 React 把同享数据抽离了，父组件把this.state.list.length经由过程 props 传入 Counts，这类体式格局逻辑更清楚，扩大才能更强。虽然像 React 这类，在不须要组件同享数据时，挪用起来很烦琐，挪用 List 时add / delete 逻辑都要写一遍，但营业的生长很难说，许多意想不到的状况都邑发作，比方上面的栗子，后期指不定还要加一个分页组件呢，所以我回头是岸，今后不论在 Vue 照样 React，只管罕用 ref 挪用子组件。当组件之间有同享数据时，该数据与操纵该数据的逻辑，应当放在最靠近它们的父组件，如许组件的逻辑会更合理，更清楚！

末了，这两个框架的线路有差别，Vue 倾向大而全，把许多特征都封装进中心库，React 则差别，React 中心库只是 React 生态圈很小一部分，只担任 view 这个层面，别的事变都是由人人一同完成，所以 React 会有这么多插件。Reactjs 和 Vuejs 都是巨大的框架！

迎接到场QQ群：374933367，与腾云阁原创作者们一同交换，更有时机介入手艺大咖的在线分享！

相干浏览

Vue.js前后端同构计划之预备篇——代码优化
Vue.js 实战总结
React 同构头脑

此文已由作者受权腾讯云手艺社区宣布，转载请说明文章出处
原文链接：https://www.qcloud.com/commun…
猎取更多腾讯海量手艺实践干货，迎接人人前去腾讯云手艺社区