Lastor
@Lastor
說
Sat, Jul 17, 2021 5:39 AM
1
[Coding][Vue3] 太有趣了，你以為我在寫 React?? 才不是，我在寫 Vue
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:42 AM
前幾天嘗試了用 React 寫一個簡單的 demo，瞬間感覺 React 因為本質上是全 JS 的機制，所以 babel 可以比較容易配合 React JSX
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:44 AM
這讓 React 可以透過 CDN，很容易的在無 Node 環境下撰寫。而且 VScode 這類編輯器，對於 .jsx file 預設配有 ts type/react，所以智能提示也很健全，整個就很舒服
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:44 AM
這瞬間突然想到，那 Vue 呢....???
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:46 AM
就稍微研究了一下，Vue 有沒有辦法辦到類似的事情。很可惜的是，babel/standalone 是完全針對 React 的。對於 JSX.Element 的解析，是直接轉成 React 格式，所以無法跟 Vue 搭配
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:47 AM
Vue 生態系裡面，也有類似的 babel/vue-jsx 之類的玩意，但這些套件預設都是讓你在 node 環境下使用，所以不像 React 那邊擁有 CDN 的使用方式
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:49 AM
新版本的 Vue3 如果是透過 vue-cli 創建的話，似乎預設是支持 JSX 的
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:50 AM
後來轉個方向，嘗試了一下之前提過的 vue3-sfc-loader
FranckFreiburger/vue3-sfc-loader
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:50 AM
赫然發現，裡面的核心功能有一行.... JSX Support
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:52 AM
所以，直接拉這套件 CDN 下來，就可以直接在 .vue 檔案使用 JSX 了。該套件會像 babel 那樣，幫你編譯回純 JS
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:52 AM
至於想要在 .js file 底下寫，目前找不到方法。Vue 社群整體似乎還是傾向使用 .vue file 的
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:54 AM
====================
不過這樣子摸了一番，忽然體悟到 React 跟 Vue 的核心差異。React 基本上是以在 JS 建立虛擬 HTML 的方式在工作，所以無法像 Vue 那樣去控制 .html file 裡面已經寫好的 HTML
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:55 AM
而 Vue 則是走 HTML 預處理的路線，去獲取已經在 .html 裡面寫好的元素，然後再透過 JS 去編輯
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:57 AM
Vue 獲取下來的 html，會以 string 方式存放在 template 屬性裡面。所以也可以建立一個 DOMString，來餵給 Vue 使用
Lastor
@Lastor
說
Sat, Jul 17, 2021 5:58 AM
.vue file 在做的事情，似乎只是把 template 單獨拉出來，讓 user 可以用 HTML 的方式去編寫 (CSS 先不考慮，沒研究到那)
Lastor
@Lastor
說
Sat, Jul 17, 2021 6:00 AM
而 Vue 其實也有像 React 一樣，提供虛擬 HTML 的方式，也就是 render function
Render Functions | Vue.js
Lastor
@Lastor
說
Sat, Jul 17, 2021 6:01 AM
老實說，這玩意我真的至今都沒用過..... 稍微 try 了一下，這個就跟 React 很像了，所以也伴隨著有支援 JSX.Element 的使用方式
Lastor
@Lastor
說
Sat, Jul 17, 2021 6:08 AM
現在體感上，React 比 Vue 要好理解的感覺。React 不管用不用 create-react-app 在寫法上不會有太大差異。但 Vue 那邊，用不用 vue-cli，寫法就完全不一樣
doomleika
@doomleika
Sun, Jul 18, 2021 4:20 PM
想問一下你對
GraphQL
的看法
Lastor
@Lastor
說
Mon, Jul 19, 2021 1:27 AM
這個沒有用過耶
doomleika
@doomleika
Mon, Jul 19, 2021 2:31 AM
Lastor
: Thanks ，現在我要刻兩邊的API弄得懷疑人生，想找有frontend深度經驗的人的意見
Lastor
@Lastor
說
Mon, Jul 19, 2021 3:52 AM
doomleika
: 隱約記得 GraphQL 好像有跟我們家後端聊過，他沒講得很細，只是我問他說推不推薦，他直接跟我說不推薦....XDD
Lastor
@Lastor
說
Mon, Jul 19, 2021 3:53 AM
好像是說甚麼要改設定的時候很麻煩還怎樣的，有點忘了
doomleika
@doomleika
Mon, Jul 19, 2021 4:00 AM
yeah ，hackernews上面正反意見都很多，現在我拿不定主意
載入新的回覆
不過這樣子摸了一番，忽然體悟到 React 跟 Vue 的核心差異。React 基本上是以在 JS 建立虛擬 HTML 的方式在工作，所以無法像 Vue 那樣去控制 .html file 裡面已經寫好的 HTML
Render Functions | Vue.js