簡述Vue和React開發體驗的異同（UI層）

前言

最近剛加入新公司，組內的前端技術棧以Vue爲主，以前在上家公司寫React會多一些，花了幾個小時的時間從新過了一遍Vue的文檔，畢竟已經快三年沒接觸了。兩個事物在某些方面具備共通點，才能比較差別性，而差別性可能會是咱們日常關注比較多的方向。在平常業務開發中，咱們主要會關注兩點，狀態（state || data）和展現（UI），本文以闡述UI爲主，狀態層面的問題會在後續文章中作剖析。

UI層的描述方式

Vue是以template進行描述，而React以JSX進行描述。（固然Vue也能夠用jsx進行描述，但其實本質仍是template，只是提供開發的一層糖，這裏再也不作展開討論。）

Vue:
<template>
    <div>hello</div>
</template>

React:
function render() {
    return (
       <div>hello</div>
    )
}
複製代碼

這麼一看感受上差很少，可是要知道Vue也好，React也罷，都是現代化的前端開發套件，在開發的時候勢必要考慮這段代碼是否能夠複用，放到不一樣的上下文後如何作通訊。到這一步的時候，咱們的代碼就變成了這樣：

Vue:
<template>
    <div>{{text}}</div>
</template>
<script>
    export default {
      props: ['text']
    }
</script>

React:
function render(props) {
    return (
       <div>{props.text}</div>
    )
}
複製代碼

藉助jsx自然的優點，在React中，傳參和組件規格的定義能夠直接使用函數的特性，而在Vue中，由於是模版，模版是不能夠直接執行的，是須要把模版字符串拿來作解析的，而後再根據當前的上下文信息，去替換相似{{text}}這樣的字符串，而組件規格的定義，也落到了script裏，用js去作描述。而對於當前組件內可用的狀態，在Vue中沒有明確的區分，不管是data仍是props，均可以經過this.xxx進行訪問。在React中，仍是有區分的，分別經過props和state去作訪問。

咱們再看看如何子組件調用父組件方法的

Vue:
<template>
    <div @click="onClick">{{text}}</div>
</template>
<script>
    export default {
      props: ['text'],
      methods: {
          onClick() {
              this.$emit('click')
          }
      }
    }
</script>

React:
function render(props) {
    return (
       <div onClick={props.click}>{props.text}</div>
    )
}
複製代碼

React一樣也是藉助函數的特性，簡單的完成函數調用。在Vue中得藉助自身的runtime來實現，經過調用$emit，$emit繼續去查找並觸發目標事件，完成通訊。

說完了傳屬性、傳函數，固然在平常開發中還有傳UI描述（element）的需求。

Vue:
<template>
    <modal>
        <solt></solt>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal>{props.children}</Modal>
    )
}
複製代碼

咱們以一個模態框舉例，想要實現調用者能自繪內容區域，這時候經過屬性就不夠用，得傳入一段UI描述（element），在Vue中，使用了一個關鍵字solt插槽來佔位，在實例化時作替換，而在React中，一如既往的變量引用。

咱們在調用modal組件的時間，代碼是這樣的

Vue:
<template>
    <modal>
        <template>
            <div>hello</div>
        <template>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal>
           <div>hello</div>
       </Modal>
    )
}
複製代碼

好像差很少，不過涉及到多個element傳入的時候，會變成這樣

Vue:
<template>
    <modal>
        <template #title>
            <div>hello</div>
        <template>
        <template #content>
            <div>hello</div>
        <template>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal title={<div>hello</div>}>
           <div>hello</div>
       </Modal>
    )
}
複製代碼

是否是不太同樣，其實在React中也能夠寫成像Vu e同樣平鋪，不過在子組件那就成了props.children[0] props.children[1] 這樣的模式了，不夠語義話，因此會放在自定義參數那，只是參數類型是element，從數據結構上來講，都是一個name對應一個element，只是在寫法上略有差別。

結語

Vue在template這塊仍是作了不少事情的，好比沒有提到的指令系統等。經過描述來代替邏輯編碼。好處很明顯，描述會更加易讀，上手成本低，但弊端也偏偏是對方的優點，邏輯編碼的靈活性更高。但凡事都講究一個夠用，DSL設計的足夠完備，能知足平常的開發需求，也就夠了。

在Vue中，判斷只有一種寫法:
<template>
    <div v-if="show">hello</div>
</template>

在React中，判斷有N中寫法:
function render1(props) {
    if (props.show) {
        return <div>hello</div>
    }
    return null;
}
function render2(props) {
    return props.show ? <div>hello</div> : null;
}
function render3(props) {
    return props.show && <div>hello</div>;
}
...
複製代碼

嗯，JS真靈活。