Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Vue3 ㇐次就上手 milkmidi 2020-11-05
Slide 2
Slide 2 text
milkmidi (奶綠茶) Positive Grid 資深前端工程師 (強力徵前端工程師中,快來當我的同事)
[email protected]
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