Vue vs React差異的分析

最近因為一些小型網頁的需求,想說順便來研究一下react的寫法,開始把一些書跟網路教學範例都試著上手一下,一作下去,簡直是個大坑!

雖然之前已經把npm, yarn, nodejs, webpack稍微上手了!但是還是覺得react學習曲線很陡峭,很多寫法也非常不直覺!在要不要繼續往下深入時,就開始找一些文章來看,比較Vue跟React的差異,發現不少人也是因為React的寫法跟css in js and html in js的語法感到困惑或是難以上手,進而投入Vue。

一發現新大陸後,馬上轉向Vue開始研究,發現真的比React好上手很多,而且還是可以維持html css javascript三者分離並互相控制達到簡化程式邏輯的概念,不需要全部混在一起!至少在邏輯上也很清楚,而且在製作元件時,也不太需要去管怎麼雙向綁定資料或是狀態更新等等的status設定跟function重複撰寫,只要綁定後就會自己updateUI!真的很爽,感覺很像jQuery這種利器,所以Vue vs React感覺很像上一個世代的jQuery vs YUI的感覺,一個好上手,一個可以客製化很多api與事件!但是就我的目前的使用模式,基本上是好上手是最重要的,這樣比較好找人維護。而且Vue感覺是集Angular跟React各自的優點而結合,而且creater居然是中國人,中文教學資料超級多!

廢話不多說,馬上用React跟Vue各自寫一個一樣的簡單應用元件,就知道了!

這個元件很簡單,就是以前在做表單檢核時,textarea常需要限制使用者字數,以前寫的時候累死了,要一直計算textarea onchage時,不斷去更新計算字數並顯示在user info欄位中:

React:

Vue:

以上的範例都是做到一樣的效果,這樣就知道我為什麼會只想好好用Vue了吧!XDDD

參考資料:

  1. Vue官方對於React以及Angular的比較說明

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *