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 full-size slide

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

    View full-size slide

  3. 社群宣傳 – vue.tw

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 所謂前端開發…

    View full-size slide

  7. 從入門到入土

    View full-size slide

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

    View full-size slide

  9. Vue.js 簡介

    View full-size slide

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

    View full-size slide

  11. 漸進式框架

    View full-size slide

  12. 安裝與起步

    View full-size slide

  13. 安裝與起步

    View full-size slide

  14. Vue.js 的核心 - MVVM

    View full-size slide

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

    View full-size slide

  16. 建立 Vue 實體物件

    View full-size slide

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

    View full-size slide

  18. 建立 template 模板屬性

    View full-size slide

  19. 將元件掛載至網頁上

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. v-bind 屬性綁定

    View full-size slide

  25. v-on 事件綁定

    View full-size slide

  26. v-if 條件渲染

    View full-size slide

  27. v-show 條件渲染

    View full-size slide

  28. v-for 迭代渲染

    View full-size slide

  29. Vue 元件生命週期 hook function

    View full-size slide

  30. Vue 元件生命週期

    View full-size slide

  31. Vue 實體物件基本屬性

    View full-size slide

  32. Vue.js 組件系統

    View full-size slide

  33. Component system
    UI 結構 組件樹

    View full-size slide

  34. 組件的註冊

    View full-size slide

  35. 父子組件狀態的傳遞

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Vue.js 3.0 新特性

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Vue 2.x 的更新偵測

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 特別感謝

    View full-size slide