Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vuejs Composition Function の概要

Vuejs Composition Function の概要

By Kaoru Hosakawa
From AppSocially KK
At Vue.js Tokyo Drinkup
#vuedrink

vuedrink

June 10, 2019
Tweet

More Decks by vuedrink

Other Decks in Programming

Transcript

  1. ϩδοΫͷ૊Έཱͯ w 7VFYͰ͸ɺίϯϙʔωϯτϕʔεͷ"1*Λ༻͍ͯɺϩδοΫΛΧϓηϧԽ͍ͯ͠Δɻ NJYJOTɺߴ֊ίϯϙʔωϯτɺSFOEFSMFTTίϯϙʔωϯτͳͲͷύλʔϯ͕ଘࡏ͢Δ ͕ɺͦΕͧΕܽ఺͕͋Δɻ w QSPQFSUZͷग़Ͳ͜Ζ͕ෆ໌֬ɺྫ͑͹ɺͲͷNJYJO͔Βདྷ͍ͯΔͷ͔Θ͔ΓͮΒ͍ w OBNFTQBDFͷিಥɺNJYJOͷϝιου໊ w

    ύϑΥʔϚϯεɺߴ֊ίϯϙʔωϯτ΍SFOEFSMFTTίϯϙʔωϯτ͸ɺ௥Ճͷίϯ ϙʔωϯτ͕ඞཁ w ͦΕʹରͯ͠ɺؔ਺ϕʔεͷ"1*͸ɺ͜ΕΒͷܽ఺͕ͳ͍ɻϩδοΫΛநग़͠ɺ ʮDPNQPTJUJPOGVODUJPOʯʹ·ͱΊɺϦΞΫςΟϒͳঢ়ଶΛ໭͢Α͏ʹ͍ͯ͠Δɻ
  2. &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>` }
  3. 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>` }
  4. 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
  5. 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) }) } }
  6. -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!') }) } }
  7. %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 } } }
  8. ܽ఺ w ίϯϙʔωϯτఆٛͷϦϑϨΫγϣϯ͓Αͼૢ࡞͕೉͘͠ͳͬͨ w ͔͠͠ɺϦϑϨΫγϣϯ΍ૢ࡞͸੬͍͠ϦεΩʔͳͷͰٯʹྑ͍͜ͱͳͷ͔΋͠Εͳ͍ɻؔ਺ "1*ͰΧόʔͰ͖Δͱߟ͍͑ͯΔɻ w ίϯϙʔωϯτΛPQUJPOHSPVQ͝ͱʹ·ͱΊΔඞཁ͕ͳ͍ͨΊɺεύήοςΟίʔυΛॿ௕͢ Δ w

    ίϯϙʔωϯτͷPQUJPOΛ࢖͏ͱ੔ཧ͞Ε͍ͯΔΑ͏ʹݟ͑Δ͕ɺϩδοΫ͸֤PQUJPOʹ ෼ࢄ͞Ε͍ͯΔɻྫ͑͹ɺσʔλΛऔಘ͢Δʹ͸ɺQSPQTɺEBUB ɺNPVOUFEɺXBUDI͕ඞཁɻ w ؔ਺"1*ͷ৔߹ɺҰͭͷؔ਺ʹϩδοΫΛ·ͱΊΔ͜ͱ͕Ͱ͖ΔɻڊେͳTFUVQؔ਺͕Ͱ͖ͨ ࣌͸ɺෳ਺ͷؔ਺ʹ෼ղ͢Ε͹Α͍ɻ