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

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

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

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

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

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

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

Vue 的語(yǔ)法很自由，比如：

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

熟悉的前端模板

父子組件間通信更靈活

slot，可以大尺度地?cái)U(kuò)展組件（但也不要過(guò)度使用哦）

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

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

從入門(mén)學(xué)習(xí)一個(gè)框架的角度看，少一些規(guī)則多一些自由空間，門(mén)檻會(huì)低些。

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 進(jìn)行表單處理的方式是不是更簡(jiǎn)潔，由于 v-model 屬性支持?jǐn)?shù)據(jù)雙向綁定，說(shuō)白了就是（value 的單向綁定 + onChange 事件監(jiān)聽(tīng)）的語(yǔ)法糖，但這個(gè)味道還不錯(cuò)吧，比起在 React 中需要綁定多個(gè) onChange 事件確實(shí)要方便得多。

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

Facebook 官方好像知道大家對(duì) JSX 有偏見(jiàn)，在文檔一開(kāi)始就給出解釋

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 團(tuán)隊(duì)堅(jiān)信一個(gè)組件的正確用途是 “separate concerns”，而不是前端模板或者展示邏輯。我們認(rèn)為前端模板和組件代碼是緊密相連的。另外，模板語(yǔ)言經(jīng)常讓展示的邏輯變得更復(fù)雜。

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

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

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

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

沒(méi)用過(guò) ref 的同學(xué)，可以先看下文檔，不過(guò)看完下面代碼也能大概知道 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")
);

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

細(xì)心的同學(xué)可能發(fā)現(xiàn)了，React也有 ref 屬性，它也可以讓父組件調(diào)用子組件的 api，但實(shí)際項(xiàng)目中卻很少看到，為什么大家都這么同步一致呢？我查了一下文檔，原來(lái) Facebook 不推薦過(guò)度使用 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.

官方還有個(gè)栗子，這里我也舉個(gè)比較常見(jiàn)的

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

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

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

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

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