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

about-vue-hooks.pdf

0631f2e33b42847ae5dedbdd53e1c1a4?s=47 sunecosuri
January 30, 2019
360

 about-vue-hooks.pdf

0631f2e33b42847ae5dedbdd53e1c1a4?s=128

sunecosuri

January 30, 2019
Tweet

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!