Vuejs Composition Function の概要

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

Transcript

1. 7VFKT
   $PNQPTJUJPO
   'VODUJPO
   ͷ֓ཁ 
   LBPSVIPTPLBXB!DIBUDFOUFSJP "QQ4PDJBMMZגࣜձࣾ
   
2. ಈػ
3. ϩδοΫͷ૊Έཱͯ w 7VF
   YͰ͸ɺίϯϙʔωϯτϕʔεͷ"1*Λ༻͍ͯɺϩδοΫΛΧϓηϧԽ͍ͯ͠Δɻ NJYJOTɺ
   ߴ֊ίϯϙʔωϯτɺSFOEFSMFTT
   ίϯϙʔωϯτͳͲͷύλʔϯ͕ଘࡏ͢Δ ͕ɺͦΕͧΕܽ఺͕͋Δɻ
   w QSPQFSUZͷग़Ͳ͜Ζ͕ෆ໌֬ɺྫ͑͹ɺͲͷ
   NJYJO
   ͔Βདྷ͍ͯΔͷ͔Θ͔ΓͮΒ͍
   w OBNFTQBDFͷিಥɺNJYJOͷϝιου໊
   w ύϑΥʔϚϯεɺߴ֊ίϯϙʔωϯτ΍
   SFOEFSMFTT
   ίϯϙʔωϯτ͸ɺ௥Ճͷίϯ ϙʔωϯτ͕ඞཁ
   w ͦΕʹରͯ͠ɺؔ਺ϕʔεͷ"1*͸ɺ͜ΕΒͷܽ఺͕ͳ͍ɻϩδοΫΛநग़͠ɺ ʮDPNQPTJUJPO
   GVODUJPOʯʹ·ͱΊɺϦΞΫςΟϒͳঢ়ଶΛ໭͢Α͏ʹ͍ͯ͠Δɻ
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*͸ɺ໊લ෇͖
   &4
   FYQPSUT
   ͰΤΩεϙʔτ͞ΕɺΦϯσϚϯυ ͰΠϯϙʔτ͞ΕΔͷͰɺσουίʔυআڈʢUSFF
   TIBLFʣՄೳ
   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 WBMVF
   XSBQQFS
   Λ࢖ͬͯɺ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. 7BMVF
   8SBQQFS w +BWB4DSJQU
   ͷϓϦϛςΟϒ஋ʢ਺ɺจࣈྻͳͲʣ͸ɺ஋౉͠ɻΑͬͯɺ ؔ਺ͷ໭Γ஋͕มߋͯ͠΋ߋ৽͞Εͨ஋Λऔಘ͢Δ͜ͱ͕Ͱ͖ͳ͍ɻ
   w 7BMVF
   XSBQQFS
   Λ࢖͏͜ͱʹΑͬͯ೚ҙͷܕΛ࣋ͭ஋Λࢀর౉͢͠Δ͜ ͱ͕Ͱ͖Δɻ໭Γ஋͸ɺϦΞΫςΟϒʹͳΓৗʹ࠷৽ʹ஋Λऔಘ͢Δ͜ͱ ͕Մೳɻ
10. 7BMVF
    6OXSBQQJOH 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. $PNQVUFE
    7BMVFT w $PNQVUFE
    WBMVF
    ͸
    Y
    DPNQVUFE
    QSPQFSUZ
    ͷΑ͏ʹɺґଘ͍ͯ͠Δ஋ Λ؂ࢹ͠ɺ஋͕มߋͨ࣌͠ͷΈ
    DPNQVUFE
    WBMVF
    ͷ࠶ܭࢉ͕࣮ࢪ͞ ΕΔɻ
    w ॻ͖ࠐΈՄೳͳDPNQVUFE
    WBMVFΛ࡞ Δ৔߹͸ɺ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 શͯͷ
    MJGFDZDMF
    IPPLT
    ʹରԠ ͢Δ
    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 ίϯϙʔωϯτΛ
    PQUJPO
    HSPVQ
    ͝ͱʹ·ͱΊΔඞཁ͕ͳ͍ͨΊɺεύήοςΟίʔυΛॿ௕͢ Δ
    w ίϯϙʔωϯτͷ
    PQUJPO
    Λ࢖͏ͱ੔ཧ͞Ε͍ͯΔΑ͏ʹݟ͑Δ͕ɺϩδοΫ͸֤
    PQUJPO
    ʹ ෼ࢄ͞Ε͍ͯΔɻྫ͑͹ɺσʔλΛऔಘ͢Δʹ͸ɺQSPQTɺEBUB ɺNPVOUFEɺXBUDI͕ඞཁɻ
    w ؔ਺"1*ͷ৔߹ɺҰͭͷؔ਺ʹϩδοΫΛ·ͱΊΔ͜ͱ͕Ͱ͖Δɻڊେͳ
    TFUVQ
    ؔ਺͕Ͱ͖ͨ ࣌͸ɺෳ਺ͷؔ਺ʹ෼ղ͢Ε͹Α͍ɻ
16. ࢀরจݙ rfcs/active-rfcs/0000-function-api