[JSDC2019] 我有一堆選擇 Vue 開發框架的理由

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
September 28, 2019

[JSDC2019] 我有一堆選擇 Vue 開發框架的理由

我有一堆選擇 Vue 開發框架的理由 @ JSDC2019 / 2019/9/28

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

September 28, 2019
Tweet

Transcript

  1. 2.
  2. 4.
  3. 5.
  4. 9.
  5. 10.
  6. 11.

    如果你是新⼿手 • 看現在哪個 夯 / 潮 / 猛 / ⾼高⼤大上

    就⽤用什什麼 • 看公司要我⽤用什什麼我就⽤用什什麼 • 因為我只會什什麼就⽤用什什麼 • 因為我剛學會什什麼就想⽤用什什麼
  7. 14.
  8. 22.
  9. 24.

    新技術的考量量 (當時) • Vue.js • Syntax 與 ng1 有 87%

    像,轉換成本低 • 夠輕量量、好上⼿手 • 正好⾜足夠負擔當時專案的複雜度 • 試 run 幾個⼩小專案之後就決定是它了了
  10. 28.
  11. 30.

    指令式渲染 • 如 jQuery,以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺,透過

    Selector 取得 DOM 就 開始操作 • 優點就是爽,但程式架構擴⼤大複雜後,程式 碼混雜不易易維護
  12. 31.

    宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 •

    直接描述 狀狀態 與 DOM 的映射關係,⽽而不 是直接操作 DOM • view = render(state) 
 state 輸入, DOM 輸出。
  13. 32.
  14. 33.
  15. 36.
  16. 37.
  17. 38.
  18. 39.
  19. 42.

    Vue-Cli 建立專案 $ npm install @vue/cli -g $ yarn global

    add @vue/cli $ vue create 專案名稱
  20. 44.
  21. 47.
  22. 48.
  23. 53.
  24. 55.

    專案開發週期 建立模板 初始化 開發 上線 靜態 HTML
 CSS Vue Template

    vue-cli Project initialize Mock Data Testing webpack dev server / proxy 打包 /
 建立 HTML 上傳 CDN 程式發布
  25. 57.
  26. 60.

    ! Composition Functions • 之前叫 function-based API • 以「組合代替繼承」來來實作元件功能的複⽤用 •

    對 TypeScript 類型推導的⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮
  27. 62.
  28. 71.

    與 React Hooks 對比 • 我知道⼀一定有⼈人會問所以我現在先講 • 兩兩者同樣為了了處理理邏輯組合與複⽤用問題 • Vue

    setup( ) 只會在 init 被呼叫⼀一次 • 沒有 State Hooks 的閉包陷阱 • 沒有內聯聯函式 callback 導致⼦子組件不斷被觸發更更新問題
  29. 72.
  30. 74.

    • 已知 2.x -> 3.x 不會有 Breaking Change,完全相容現有 API •

    加強對 TypeScript ⽀支援 !== 只能⽤用 TypeScript • 更更多的是針對底層的改寫,對多數開發者來來說沒有明顯差距 • ⽬目前仍在 RFC 階段
  31. 77.
  32. 79.
  33. 81.