摘要：上圖是二月份前端框架排名，位居第一，排名第三。我們認為前端模板和組件代碼是緊密相連的。直到最近看了文檔，才發(fā)現(xiàn)另有蹊蹺。

歡迎大家關(guān)注騰訊云技術(shù)社區(qū)-segmentfault官方主頁，我們將持續(xù)在博客園為大家推薦技術(shù)精品文章哦~

紀俊，從事Web前端開發(fā)工作，2016年加入騰訊OMG廣告平臺產(chǎn)品部，喜歡研究前端技術(shù)框架。

這里要討論的話題，不是前端框架哪家強，因為在 Vue 官網(wǎng)就已經(jīng)有了比較全面客觀的介紹，并且是中文的。

上圖是二月份前端框架排名，React 位居第一，Vue 排名第三。還清晰記得，16 年十月份該 showcase 首頁并未看到 Vue，如今已有 40000+ stars，那時的 React 也差不多這個成績，可見 Vue 2.0 有多受關(guān)注，而排名第二的 Angular 當時位居第一，短短數(shù)月 React、Vue 都有比較好的成績，而 Angular 的 stars 沒有明顯增長，是否可以斷章取義，Angular 正在慢慢地退出這個舞臺。

對于近期關(guān)注度最高的 React 和 Vue，想在這里談?wù)剝蓚€框架在開發(fā)風格上的差異。Vue 升級到2.0之后新增了很多 React 原有的特性，我的理解是 Vue 在這些方面對 React 的肯定和致敬，下面將在幾個細節(jié)上作對比。

Vue 更容易上手！這是真的嗎？我書讀的少，作者是想支持國產(chǎn)嗎？

Vue 的語法很自由，比如：

前期不需要認識復(fù)雜的生命周期函數(shù)，可能只關(guān)心 mounted 和 Vue.nextTick（保證 this.$el 在 document 中）

熟悉的前端模板

父子組件間通信更靈活

slot，可以大尺度地擴展組件（但也不要過度使用哦）

v-model，mvvm 的方式處理表單更方便

官網(wǎng)中文文檔（哈哈，不得不承認）

從入門學習一個框架的角度看，少一些規(guī)則多一些自由空間，門檻會低些。

React 和 Vue 如何拿 input 的 value，先上代碼

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 (
      

          
        
      
    );
  }
};

ReactDOM.render(
  ,
  document.getElementById("container")
);
###**Vuejs**


    
    
    
      show
    

new Vue({
    el: "#demo",
    data: {
      inputA: "",
      inputB: ""
    }
})

Vue 進行表單處理的方式是不是更簡潔，由于 v-model 屬性支持數(shù)據(jù)雙向綁定，說白了就是（value 的單向綁定 + onChange 事件監(jiān)聽）的語法糖，但這個味道還不錯吧，比起在 React 中需要綁定多個 onChange 事件確實要方便得多。

剛接觸 React，因為用慣了javascript 模板引擎，一直堅信視圖與功能邏輯分離是正確的選擇，突然看到 JSX 把 html 寫在 js 里，內(nèi)心是拒絕的！

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.

在這里結(jié)合我的理解翻譯一下， React 團隊堅信一個組件的正確用途是 “separate concerns”，而不是前端模板或者展示邏輯。我們認為前端模板和組件代碼是緊密相連的。另外，模板語言經(jīng)常讓展示的邏輯變得更復(fù)雜。

剛開始沒弄明白什么是 “separate concerns”，其實現(xiàn)在也… Facebook 可能是在強調(diào)組件應(yīng)該從功能上去抽象定義，而不僅僅從視覺上區(qū)分。

看完官方答復(fù)我欣然接受了，有誰在寫前端模板的時候，沒有摻雜業(yè)務(wù)邏輯的，摻雜了不就違背 MVC 嗎！Facebook 覺得這種“分離”讓問題更復(fù)雜，不如把模板和邏輯代碼結(jié)合到一塊。而開發(fā)者一開始不接受 JSX，是受到傳統(tǒng)js拼接字符串模板的死板方式影響，其實 JSX 更靈活，它在邏輯能力表達上完爆模板，但也很容易寫出凌亂的render函數(shù)，不如模板直觀
組件通信

Vue 組件向上通信可通過觸發(fā)事件，但在 Vue 2.0 廢棄 dispatch，建議使用global event bus。而大多初學者以為 React 只能靠調(diào)用父組件的 callback，并且這種方式遇到組件層次太深的時候簡直就是噩夢。其實 React 也可以通過事件通信來解決問題，只不過需要額外 coding 或調(diào)用第三方插件，而 Vue 的核心庫已實現(xiàn)了該功能。React 擁有豐富的生態(tài)圈，很多事情是大家一起完成的。

父組件可通過 ref 定位子組件并調(diào)用它的 api，也可通過 props 傳遞數(shù)據(jù)，實現(xiàn)父組件通知子組件，ref 和 props 這兩種方式將決定組件的形態(tài)。在實際開發(fā)中，可能 Vue 先入為主，ref 也用的比較多，因為它在組件封裝力度上確實有優(yōu)勢， api 可讓組件更抽象、更關(guān)注自身的功能，不受外界影響。而后來轉(zhuǎn)到 React 幾乎都是用 props 通信，一開始還以為是 React 的問題，甚至還得出了這樣的結(jié)論：React 組件像是 UI 組件，Vue 組件更接近對象。直到最近看了 Facebook 文檔，才發(fā)現(xiàn)另有蹊蹺。先看看之前用 Vue ，我是如何去創(chuàng)建一個列表（List）組件，并實現(xiàn)列表數(shù)據(jù)的新增和刪除，以及調(diào)用方式。

沒用過 ref 的同學，可以先看下文檔，不過看完下面代碼也能大概知道 ref 的作用。

Vuejs

  
  
    add
  
  

var List = Vue.extend({
  props: {
    list: {
      type: Array,
      default: function(){return []}
    }
  },
  template:"
{{item.name}} delete
",
  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 (
      

      {
          this.props.list.map((item, index)=>{
          return (
            

                 {item} 
              
                  delete
              
            
          )
        })
      }
      
    );
  }
};

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 (
      

        
        
          add
        
        
      
    );
  }
};

ReactDOM.render(
  ,
  document.getElementById("container")
);

通過上面兩段代碼可以看出，在調(diào)用 List 組件的時候，React 比 Vue 復(fù)雜的多，不僅僅是多了 onChange，還有新增和刪除的邏輯，都必須在父組件中實現(xiàn)，這樣會導(dǎo)致項目中多處調(diào)用 List 組件，都必須實現(xiàn)這套相似的邏輯，而這套邏輯在 Vue 中已封裝在組件里，這也是為什么利用 ref 在封裝力度上有優(yōu)勢，所以給我的感覺，React 比較關(guān)注組件的展示，而 Vue 比較關(guān)注功能。

細心的同學可能發(fā)現(xiàn)了，React也有 ref 屬性，它也可以讓父組件調(diào)用子組件的 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.

官方還有個栗子，這里我也舉個比較常見的

基于上面的栗子，比如現(xiàn)在列表數(shù)據(jù)多啦！需要在列表頂部顯示有多少條數(shù)據(jù)！我們可以定義一個顯示條數(shù)的組件 Counts。

Vuejs

var bus = new Vue()
var Counts = Vue.extend({
  data: function(){
    return{
      count: 0
    }
  },
  template: "{{count}}",
  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 (
    
      {props.count}
    
  );
}

如按照 Vue 的實現(xiàn)方法（好吧！這里好像要黑 Vue，其實是我一開始的誤解），Counts 組件需監(jiān)聽兩個事件（plus & minus），在事件回調(diào)中去更新條數(shù)，當 List 進行add() 或 delete() 需觸發(fā)plus / minus，且不說 Counts 組件復(fù)雜，這事件流也很難追溯，代碼放久看著吃力！但 React 把共享數(shù)據(jù)抽離了，父組件把this.state.list.length通過 props 傳入 Counts，這種方式邏輯更清晰，擴展能力更強。雖然像 React 這種，在不需要組件共享數(shù)據(jù)時，調(diào)用起來很繁瑣，調(diào)用 List 時add / delete 邏輯都要寫一遍，但業(yè)務(wù)的發(fā)展很難說，很多意想不到的情況都會發(fā)生，比如上面的栗子，后期指不定還要加一個分頁組件呢，所以我懸崖勒馬，以后不管在 Vue 還是 React，盡量少用 ref 調(diào)用子組件。當組件之間有共享數(shù)據(jù)時，該數(shù)據(jù)與操作該數(shù)據(jù)的邏輯，應(yīng)該放在最接近它們的父組件，這樣組件的邏輯會更合理，更清晰！

最后，這兩個框架的路線有差異，Vue 偏向大而全，把很多特性都封裝進核心庫，React 則不同，React 核心庫只是 React 生態(tài)圈很小一部分，只負責 view 這個層面，其它事情都是由大家一起完成，所以 React 會有這么多插件。Reactjs 和 Vuejs 都是偉大的框架！

歡迎加入QQ群：374933367，與騰云閣原創(chuàng)作者們一起交流，更有機會參與技術(shù)大咖的在線分享！

Vue.js前后端同構(gòu)方案之準備篇——代碼優(yōu)化
Vue.js 實戰(zhàn)總結(jié)
React 同構(gòu)思想

此文已由作者授權(quán)騰訊云技術(shù)社區(qū)發(fā)布，轉(zhuǎn)載請注明文章出處
原文鏈接：https://www.qcloud.com/commun...
獲取更多騰訊海量技術(shù)實踐干貨，歡迎大家前往騰訊云技術(shù)社區(qū)