Vue-hooks Vue hooks ʹ͍ͭͯ @sunecosuri Date: 2019-01-30 Vue Night in Fukuoka #2

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

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

Vue hooks Vue hooks

Vue hooks Vue Hooks Evan You(Vueͷ։ൃऀ)͞ΜͷVueͰ React hooks ͷΑ͏ʹ࣮૷͞Ε͍ͯΔ࣮ݧతͳϦϙδτϦ ※ ͢Ͱʹnpm publish ͞Ε͍ͯΔ͕production ౤ೖ͸ඇਪ঑ͱͷ͜ͱʢݱ࣌఺Ͱ0.3.2ʣ

React hooks React hooks

React hooks React Hooks ReactͰStateful ͳίϯϙʔωϯτΛॻ͘ࡍɺClass ComponentΛ࢖Θͳ͚Ε͹ͳΒͳ͔͕ͬͨ State Λ Functional Component Ͱ΋ѻ͑ΔΑ͏ʹͨ͠΋ͷ

ͳʹ͕͍͍ͷʁ

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

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

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

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Λݺͼग़͢͜ͱ͕Ͱ͖Δ

͜Μͳ෩ʹॻ͚Δ
 (ΧελϜϑοΫver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useComputed, useWatch, useMountedͱ͔Λ༻͍ͯదٓॲཧΛ௥Ճ 3. ΧελϜϑοΫΛఆٛ͢Δ 4. hooks() ಺෦ͰΧελϜϑοΫͷฦΓ஋Λฦ͢ 
 5. render method ಺෦ͰwithHooks ͷ໭Γ஋ʢΧελϜϑοΫʣΛݺͼग़͢

͜Μͳ෩ʹॻ͚Δ (ैདྷͷVueίϯϙʔωϯτver) 1. vue-hooks͔Β ར༻͢Δ hooks Λ import 2. useDataΛ࢖ͬͯΦϒδΣΫτͷܗͰఆٛ͢Δ 3. hooks() ಺෦ͰuseComputed, useWatch, useMountedͱ͔Λ༻͍ͯద ٓॲཧΛ௥Ճ
 4. templateଆͰར༻͢Δ஋Λreturn͢Δ

Demo Demo

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

Thanks Thanks!