Vue 與 React 的 template engine 設計哲學差異

我先講結論：

• vue 希望你覺得自己在寫一般的 html、很入門很好寫

• react 希望你覺得自己在寫 javascript、所有進階最新的 javascript feature 都鼓勵你用

也就是說

• 一個是希望你好上手，不要有挫折感。

• 一個是希望你可以，變成一個優秀的工程師。

先來各看一個簡單的例子，看看讀起來覺得如何

Vue single file component - template part

<template>
  <div>
    <button @click="increment">current counter: {{ counter }}</button>
    <input type="text" name="counter" :value="counter">
    <other-feature :counter="counter"></other-feature>
  </div>
</template>

React function component

const CounterApp = () => {
  // ignore the state & variable related part

  // you can prepare child components like this
  // const otherFeature = <OtherFeature counter={counter} />;

  return (
    <div>
      <button onClick={increment}>current counter: {counter}</button>
      <input type="text" name="counter" value={counter} />
      <OtherFeature counter={counter} />
      {/* or your can render child component like this */}
      {/*        
        {otherFeature}
      */}
    </div>
  );
}

在呈現 html 基本元件時，一定需要支援基本的 html 寫法，也要支援動態傳值的寫法

vue 這樣來區別兩者

value="someText" :value="someVariable"

注意同樣是單引號/雙引號包起來，後者是變數喔，前面的冒號做到 explicit 說明區別的效果

react 則是這樣

value="someText" value={someVariable}

後者不使用引號，而是用大括號去 explicit 表達這不是前者那種原生的寫法

react 這樣明顯區別字串與變數。vue 乍看無法理解引號裡面怎會是變數

動態傳值之外，元件的子母關係需要往下傳 props 做到階層溝通

<other-feature :counter="counter"></other-feature>

vue 這樣寫讓傳 props 跟動態傳值一樣是使用冒號，syntax 一樣

<OtherFeature counter={counter} />

react 這樣寫讓 props 跟動態傳值一樣使用大括號，syntax 一樣

這邊兩者差不多，沒有明顯優劣

其實兩邊寫的都不是 native DOM element，而是各自被框架包起來的，類似 wrapper 元件的東西

所謂動態傳值也就是跟 custom element/custom component 一樣在傳 props 而已，兩邊 syntax 的設計哲學為何呢？

還記得 native html 可以這樣寫嗎？

<button onclick="alert('hello world');"></button>

所以本來就有些時候，element attribute 的東西裡面其實會送去給 javascript engine 執行

所以引號裡面放變數 or statement 並沒有很奇怪，這也就是 vue 這邊想傳達的哲學

來學 vue 吧 寫起來跟普通 html 沒差多少. 真的擴充的功能，有在前面加上冒號來區分喔，簡單又清楚

再加上 <template> 本來就是一種 html tag，是為了 render 而存在，所以 vue 給人感覺、背後哲學就是

跟新手學過的 html 越接近越好，其他需要的東西再加 syntax 上去

至於 react 直接 return (<div>wtf</div>) 給你看，光看就覺得跟新手的 html 差很多

事實上寫 jsx 根本可以當作你在寫 javascript，也應該要知道你背後在寫 javascript

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
);

// they are the same
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, World!'
);

// 最後是產生類似這樣的物件
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

所以 jsx 看起來在寫 html attribute 其實是在寫 props，這豈不是挺清楚的嗎！

再看一次開頭提到的例子，子元件除了 jsx 還有直接產出物件之後，直接放進物件的寫法

{otherFeature}

因為寫 react 對於大括號的理解本來就會知道裡面是動態的、是要跑 javascript 的東西，所以不難理解

再看一次開頭提到的例子

value="someText" :value="someVariable"

value="someText" value={someVariable}

還有 event 互動的部份

<button @click="increment">current counter: {{ counter }}</button>

<button onClick={increment}>current counter: {counter}</button>

寫 vue 你雖然像在寫普通的 html，但額外加上的東西，這邊就有

• 冒號
• 兩個大括號
• 小老鼠符號

而寫 react 你就認命，要知道自己絕不是在寫什麼普通的 html，你就是在寫 javascript，那你這邊用到的就只有

• 一個大括號

我會說，新手喜歡 vue 因為就是 html 加上一些 new syntax

資深會喜歡 react 因為不要再去多背什麼 vue 的 v- 開頭那些 shorthand 還有其他 syntax，就乖乖承認你在寫很複雜的 javascript 就好了

總結起來，我會說，Vue 跟 React 的設計哲學差異就是

• vue 希望你覺得自己在寫一般的 html 很入門很好寫，然後可以加上一些 javascript 來建構你的應用程式

• react 希望你覺得自己在寫 javascript，要給你最大的彈性去使用所有最新的 javascript 的 feature

而我做出的這個結論，也跟 vue 還有 react 社群給人的印象符合

• vue 支持者：react 好難學喔 光是架環境就好麻煩喔。vue 很快就學會了，也能立刻開始寫我的系統。

• react 支持者：我們簡直跟著最新的 ECMAScript 每年都在與時俱進、每年都越來越熟悉 functional programming paradigm。所有進階的手法我想怎麼寫就怎麼寫。我沒辦法去寫 vue。