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
170
Featured
See All Featured
How GitHub (no longer) Works
holman
312
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
The World Runs on Bad Software
bkeepers
PRO
66
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
Being A Developer After 40
akosma
89
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for humans not robots
tammielis
250
25k
Speed Design
sergeychernyshev
25
740
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
Transcript
Vue3 ㇐次就上手 milkmidi 2020-11-05
milkmidi (奶綠茶) Positive Grid 資深前端工程師 (強力徵前端工程師中,快來當我的同事)
[email protected]
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