Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界

Kuro Hsu
December 19, 2020

[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界

前端開發從早期的百家爭鳴到近年的三強鼎立,已經是個相當成熟的領域了,當前主流滿滿的 npm、webpack 起手式是否讓你對前端開發心生畏懼呢?

在本場議程中,除了介紹 Vue 3.0 帶來了什麼嶄新特性外,也以「輕前端」視角來帶領各位入門,讓對前端開發生態不甚熟悉的朋友們也能輕鬆認識 Vue 3.0 這套現代的漸進式前端框架。

Kuro Hsu

December 19, 2020
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. 從輕前端視角進入
    Vue 3.0 的世界
    Vue.js Taiwan / Kuro Hsu

    View Slide

  2. 自我介紹
    • Kuro Hsu
    • 前端開發者
    • Vue.js Taiwan 社群管理員
    • https://kuro.tw
    • Kurotanshi [at] gmail.com

    View Slide

  3. 社群宣傳 – vue.tw

    View Slide

  4. 統計一下,現場有多少人寫過 jQuery ?

    View Slide

  5. 現場又有多少人寫過 Vue / Angular / React ?

    View Slide

  6. 所謂前端開發…

    View Slide

  7. View Slide

  8. View Slide

  9. 從入門到入土

    View Slide

  10. View Slide

  11. 還好,可以從輕前端開始 !

    View Slide

  12. Vue.js 簡介

    View Slide

  13. Vue.js
    • 音同「 View 」
    • 輕量的 JS 漸進式框架,也能與其他前端框架與函式庫並存共用。
    • 以操作物件模型為基礎的開發模式
    • 直接描述 狀態 與 DOM 的對應關係
    • 改變的是資料,而不是直接操作 DOM

    View Slide

  14. View Slide

  15. Vue.js 3.0

    View Slide

  16. 漸進式框架

    View Slide

  17. 安裝與起步

    View Slide

  18. 安裝與起步

    View Slide

  19. Vue.js 的核心 - MVVM

    View Slide

  20. 指令式渲染 vs 聲明式渲染
    https://jsfiddle.net/kurotanshi/n8tc5fk1/

    View Slide

  21. 建立 Vue 實體物件

    View Slide

  22. 定義映射至網頁/UI的狀態 (內容)

    View Slide

  23. 建立 template 模板屬性

    View Slide

  24. 將元件掛載至網頁上

    View Slide

  25. 也可直接將 HTML 作為模板

    View Slide

  26. 指令 ( directive )
    • 指令是一種特殊的屬性,通常以 「v-xx」的形式存在。
    • Vue 內建提供了多種指令,開發者可以利用這些指令來操作網頁。

    View Slide

  27. v-text / v-html 內容渲染

    View Slide

  28. v-model 與表單元素雙向綁定

    View Slide

  29. v-bind 屬性綁定

    View Slide

  30. v-on 事件綁定

    View Slide

  31. v-if 條件渲染

    View Slide

  32. v-show 條件渲染

    View Slide

  33. v-for 迭代渲染

    View Slide

  34. Vue 元件生命週期 hook function

    View Slide

  35. Vue 元件生命週期

    View Slide

  36. Vue 實體物件基本屬性

    View Slide

  37. Vue.js 組件系統

    View Slide

  38. Component system
    UI 結構 組件樹

    View Slide

  39. View Slide

  40. 組件的註冊

    View Slide

  41. 父子組件狀態的傳遞

    View Slide

  42. 透過 props 傳遞資料給子層

    View Slide

  43. 透過 emit 發送事件至父層

    View Slide

  44. 透過 slot 傳遞 DOM 模板給子組件

    View Slide

  45. Vue.js 3.0 新特性

    View Slide


  46. App.vue
    UserProfile.vue (setup style)
    UserProfile.vue (options style)

    View Slide

  47. 組件加上 v-model 雙向綁定父子資料

    View Slide

  48. 模板編譯:靜態節點優化
    https://bit.ly/3cpwGOt

    View Slide

  49. 模板編譯:靜態節點優化
    • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊
    • 每個動態的節點內容、位置是固定的
    • Virtual DOM 更新時只需要遍歷動態的節點,
    更新效率與實際 DOM 數量脫鉤,減少不必要的效能浪費
    • 與 Vue 2.x 效能相比 可提升 2-5 倍

    View Slide

  50. Vue 2.x 的更新偵測

    View Slide

  51. Vue 3.x with Proxy API
    Object
    Proxy
    get (target, key) {
    return ....
    }
    set (target, key, value) {
    return ....
    }
    console.log(proxy.name)
    proxy.name = “Kuro”

    View Slide

  52. Vue 2.x
    Data

    View Slide

  53. Vue 3.0
    Data

    View Slide

  54. 效能的比較
    https://kuro.tw/vue-functional-demo/index.html

    View Slide

  55. Compositions API
    • 並非為了取代原有的 Options style
    • 為了解決大型應用的痛點 (狀態、邏輯管理、複用)
    • 模板的資料來源明確
    • 沒有 「this」
    • 易於切分管理,開發彈性大、效能更佳

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. 還想看更多? https://book.vue.tw

    View Slide

  60. 結語

    View Slide

  61. 選擇 Vue 2.x 或 3.x ?
    • 建議學新不學舊
    • Vue 2.x 與 3.x 有九成以上語法相容
    • 需要考量的點:
    • IE 不能動,還有什麼值得我心痛
    • 目前使用的 plugin 尚未支援 Vue 3.x

    View Slide

  62. 別擔心,至少還有 Vue.js 2.7
    • 預計將於 2021 Q1 推出
    • 預計是 Vue 2.x 分支最後一個版本
    • 有 18 個月的 LTS
    • 移植部分可相容 Vue 3.0 的 API 至 2.7 版本

    View Slide

  63. 更多…
    • 輕前端很好,但是 善用前端開發工具你可以獲得更多
    • ES Module 的 import / export 組織功能更有效率
    • Vue SFC (單一組件檔) 讓你的檔案更好管理
    • 打包編譯時的 tree shaking 能讓檔案更小,執行效能更好
    • Vue-CLI 命令列腳手架、各種方便的語法糖

    View Slide

  64. View Slide

  65. Thanks for joining!
    Ask questions on Twitter using #dotNETConf

    View Slide

  66. 特別感謝

    View Slide