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
Vuejs Composition Function の概要
Search
vuedrink
June 10, 2019
Programming
1
740
Vuejs Composition Function の概要
By Kaoru Hosakawa
From AppSocially KK
At Vue.js Tokyo Drinkup
#vuedrink
vuedrink
June 10, 2019
Tweet
Share
More Decks by vuedrink
See All by vuedrink
Publishing Vue Components to NPM
vuedrink
1
580
Other Decks in Programming
See All in Programming
Cursorハンズオン実践!
eltociear
2
990
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
560
Le côté obscur des IA génératives
pascallemerrer
0
140
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
220
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Statistics for Hackers
jakevdp
799
220k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bash Introduction
62gerente
615
210k
How to Ace a Technical Interview
jacobian
280
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Making Projects Easy
brettharned
119
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
KATA
mclloyd
32
15k
Transcript
7VFKT$PNQPTJUJPO'VODUJPOͷ֓ཁ LBPSVIPTPLBXB!DIBUDFOUFSJP "QQ4PDJBMMZגࣜձࣾ
ಈػ
ϩδοΫͷΈཱͯ w 7VFYͰɺίϯϙʔωϯτϕʔεͷ"1*Λ༻͍ͯɺϩδοΫΛΧϓηϧԽ͍ͯ͠Δɻ NJYJOTɺߴ֊ίϯϙʔωϯτɺSFOEFSMFTTίϯϙʔωϯτͳͲͷύλʔϯ͕ଘࡏ͢Δ ͕ɺͦΕͧΕ͕ܽ͋Δɻ w QSPQFSUZͷग़Ͳ͜Ζ͕ෆ໌֬ɺྫ͑ɺͲͷNJYJO͔Βདྷ͍ͯΔͷ͔Θ͔ΓͮΒ͍ w OBNFTQBDFͷিಥɺNJYJOͷϝιου໊ w
ύϑΥʔϚϯεɺߴ֊ίϯϙʔωϯτSFOEFSMFTTίϯϙʔωϯτɺՃͷίϯ ϙʔωϯτ͕ඞཁ w ͦΕʹରͯ͠ɺؔϕʔεͷ"1*ɺ͜ΕΒͷ͕ܽͳ͍ɻϩδοΫΛநग़͠ɺ ʮDPNQPTJUJPOGVODUJPOʯʹ·ͱΊɺϦΞΫςΟϒͳঢ়ଶΛ͢Α͏ʹ͍ͯ͠Δɻ
&YBNQMF function useMouse() { const x = value(0) const y
= value(0) const update = e => { x.value = e.pageX y.value = e.pageY } onMounted(() => { window.addEventListener('mousemove', update) }) onUnmounted(() => { window.removeEventListener('mousemove', update) }) return { x, y } } // in consuming component const Component = { setup() { const { x, y } = useMouse() const { z } = useOtherLogic() return { x, y, z } }, template: `<div>{{ x }} {{ y }} {{ z }}</div>` }
ͦͷଞ w ܕਪ w ͷΰʔϧɿΑΓྑ͍5ZQF4DSJQUܕਪͷαϙʔτ w όϯυϧαΠζ w ؔ"1*ɺ໊લ͖&4FYQPSUTͰΤΩεϙʔτ͞ΕɺΦϯσϚϯυ ͰΠϯϙʔτ͞ΕΔͷͰɺσουίʔυআڈʢUSFFTIBLFʣՄೳ
w ؔ"1*Ϋϥε"1*ΑΓѹॖ͕ߴ͍
ৄࡉ
TFUVQؔ w ίϯϙʔωϯτͷઃఆΛߦ͏ؔ w QSPQTͷ͕ղܾ͠ɺίϯϙʔω ϯτͷΠϯελϯε͕ੜ͞Εͨ ޙɺݺͼग़͞ΕΔ w QSPQTϦΞΫςΟϒ const
MyComponent = { props: { name: String }, setup(props) { console.log(props.name) } }
4UBUF w TFUVQؔɺEBUB ͷΑ͏ʹ UFNQMBUFඳը༻ʹΦϒδΣΫτΛ ฦ͢͜ͱ͕Մೳ w WBMVFXSBQQFSΛͬͯɺTFUVQ ؔͰɺͷมߋ͕ՄೳͳϦΞ ΫςΟϒมΛ࡞Ͱ͖Δʢྫɿ
NTHʣ import { value } from 'vue' const MyComponent = { setup(props) { const msg = value('hello') const appendName = () => { msg.value = `hello ${props.name}` } return { msg, appendName } }, template: `<div @click="appendName">{{ msg }}</div>` }
7BMVF8SBQQFS w +BWB4DSJQUͷϓϦϛςΟϒʢɺจࣈྻͳͲʣɺ͠ɻΑͬͯɺ ؔͷΓ͕มߋͯ͠ߋ৽͞ΕͨΛऔಘ͢Δ͜ͱ͕Ͱ͖ͳ͍ɻ w 7BMVFXSBQQFSΛ͏͜ͱʹΑͬͯҙͷܕΛ࣋ͭΛࢀর͢͠Δ͜ ͱ͕Ͱ͖ΔɻΓɺϦΞΫςΟϒʹͳΓৗʹ࠷৽ʹΛऔಘ͢Δ͜ͱ ͕Մೳɻ
7BMVF6OXSBQQJOH w แ·ΕͨɺSFOEFSίϯςΩ ετϦΞΫςΟϒͳΦϒδΣ ΫτͷೖΕࢠϓϩύςΟ ʢྫɿDPVOUʣͰɺแ͕ղ ͔ΕɺWBMVFͳ͠ͰΞΫηε͢ Δ͜ͱ͕Ͱ͖Δɻ const count
= value(0) const obj = state({ count }) console.log(obj.count) // 0 obj.count++ console.log(obj.count) // 1 console.log(count.value) // 1 count.value++ console.log(obj.count) // 2 console.log(count.value) // 2
$PNQVUFE7BMVFT w $PNQVUFEWBMVFYDPNQVUFE QSPQFSUZͷΑ͏ʹɺґଘ͍ͯ͠Δ Λࢹ͠ɺ͕มߋͨ࣌͠ͷΈ DPNQVUFEWBMVFͷ࠶ܭࢉ͕࣮ࢪ͞ ΕΔɻ w ॻ͖ࠐΈՄೳͳDPNQVUFEWBMVFΛ࡞ Δ߹ɺTFUUFSΛ༻ҙ͢Δɻ
const count = value(0) const writableComputed = computed( // read () => count.value + 1, // write val => { count.value = val - 1 } )
8BUDIFST w XBUDIΛͬͯϦΞΫςΟϒͳε ςʔτΛࢹ͠ɺ෭࡞༻Λى͜͢ ͜ͱ͕Մೳ w ୈ̍Ҿ͕ιʔεʢHFUUFSɺWBMVF ϥούʔɺྻʣɺୈ̎Ҿ͕ ίʔϧόοΫ const
MyComponent = { props: { id: number }, setup(props) { const data = value(null) watch(() => props.id, async (id) => { data.value = await fetchData(id) }) } }
-JGFDZDMF)PPLT w શͯͷMJGFDZDMFIPPLTʹରԠ ͢ΔPO999͕ؔ༻ҙ͞ΕΔ import { onMounted, onUpdated, onUnmounted }
from 'vue' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) } }
%FQFOEFODZ*OKFDUJPO w ίϯϙʔωϯτ͕QSPWJEF ͨ͠Λมߋͨ࣌͠ɺࢠίϯ ϙʔωϯτߋ৽͕ߦΘΕΔ import { provide, inject }
from 'vue' const CountSymbol = Symbol() const Ancestor = { setup() { // providing a value can make it reactive const count = value(0) provide({ [CountSymbol]: count }) } } const Descendent = { setup() { const count = inject(CountSymbol) return { count } } }
ܽ w ίϯϙʔωϯτఆٛͷϦϑϨΫγϣϯ͓Αͼૢ࡞͕͘͠ͳͬͨ w ͔͠͠ɺϦϑϨΫγϣϯૢ࡞੬͍͠ϦεΩʔͳͷͰٯʹྑ͍͜ͱͳͷ͔͠Εͳ͍ɻؔ "1*ͰΧόʔͰ͖Δͱߟ͍͑ͯΔɻ w ίϯϙʔωϯτΛPQUJPOHSPVQ͝ͱʹ·ͱΊΔඞཁ͕ͳ͍ͨΊɺεύήοςΟίʔυΛॿ͢ Δ w
ίϯϙʔωϯτͷPQUJPOΛ͏ͱཧ͞Ε͍ͯΔΑ͏ʹݟ͑Δ͕ɺϩδοΫ֤PQUJPOʹ ࢄ͞Ε͍ͯΔɻྫ͑ɺσʔλΛऔಘ͢ΔʹɺQSPQTɺEBUB ɺNPVOUFEɺXBUDI͕ඞཁɻ w ؔ"1*ͷ߹ɺҰͭͷؔʹϩδοΫΛ·ͱΊΔ͜ͱ͕Ͱ͖ΔɻڊେͳTFUVQ͕ؔͰ͖ͨ ࣌ɺෳͷؔʹղ͢ΕΑ͍ɻ
ࢀরจݙ rfcs/active-rfcs/0000-function-api