Vuejs Composition Function の概要

Vuejs Composition Function の概要

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

Ed1259cf5e33c486668433ee0926dabf?s=128

vuedrink

June 10, 2019
Tweet

Transcript

  1. 7VFKT$PNQPTJUJPO'VODUJPOͷ֓ཁ  LBPSVIPTPLBXB!DIBUDFOUFSJP "QQ4PDJBMMZגࣜձࣾ

  2. ಈػ

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

    ύϑΥʔϚϯεɺߴ֊ίϯϙʔωϯτ΍SFOEFSMFTTίϯϙʔωϯτ͸ɺ௥Ճͷίϯ ϙʔωϯτ͕ඞཁ w ͦΕʹରͯ͠ɺؔ਺ϕʔεͷ"1*͸ɺ͜ΕΒͷܽ఺͕ͳ͍ɻϩδοΫΛநग़͠ɺ ʮDPNQPTJUJPOGVODUJPOʯʹ·ͱΊɺϦΞΫςΟϒͳঢ়ଶΛ໭͢Α͏ʹ͍ͯ͠Δɻ
  4. &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>` }
  5. ͦͷଞ w ܕਪ࿦ w ͷΰʔϧɿΑΓྑ͍5ZQF4DSJQUܕਪ࿦ͷαϙʔτ w όϯυϧαΠζ w ؔ਺"1*͸ɺ໊લ෇͖&4FYQPSUTͰΤΩεϙʔτ͞ΕɺΦϯσϚϯυ ͰΠϯϙʔτ͞ΕΔͷͰɺσουίʔυআڈʢUSFFTIBLFʣՄೳ

    w ؔ਺"1*͸Ϋϥε"1*ΑΓѹॖ཰͕ߴ͍
  6. ৄࡉ

  7. TFUVQؔ਺ w ίϯϙʔωϯτͷઃఆΛߦ͏ؔ਺ w QSPQTͷ஋͕ղܾ͠ɺίϯϙʔω ϯτͷΠϯελϯε͕ੜ੒͞Εͨ ޙɺݺͼग़͞ΕΔ w QSPQT͸ϦΞΫςΟϒ const

    MyComponent = { props: { name: String }, setup(props) { console.log(props.name) } }
  8. 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>` }
  9. 7BMVF8SBQQFS w +BWB4DSJQUͷϓϦϛςΟϒ஋ʢ਺ɺจࣈྻͳͲʣ͸ɺ஋౉͠ɻΑͬͯɺ ؔ਺ͷ໭Γ஋͕มߋͯ͠΋ߋ৽͞Εͨ஋Λऔಘ͢Δ͜ͱ͕Ͱ͖ͳ͍ɻ w 7BMVFXSBQQFSΛ࢖͏͜ͱʹΑͬͯ೚ҙͷܕΛ࣋ͭ஋Λࢀর౉͢͠Δ͜ ͱ͕Ͱ͖Δɻ໭Γ஋͸ɺϦΞΫςΟϒʹͳΓৗʹ࠷৽ʹ஋Λऔಘ͢Δ͜ͱ ͕Մೳɻ

  10. 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
  11. $PNQVUFE7BMVFT w $PNQVUFEWBMVF͸YDPNQVUFE QSPQFSUZͷΑ͏ʹɺґଘ͍ͯ͠Δ஋ Λ؂ࢹ͠ɺ஋͕มߋͨ࣌͠ͷΈ DPNQVUFEWBMVFͷ࠶ܭࢉ͕࣮ࢪ͞ ΕΔɻ w ॻ͖ࠐΈՄೳͳDPNQVUFEWBMVFΛ࡞ Δ৔߹͸ɺTFUUFSΛ༻ҙ͢Δɻ

    const count = value(0) const writableComputed = computed( // read () => count.value + 1, // write val => { count.value = val - 1 } )
  12. 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) }) } }
  13. -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!') }) } }
  14. %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 } } }
  15. ܽ఺ w ίϯϙʔωϯτఆٛͷϦϑϨΫγϣϯ͓Αͼૢ࡞͕೉͘͠ͳͬͨ w ͔͠͠ɺϦϑϨΫγϣϯ΍ૢ࡞͸੬͍͠ϦεΩʔͳͷͰٯʹྑ͍͜ͱͳͷ͔΋͠Εͳ͍ɻؔ਺ "1*ͰΧόʔͰ͖Δͱߟ͍͑ͯΔɻ w ίϯϙʔωϯτΛPQUJPOHSPVQ͝ͱʹ·ͱΊΔඞཁ͕ͳ͍ͨΊɺεύήοςΟίʔυΛॿ௕͢ Δ w

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