2020 Vue & React 前端擂台戰 - Vue.js

2020 Vue & React 前端擂台戰 - Vue.js

2020 Vue & React 前端擂台戰 @ 5xRuby.

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

July 29, 2020
Tweet

Transcript

  1. Kuro Hsu @ 5xRuby / 2020-07-29 Vue.js 天下第⼀ 前端擂台賽 2020-ver.

  2. 本活動⾔論可能帶有極度偏頗 且⼗分不公正之觀點 各位看官請保持理性態度

  3. Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw -

    kurotanshi@gmail.com - @kurotanshi
  4. 今⽇主題

  5. 前端⼤亂⾾?

  6. None
  7. 這是第幾次了? 那些年我參與過的⼤亂⾾

  8. 所以 以前講過的基礎內容 我就快速帶過了

  9. 先說結論

  10. None
  11. Vue.js 現況簡介

  12. 2015.10.26 Vue v1.0 2016.10.01 Vue v2.0 2019.02.05 Vue v2.6 2020.07.18

    Vue 3.0 Release Candidate
  13. https://github.com/vuejs/vue-next

  14. 資料來源: https://docs.google.com/presentation/d/1XUudqqdW7Y1f81TZKqEOXY2ns6L7XROjM5P0yKVsw2Y

  15. https://vue.tw

  16. Vue.js 設計風格

  17. None
  18. UI 結構 組件樹

  19. None
  20. The Progressive JavaScript Framework

  21. HTML Script Style

  22. None
  23. None
  24. Vue SFC Source Template AST JavaScript AST CSS AST Target

    Code Optimize Parse Combine
  25. None
  26. 更多細節 https://book.vue.tw/ 連載中!

  27. Vue 3.0 新增功能

  28. None
  29. Tree-shaking friendly • Vue 2.x 已部分⽀援 • 透過 ES6 import

    module 可將未使⽤的程式碼在打包時移除 • Vue 3.0 甚⾄連 v-model / transition 都能進⾏ tree-shaking
  30. Typescript 紅利

  31. Fragments • 模板內容碎片化 • Component 從此沒有單⼀根節點限制

  32. Fragments • 模板內容碎片化 • Component 從此沒有單⼀根節點限制

  33. v-model on component • 取代過去的 .sync • ⼀個組件裡可以置放多個 v-model 屬性

    • 透過 v-model 達到組件間雙向綁定
  34. Vue Composition

  35. 與 React 的差異

  36. Vue React 版本 2.6.11 / 3.0.0-rc 16.13.1 基礎知識 HTML /

    JavaScript / CSS HTML / JavaScript / CSS / JSX 環境建置/打包 Vue CLI create-react-app 前端路由 Vue-Router / 其他 React-Router / 其他 狀態管理 Vuex / 其他 Redux / 其他 開發⽣態圈 多 爆炸多 開發風格 關注點分離 All in JS Component 「模板 + 指令」 「Function」
  37. None
  38. None
  39. None
  40. None
  41. None
  42. 狀態更新機制比較

  43. None
  44. Source: Reactivity in Frontend JavaScript Frameworks https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

  45. Source: Reactivity in Frontend JavaScript Frameworks https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

  46. Component Render function render Proxy get set has ownKeys re-render

    Virtual DOM Tree effect track trigger
  47. Proxy 幫我交給你姐 姐這個要給你的 …… ……

  48. Source: Reactivity in Frontend JavaScript Frameworks https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

  49. https://medium.com/@milkmidi/react-vue-render-效能優化篇-31d9f78cf692

  50. https://medium.com/@milkmidi/react-vue-render-效能優化篇-31d9f78cf692

  51. https://medium.com/@milkmidi/react-vue-render-效能優化篇-31d9f78cf692

  52. React Hook 對比 Vue Composition

  53. 共同⽬標 • 為了管理與重複使⽤相同邏輯的問題 • React: mixins / HOC / render

    prop / hook • Vue: mixins / HOC (少⽤) / slot / composition
  54. None
  55. 關鍵差異 • 同樣為了處理邏輯組合與複⽤問題 • Vue setup( ) 只會在 init 被呼叫⼀次

    • 沒有 State Hooks 的閉包陷阱 • 沒有 Inline-function callback 導致⼦組件不斷被 觸發更新的效能問題
  56. 總結

  57. None
  58. 新⼿入坑 應該等到 3.0 正式釋出再學嗎?

  59. 種⼀棵樹最好的時間是⼗年前, 其次是現在。 - Dambisa Moyo《dead aid》(無⽤的援助)

  60. None
  61. 最終能⽣存下來的物種,不是最強的、 也不是最聰明的,⽽是最能適應改變的 物種。 - 查爾斯.達爾⽂

  62. 好的⼯程師,會依照需求挑 選⼯具。

  63. 糟糕的⼯程師,不管⽤什麼 ⼯具都會搞砸。

  64. 與其說選擇技術

  65. 其實你是在選擇開發⽣態圈

  66. None
  67. 世界上只有兩種框架,⼀種是沒⼈ ⽤的,另⼀種是⼤家都在罵的。

  68. ⾃由 便利

  69. https://www.zhihu.com/question/301860721/answer/545031906 ……

  70. 學習路上,有你有我 你要做的就是找個老司機

  71. 老司機服務專線

  72. Thanks !