Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue3一次就上手
Search
milkmidi
November 01, 2020
0
6.3k
Vue3一次就上手
milkmidi
November 01, 2020
Tweet
Share
More Decks by milkmidi
See All by milkmidi
202403-WebComponent
milkmidi
0
170
WebComponent
milkmidi
1
3.1k
前端好朋友-tailwindcss
milkmidi
0
8.1k
202110-federation
milkmidi
0
140
202007-React對戰雷台
milkmidi
0
180
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Making Projects Easy
brettharned
116
6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Faster Mobile Websites
deanohume
306
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Being A Developer After 40
akosma
89
590k
Transcript
Vue3 ㇐次就上手 milkmidi 2020-11-05
milkmidi (奶綠茶) Positive Grid 資深前端工程師 (強力徵前端工程師中,快來當我的同事) milkmidi@gmail.com https://www.facebook.com/milkmidifans
問:如何 Vue3 ㇐次就上手 答:只要把 2 改成 3,就好了
程式進入點
v-model component props 更名 vue2 v-model props : ['value'] v-model
更新是 $emit('input') vue3 v-model props : ['modelValue'] v-model 更新是 $emit('update:modelValue')
更新用 更新用 同 vue3 移除 .sync, 統㇐使用 v-model:[name]
lifecycle 更名
不會觸發更新 可以直接寫 Reactivity in depth
無 Teleport
無 Fragments
Vue3 composition-api 超香
composition - reactive
適合用到 這樣寫就有點麻煩 composition - ref 適合用到 也不錯寫喔 Kuro 大說:使用 ref,
template 裡都不需要寫 value
composition - ScriptSetup 二種寫法,大大滿足
composition - ScriptSetup setup props, import component
新的 不需要像 加 會自動判斷,讚 這裡只 所以 更新時並不會發生 略 watch and
watchEffect
composition - livecycle
composition custom hooks
不能這樣寫 composition custom hooks
composition custom hooks
css variables
Vue3 有二個功能目前做不到
IE 不能動
Vue3 Render 只能在指定的 DOM 裡 Vue2 可以直接取代指定的 DOM https://www.gogoro.com/tw/
當然也是可以把 Vue3 寫爛掉
這裡叫不到 裡的 這裡可以呼叫 裡的 看呀,這裡也不用加 data + setup 混搭
學習不需要為公司、⾧官或同事, 不需要為別人,只為你自己。 五倍紅寶石 高見龍
奶綠茶的粉絲團 https://www.facebook.com/milkmidifans