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

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

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

Transcript

1. 從輕前端視角進入 Vue 3.0 的世界 Vue.js Taiwan / Kuro Hsu
2. 自我介紹 • Kuro Hsu • 前端開發者 • Vue.js Taiwan 社群管理員 • https://kuro.tw • Kurotanshi [at] gmail.com
3. 社群宣傳 – vue.tw
4. 統計一下，現場有多少人寫過 jQuery ?
5. 現場又有多少人寫過 Vue / Angular / React ?
6. 所謂前端開發…
9. 從入門到入土
11. 還好，可以從輕前端開始 !
12. Vue.js 簡介
13. Vue.js • 音同「 View 」 • 輕量的 JS 漸進式框架，也能與其他前端框架與函式庫並存共用。 • 以操作物件模型為基礎的開發模式 • 直接描述 狀態 與 DOM 的對應關係 • 改變的是資料，而不是直接操作 DOM
15. Vue.js 3.0
16. 漸進式框架
17. 安裝與起步
18. 安裝與起步
19. Vue.js 的核心 - MVVM
20. 指令式渲染 vs 聲明式渲染 https://jsfiddle.net/kurotanshi/n8tc5fk1/
21. 建立 Vue 實體物件
22. 定義映射至網頁/UI的狀態 (內容)
23. 建立 template 模板屬性
24. 將元件掛載至網頁上
25. 也可直接將 HTML 作為模板
26. 指令 ( directive ) • 指令是一種特殊的屬性，通常以 「v-xx」的形式存在。 • Vue 內建提供了多種指令，開發者可以利用這些指令來操作網頁。
27. v-text / v-html 內容渲染
28. v-model 與表單元素雙向綁定
29. v-bind 屬性綁定
30. v-on 事件綁定
31. v-if 條件渲染
32. v-show 條件渲染
33. v-for 迭代渲染
34. Vue 元件生命週期 hook function
35. Vue 元件生命週期
36. Vue 實體物件基本屬性
37. Vue.js 組件系統
38. Component system UI 結構 組件樹
40. 組件的註冊
41. 父子組件狀態的傳遞
42. 透過 props 傳遞資料給子層
43. 透過 emit 發送事件至父層
44. 透過 slot 傳遞 DOM 模板給子組件
45. Vue.js 3.0 新特性
46. <suspense> App.vue UserProfile.vue (setup style) UserProfile.vue (options style)
47. 組件加上 v-model 雙向綁定父子資料
48. 模板編譯：靜態節點優化 https://bit.ly/3cpwGOt
49. 模板編譯：靜態節點優化 • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊 • 每個動態的節點內容、位置是固定的 • Virtual DOM 更新時只需要遍歷動態的節點， 更新效率與實際 DOM 數量脫鉤，減少不必要的效能浪費 • 與 Vue 2.x 效能相比 可提升 2-5 倍
50. Vue 2.x 的更新偵測
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”
52. Vue 2.x Data
53. Vue 3.0 Data
54. 效能的比較 https://kuro.tw/vue-functional-demo/index.html
55. Compositions API • 並非為了取代原有的 Options style • 為了解決大型應用的痛點 (狀態、邏輯管理、複用) • 模板的資料來源明確 • 沒有 「this」 • 易於切分管理，開發彈性大、效能更佳
59. 還想看更多？ https://book.vue.tw
60. 結語
61. 選擇 Vue 2.x 或 3.x ? • 建議學新不學舊 • Vue 2.x 與 3.x 有九成以上語法相容 • 需要考量的點： • IE 不能動，還有什麼值得我心痛 • 目前使用的 plugin 尚未支援 Vue 3.x
62. 別擔心，至少還有 Vue.js 2.7 • 預計將於 2021 Q1 推出 • 預計是 Vue 2.x 分支最後一個版本 • 有 18 個月的 LTS • 移植部分可相容 Vue 3.0 的 API 至 2.7 版本
63. 更多… • 輕前端很好，但是 善用前端開發工具你可以獲得更多 • ES Module 的 import / export 組織功能更有效率 • Vue SFC (單一組件檔) 讓你的檔案更好管理 • 打包編譯時的 tree shaking 能讓檔案更小，執行效能更好 • Vue-CLI 命令列腳手架、各種方便的語法糖
65. Thanks for joining! Ask questions on Twitter using #dotNETConf
66. 特別感謝