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

about-vue-hooks.pdf

sunecosuri
January 30, 2019
670

 about-vue-hooks.pdf

sunecosuri

January 30, 2019
Tweet

More Decks by sunecosuri

Transcript

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

    ͢Ͱʹnpm publish ͞Ε͍ͯΔ͕production ౤ೖ͸ඇਪ঑ͱͷ͜ͱʢݱ࣌఺Ͱ0.3.2ʣ
  2. Mixin Mixin ί ϯ ϙ ʔ ω ϯ τ ʹ

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

    ͳ Γ ΍ ͢ ͍ ͨ Ί ɺ ό ά Λ ੜ Έ ͩ ͠ ΍ ͢ ͍ Օ ॴ ʹ ͳ Γ ΍ ͢ ͍ m i x i n Ͱ ڞ ௨ Խ ͠ ͯ ί ʔ υ Λ ෼ ཭ ͠ ͯ ͍ Δ ͷ ʹ ɺ 
 ؔ ৺ ͸ ෼ ཭ ͞ Ε ʹ ͘͘ ͳ Γ ͕ ͪ ͳ ͷ Ͱ ໋ ໊ ΍ ॲ ཧ ͦ ͷ ΋ ͷ Λ ҙ ࣝ ͠ ͨ Γ ޻ ෉ ͢ Δ ඞ ཁ ͕ ͋ Δ
  4. 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Λݺͼग़͢͜ͱ͕Ͱ͖Δ
  5. ͜Μͳ෩ʹॻ͚Δ
 (ΧελϜϑοΫver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useComputed,

    useWatch, useMountedͱ͔Λ༻͍ͯదٓॲཧΛ௥Ճ 3. ΧελϜϑοΫΛఆٛ͢Δ 4. hooks() ಺෦ͰΧελϜϑοΫͷฦΓ஋Λฦ͢ 
 5. render method ಺෦ͰwithHooks ͷ໭Γ஋ʢΧελϜϑοΫʣΛݺͼग़͢
  6. ͜Μͳ෩ʹॻ͚Δ (ैདྷͷVueίϯϙʔωϯτver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useDataΛ࢖ͬͯΦϒδΣΫτͷܗͰఆٛ͢Δ

    3. hooks() ಺෦ͰuseComputed, useWatch, useMountedͱ͔Λ༻͍ͯద ٓॲཧΛ௥Ճ
 4. templateଆͰར༻͢Δ஋Λreturn͢Δ
  7. ײ૝ ͱ ·ͱΊ - Vue3.X Ͱ͸VueMixin ͔Β Vue hooks APIʹஔ͖׵͑Δ͜ͱΛલ޲͖ʹݕ౼ͯͦ͠͏

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