Tweet
Tweet

Slide 1

Slide 1 text

Vue3 ㇐次就上手 milkmidi 2020-11-05

Slide 2

Slide 2 text

milkmidi (奶綠茶) Positive Grid 資深前端工程師 (強力徵前端工程師中，快來當我的同事) milkmidi@gmail.com https://www.facebook.com/milkmidifans

Slide 3

Slide 3 text

問：如何 Vue3 ㇐次就上手 答：只要把 2 改成 3，就好了

Slide 4

Slide 4 text

程式進入點

Slide 5

Slide 5 text

v-model component props 更名 vue2 v-model props : ['value'] v-model 更新是 $emit('input') vue3 v-model props : ['modelValue'] v-model 更新是 $emit('update:modelValue')

Slide 6

Slide 6 text

更新用 更新用 同 vue3 移除 .sync, 統㇐使用 v-model:[name]

Slide 7

Slide 7 text

lifecycle 更名

Slide 8

Slide 8 text

不會觸發更新 可以直接寫 Reactivity in depth

Slide 9

Slide 9 text

無 Teleport

Slide 10

Slide 10 text

無 Fragments

Slide 11

Slide 11 text

Vue3 composition-api 超香

Slide 12

Slide 12 text

composition - reactive

Slide 13

Slide 13 text

適合用到 這樣寫就有點麻煩 composition - ref 適合用到 也不錯寫喔 Kuro 大說：使用 ref, template 裡都不需要寫 value

Slide 14

Slide 14 text

composition - ScriptSetup 二種寫法，大大滿足

Slide 15

Slide 15 text

composition - ScriptSetup setup props, import component

Slide 16

Slide 16 text

新的 不需要像 加 會自動判斷，讚 這裡只 所以 更新時並不會發生 略 watch and watchEffect

Slide 17

Slide 17 text

composition - livecycle

Slide 18

Slide 18 text

composition custom hooks

Slide 19

Slide 19 text

不能這樣寫 composition custom hooks

Slide 20

Slide 20 text

composition custom hooks

Slide 21

Slide 21 text

css variables

Slide 22

Slide 22 text

Vue3 有二個功能目前做不到

Slide 23

Slide 23 text

IE 不能動

Slide 24

Slide 24 text

Vue3 Render 只能在指定的 DOM 裡 Vue2 可以直接取代指定的 DOM https://www.gogoro.com/tw/

Slide 25

Slide 25 text

當然也是可以把 Vue3 寫爛掉

Slide 26

Slide 26 text

這裡叫不到 裡的 這裡可以呼叫 裡的 看呀，這裡也不用加 data + setup 混搭

Slide 27

Slide 27 text

學習不需要為公司、⾧官或同事， 不需要為別人，只為你自己。 五倍紅寶石 高見龍

Slide 28

Slide 28 text

奶綠茶的粉絲團 https://www.facebook.com/milkmidifans