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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

社群宣傳 – vue.tw

Slide 4

Slide 4 text

統計一下，現場有多少人寫過 jQuery ?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

所謂前端開發…

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

從入門到入土

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

還好，可以從輕前端開始 !

Slide 12

Slide 12 text

Vue.js 簡介

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Vue.js 3.0

Slide 16

Slide 16 text

漸進式框架

Slide 17

Slide 17 text

安裝與起步

Slide 18

Slide 18 text

安裝與起步

Slide 19

Slide 19 text

Vue.js 的核心 - MVVM

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

建立 Vue 實體物件

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

建立 template 模板屬性

Slide 24

Slide 24 text

將元件掛載至網頁上

Slide 25

Slide 25 text

也可直接將 HTML 作為模板

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

v-text / v-html 內容渲染

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

v-bind 屬性綁定

Slide 30

Slide 30 text

v-on 事件綁定

Slide 31

Slide 31 text

v-if 條件渲染

Slide 32

Slide 32 text

v-show 條件渲染

Slide 33

Slide 33 text

v-for 迭代渲染

Slide 34

Slide 34 text

Vue 元件生命週期 hook function

Slide 35

Slide 35 text

Vue 元件生命週期

Slide 36

Slide 36 text

Vue 實體物件基本屬性

Slide 37

Slide 37 text

Vue.js 組件系統

Slide 38

Slide 38 text

Component system UI 結構組件樹

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

組件的註冊

Slide 41

Slide 41 text

父子組件狀態的傳遞

Slide 42

Slide 42 text

透過 props 傳遞資料給子層

Slide 43

Slide 43 text

透過 emit 發送事件至父層

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Vue.js 3.0 新特性

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Vue 2.x 的更新偵測

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Vue 2.x Data

Slide 53

Slide 53 text

Vue 3.0 Data

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

結語

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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