about-vue-hooks.pdf

Transcript

1. Vue-hooks Vue hooks ʹ͍ͭͯ @sunecosuri Date: 2019-01-30 Vue Night in

   Fukuoka #2

2. @sunecosuri(Narumi Kouki) GMOϖύϘ
   ΤϯδχΞ ϚΠϒʔϜɿ ϝϧνϟϦܯ࡯ʢ์ஔࣗసंΛ໭͢ʣ Ͱ͔͍஑ʢେ߼ެԂʣ෇ۙͰ͔Θ͍͍ݘʹରͯ͠৮Βͤͯ͘Εͱ੠ֻ͚ࣄҊ

3. ࿩͢͜ͱ Vue-hooks ʹ͍ͭͯ ಺෦࣮૷ʹ͍ͭͯ React-hooks ʹ͍ͭͯ mixin ʹ͍ͭͯ

4. Vue hooks Vue hooks

5. Vue hooks Vue Hooks Evan You(Vueͷ։ൃऀ)͞ΜͷVueͰ React hooks ͷΑ͏ʹ࣮૷͞Ε͍ͯΔ࣮ݧతͳϦϙδτϦ ※

   ͢Ͱʹnpm publish ͞Ε͍ͯΔ͕production ౤ೖ͸ඇਪ঑ͱͷ͜ͱʢݱ࣌఺Ͱ0.3.2ʣ

6. React hooks React hooks

7. React hooks React Hooks ReactͰStateful ͳίϯϙʔωϯτΛॻ͘ࡍɺClass ComponentΛ࢖Θͳ͚Ε͹ͳΒͳ͔͕ͬͨ State Λ Functional

   Component Ͱ΋ѻ͑ΔΑ͏ʹͨ͠΋ͷ

8. ͳʹ͕͍͍ͷʁ

9. ͳʹ͕͍͍ͷ͔ Vue ͷ ݱࡏͷAPI ʹมΘΔ΋ͷͱݴ͏ΑΓɺMixin ͷҙຯ߹͍ʹ͍ۙ

10. Mixin Mixin ί ϯ ϙ ʔ ω ϯ τ ʹ

    ڞ ௨ ػ ೳ Λ 
 ௥ Ճ ͢ Δ ࢓ ૊ Έ - methods ʹڞ௨ؔ਺ͷ௥Ճ - lifecycle hook ʹ͓͚Δॲཧͷڞ௨Խ - created ͳͲͷϥΠϑαΠΫϧϑοΫʹڞ௨ॲཧ௥Ճ ϥΠϑαΠΫϧϝιου͸ϛοΫεΠϯˠίϯϙʔωϯτͷॱʹ࣮ߦ͞ΕΔ - namespace͕ڝ߹ͨ͠ࡍ͸ίϯϙʔωϯτଆ͕༏ઌతʹ࣮ߦ͞ΕΔ
 ʢৼΔ෣͍తʹ͸্ॻ͖Ͱ͸ͳ͘Mergeʣ
 - ίϯϙʔωϯτʹΦϓγϣϯͷΑ͏ͳܗͰࠞͥࠐ·ΕΔ ※্هͷΑ͏ʹॻ͘ͱɺϩʔυ࣌ʹ ‘loaded mixin’ -> ’loaded main’ͷॱͰग़ྗ͞ΕΔ

11. mirin mixin ͷσϝϦοτ ҉ ໧ త ͳ ڍ ಈ ʹ

    ͳ Γ ΍ ͢ ͍ ͨ Ί ɺ ό ά Λ ੜ Έ ͩ ͠ ΍ ͢ ͍ Օ ॴ ʹ ͳ Γ ΍ ͢ ͍ m i x i n Ͱ ڞ ௨ Խ ͠ ͯ ί ʔ υ Λ ෼ ཭ ͠ ͯ ͍ Δ ͷ ʹ ɺ 
 ؔ ৺ ͸ ෼ ཭ ͞ Ε ʹ ͘͘ ͳ Γ ͕ ͪ ͳ ͷ Ͱ ໋ ໊ ΍ ॲ ཧ ͦ ͷ ΋ ͷ Λ ҙ ࣝ ͠ ͨ Γ ޻ ෉ ͢ Δ ඞ ཁ ͕ ͋ Δ

12. Vue Hooks API Vue Hooks API API໊ ಺༰ useEffect ϥΠϑαΠΫϧΠϕϯτΛ࣮ݱ͢ΔجװͱͳΔAPI

    useRef Instance.$refs Λฦ͢ useData localStateΛఆٛ Vueͷdata૬౰ instance.$set() Ͱ࣮૷ useMounted useEffectΛ೿ੜͤͯ͞mounted()Λ࣮૷ useDestroyed useEffectΛ೿ੜͤͯ͞destroyed()Λ࣮૷ useUpdated useEffectΛ೿ੜͤͯ͞updated()Λ࣮૷ useWatch instance.$watch Λ಺෦Ͱ࣮ߦͯ͠Ҿ਺Λฦ͢ useComputed instance.$watch Λ಺෦Ͱ࣮ߦͯ͠ɹinstance. _computedStore Λฦ͢ withHooks ͜ͷؔ਺ʹ౉͞Εͨؔ਺಺ͰͷΈ্هͷHookΛݺͼग़͢͜ͱ͕Ͱ͖Δ

13. ͜Μͳ෩ʹॻ͚Δ
 (ΧελϜϑοΫver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useComputed,

    useWatch, useMountedͱ͔Λ༻͍ͯదٓॲཧΛ௥Ճ 3. ΧελϜϑοΫΛఆٛ͢Δ 4. hooks() ಺෦ͰΧελϜϑοΫͷฦΓ஋Λฦ͢ 
 5. render method ಺෦ͰwithHooks ͷ໭Γ஋ʢΧελϜϑοΫʣΛݺͼग़͢

14. ͜Μͳ෩ʹॻ͚Δ (ैདྷͷVueίϯϙʔωϯτver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useDataΛ࢖ͬͯΦϒδΣΫτͷܗͰఆٛ͢Δ

    3. hooks() ಺෦ͰuseComputed, useWatch, useMountedͱ͔Λ༻͍ͯద ٓॲཧΛ௥Ճ
 4. templateଆͰར༻͢Δ஋Λreturn͢Δ

15. Demo Demo

16. ײ૝ ͱ ·ͱΊ - Vue3.X Ͱ͸VueMixin ͔Β Vue hooks APIʹஔ͖׵͑Δ͜ͱΛલ޲͖ʹݕ౼ͯͦ͠͏

    - Hooks Λ࢖ͬͯίϯϙʔωϯτΛؔ਺Խ͢Δ͜ͱͰείʔϓΛԚ͞ͳ͍ - useEffects() Λ࢖͏ͱΑΓॊೈʹΧελϜϑοΫΛͰ͖ͯڞ௨ͷϩδοΫ΍ॲཧΛؔ਺ͱ ͯ͠෼཭͢Δ͜ͱ͕Ͱ͖ͦ͏
 ʢͱ͸͍͑React hooksྗ͕ͳ͍ͷͰɺڧ͍ํੋඇڭ͍͑ͯͩ͘͞ʂʣ - ࢀߟ: https://qiita.com/c6h4clch3_gh/items/424a6ceba8148456ae67

17. Thanks Thanks!