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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
milkmidi
November 01, 2020
0
6.3k
Vue3一次就上手
milkmidi
November 01, 2020
Tweet
Share
More Decks by milkmidi
See All by milkmidi
202512-WebConfig 大 AI 時代,工程師的成長之路
milkmidi
0
250
202403-WebComponent
milkmidi
0
190
WebComponent
milkmidi
1
3.2k
前端好朋友-tailwindcss
milkmidi
0
8.4k
202110-federation
milkmidi
0
150
202007-React對戰雷台
milkmidi
0
190
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
116
100k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
430
What does AI have to do with Human Rights?
axbom
PRO
0
1.9k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
50
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Designing Experiences People Love
moore
143
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
740
Paper Plane (Part 1)
katiecoart
PRO
0
3.4k
Scaling GitHub
holman
464
140k
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