Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in

by ryo

Slide 1

Slide 1 text

Ref vs Reactive Vue3 Composition API ͷϦΞΫςΟϒؔ਺ͷ୳ڀ 2020/07/31 Remote.vue @KawamataRyo

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ

Slide 6

Slide 6 text

Vue3 Composition API ͷ ϦΞΫςΟϒؔ਺ͷৄࡉ & ࢖͍෼͚

Slide 7

Slide 7 text

ࠓ೔ͷΰʔϧ

Slide 8

Slide 8 text

ͬ͘͟ΓComposition APIͷ ϦΞΫςΟϒؔ਺ʹ͍ͭͯཧղ͢Δ ࣗ෼ͳΓͷref & reactiveͷ ࢖͍෼͚Λߟ͑ΒΕΔ

Slide 9

Slide 9 text

1. Vue Composition APIͱ͸ʁ

Slide 10

Slide 10 text

Vue3Ͱ௥Ճ͞ΕΔ৽͍͠API ʢPlugin ͱͯ͠Vue2ܥͰ΋࢖༻Մೳʣ

Slide 11

Slide 11 text

σʔλͱϩδοΫΛ ΧϓηϧԽ͠ɺநग़ͱ࠶ར ༻͕༰қʹͳΔ

Slide 12

Slide 12 text

2. ϦΞΫςΟϒͱ͸ʁ

Slide 13

Slide 13 text

ϦΞΫςΟϒ ͋Δม਺Λॻ͖׵͑ͨ࣌ʹɺࣄલʹఆΊͨؔ܎ੑΛ ݩʹɺଞͷม਺͕ద੾ʹߋ৽͞ΕͨΓɺ ࣄલʹఆΊͨಈ࡞͕ൃಈ͢Δ͜ͱ ʢࢀߟɿ ͖ͨΔ΂͖vue-nextͷίΞΛཧղ͢Δ ʣ

Slide 14

Slide 14 text

਎ۙͳϦΞΫςΟϒ excelͷsumؔ਺ ґଘ͢Δ஋ͷ มԽʹΑͬͯࣗಈతʹ ܭࢉ݁ՌΛߋ৽͢Δ

Slide 15

Slide 15 text

ίʔυͰද͢ͱ..

Slide 16

Slide 16 text

ίʔυͰද͢ͱ..

Slide 17

Slide 17 text

ίʔυͰද͢ͱ.. ΋ͪΖΜมΘΒͳ͍...

Slide 18

Slide 18 text

Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...

Slide 19

Slide 19 text

Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...

Slide 20

Slide 20 text

มΘͬͯΔ!!! Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...

Slide 21

Slide 21 text

࠷ߴศར

Slide 22

Slide 22 text

3. Vue Composition API Ͱ ϦΞΫςΟϒΛ࡞Γग़ؔ͢਺ͱ͸ʁ

Slide 23

Slide 23 text

ref & reactive

Slide 24

Slide 24 text

ref ͱ͸ʁ

Slide 25

Slide 25 text

ref ஋ΛϦΞΫςΟϒͳrefΦϒδΣΫτʹͯ͠ฦؔ͢਺ɻ ஋ʹ͸valueͱ͍͏୯ҰͷϓϩύςΟͰΞΫηεͰ͖Δɻ

Slide 26

Slide 26 text

reactive ͱ͸ʁ

Slide 27

Slide 27 text

reactive ϓϦϛςΟϒͰͳ͍஋Λड͚औΓɺϦΞΫςΟϒͳProxyΦϒ δΣΫτΛฦؔ͢਺

Slide 28

Slide 28 text

ͰɺɺͲͬͪΛ࢖͑͹ྑ͍Μ͍ͩʁ

Slide 29

Slide 29 text

ɹɹެࣜͷݟղ

Slide 30

Slide 30 text

there are two viable styles: 1. Use ref and reactive just like how you'd declare primitive type variables and object variables in normal JavaScript. It is recommended to use a type system with IDE support when using this style. 2. Use reactive whenever you can, and remember to use toRefs when returning reactive objects from composition functions. This reduces the mental overhead of refs but does not eliminate the need to be familiar with the concept. At this stage, we believe it is too early to mandate a best practice on ref vs. reactive. We recommend you to go with the style that aligns with your mental model better from the two options above. We will be collecting real world user feedback and eventually provide more deﬁnitive guidance on this topic. ʢࢀߟɿhttps://composition-api.vuejs.org/#ref-vs-reactive ʣ

Slide 31

Slide 31 text

2ͭͷελΠϧ͕͋Δ 1. refͱreactiveΛ࢖͍෼͚Δ 2. ՄೳͳݶΓreactiveΛ࢖͏

Slide 32

Slide 32 text

1. refͱreactiveΛ࢖͍෼͚Δ ௨ৗͷJSͰͷϓϦϛ ςΟϒͱΦϒδΣΫτ ͷ࢖͍෼͚ͷΑ͏ʹɺ ༻్ʹΑͬͯ࢖͍෼͚Δ

Slide 33

Slide 33 text

2. ՄೳͳݶΓreactive࢖͏ vue2ܥͷdataΈ͍ͨͳѻ͍ Ͱcomponent͝ͱʹ୯Ұͷ stateΛ࣋ͪՄೳͳݶΓ reactiveΛ࢖͏

Slide 34

Slide 34 text

Ͱ΋ɺʮ·ͩϕετϓϥΫςΟεΛܾΊΔͷ ͸࣌ظঘૣɺϢʔβʔ͔ΒͷҙݟΛऩू͠ɺ ࠷ऴతʹΨΠμϯεΛఏڙ͢Δɻʯͱͷ͜ͱ

Slide 35

Slide 35 text

ͳΔ΄Ͳ... Ͱ΋໎͏ͳʙ

Slide 36

Slide 36 text

ࣗ෼ͳΓʹ ref & reactive ʹ͍ͭͯ৭ʑௐ΂ͯΈͨ

Slide 37

Slide 37 text

ᶃ ಺෦࣮૷͸Ͳ͏ͳ͍ͬͯΔʁ

Slide 38

Slide 38 text

ref

Slide 39

Slide 39 text

Ҿ਺Ͱड͚ͱͬͨ஋Λ createRefͰvalueͱ͍͏ getterͱsetterΛ࣋ͭΦϒ δΣΫτͰϥοϓ͍ͯ͠Δɻ ref

Slide 40

Slide 40 text

ref getterͱsetter͕ݺ͹Εͨλ ΠϛϯάͰɺґଘؔ਺ͷه࿥ Λߦ͏track,ґଘؔ਺ͷ࠶࣮ ߦΛߦ͏ triggerΛݺͼग़͠ ͯϦΞΫςΟϒΛ࣮ݱ͍ͯ͠ Δ ͜͜Ͱґଘؔ਺Λอଘ ͜͜Ͱґଘؔ਺Λ࠶࣮ߦ

Slide 41

Slide 41 text

reactive

Slide 42

Slide 42 text

reactive Ҿ਺Ͱड͚औͬͨΦϒδΣΫ τΛ΋ͱʹProxyΛ࡞੒ͯ͠ ฦ͍ͯ͠Δɻ

Slide 43

Slide 43 text

Proxy͸ES6ͰೖͬͨΦϒ δΣΫτͷجຊૢ࡞ΛΠϯ λʔηϓτ͢ΔϓϩΩγΛ࡞ Δؔ਺ reactive ͜͜ͰProxyΛ࡞੒

Slide 44

Slide 44 text

proxyͷgetϋϯυϥʔͱɺ setϋϯυϥʔͰґଘؔ਺ͷ ه࿥Λߦ͏track,ґଘؔ਺ͷ ࠶࣮ߦΛߦ͏ triggerΛݺͼ ग़ͯ͠ϦΞΫςΟϒΛ࣮ݱ͠ ͍ͯΔ reactive

Slide 45

Slide 45 text

proxyͷgetϋϯυϥʔͱɺ setϋϯυϥʔͰґଘؔ਺ͷ ه࿥Λߦ͏track,ґଘؔ਺ͷ ࠶࣮ߦΛߦ͏ triggerΛݺͼ ग़ͯ͠ϦΞΫςΟϒΛ࣮ݱ͠ ͍ͯΔ reactive ͜͜Ͱґଘؔ਺Λه࿥ ͜͜Ͱґଘؔ਺Λࡍ࣮ߦ

Slide 46

Slide 46 text

ᶄ ϦΞΫςΟϒԽͰ͖ͳ͍஋͸ʁ

Slide 47

Slide 47 text

reactive

Slide 48

Slide 48 text

reactive ϓϦϛςΟϒҎ֎ͷ஋ͳΒ ϦΞΫςΟϒͳProxyΦϒ δΣΫτΛ࡞ͬͯ͘ΕΔɻ

Slide 49

Slide 49 text

ref

Slide 50

Slide 50 text

ref ϓϦϛςΟϒͳ஋Ҏ֎ͷΦϒ δΣΫτ΍ɺArray౳Ͱ΋Ϧ ΞΫςΟϒͳrefΦϒδΣΫτ Λ࡞ͬͯ͘ΕΔɻ

Slide 51

Slide 51 text

ref refͷ಺෦ͰɺϓϦϛςΟϒͳ ஋Ҏ֎͕Ҿ਺ʹ༩͑ΒΕͨ৔ ߹͸reactive͕ݺ͹Ε͍ͯΔɻ

Slide 52

Slide 52 text

ref refͷ಺෦ͰɺϓϦϛςΟϒͳ ஋Ҏ֎͕Ҿ਺ʹ༩͑ΒΕͨ৔ ߹͸reactive͕ݺ͹Ε͍ͯΔɻ ͜͜ͰreactiveΛ࣮ߦ

Slide 53

Slide 53 text

ᶅ ͦΕͧΕΛωετͨ͠৔߹͸ʁ

Slide 54

Slide 54 text

ref <- reactive

Slide 55

Slide 55 text

ref <- reactive refʹreactiveΛೖΕͨ৔߹ ͸ɺಛʹมΘΒͣͦͷ··ಈ ࡞͢ΔɻݩͷϓϩΩγͱͷࢀ র΋อͨΕΔɻ

Slide 56

Slide 56 text

reactive <- ref

Slide 57

Slide 57 text

reactive <- ref reactiveʹrefΛೖΕͨ৔߹ ͸ɺref͕Ξϯϥοϓ͞ΕΔɻ ͨͩɺݩͷrefͱͷࢀর͸อͨ ΕΔɻ

Slide 58

Slide 58 text

ᶆ ଞͦΕͧΕͷಛҟࣄ߲͸ʁ

Slide 59

Slide 59 text

ref

Slide 60

Slide 60 text

template Ref Composition APIͰ͸ϦΞΫ ςΟϒͳRefͱtemplate Ref ʢVue2ܥͷvm.$refʣͷ֓೦ ͕౷Ұ͞Ε͍ͯΔɻ refΦϒδΣΫτΛref=ͰόΠ ϯυ͢Δ͜ͱͰDOMཁૉΛ औಘͰ͖Δɻ

Slide 61

Slide 61 text

computedͷ໭Γ஋ͱͯ͠ͷrefʢreadonlyʣ computedʢࢉग़ϓϩύ ςΟʣͷ໭Γ஋͸ɺreadonly ͳrefʹͳΔɻcomputedͷ໭ Γ஋͕ΦϒδΣΫτͷ৔߹Ͱ ΋ɺrefͰϥοϓ͞Ε͍ͯΔɻ

Slide 62

Slide 62 text

reactive

Slide 63

Slide 63 text

reactiveͷফࣦ ϩδοΫΛ֎෦Խͯ͠ɺ reactiveͳΦϒδΣΫτΛฦ ؔ͢਺Λ࡞ͬͨ৔߹ɺ෼ׂ୅ ೖͨ͠ॠؒϦΞΫςΟϒ͕ফ ࣦ͢Δɻ

Slide 64

Slide 64 text

reactiveͷফࣦ ϩδοΫΛ֎෦Խͯ͠ɺ reactiveͳΦϒδΣΫτΛฦ ؔ͢਺Λ࡞ͬͨ৔߹ɺ෼ׂ୅ ೖͨ͠ॠؒϦΞΫςΟϒ͕ফ ࣦ͢Δɻ ͜͜Ͱx, y͸ͨͩͷϓϦϛςΟϒ ͳ஋ʹͳͬͯ͠·͏

Slide 65

Slide 65 text

reactiveͷফࣦ ίϯϙʔβϒϧͳؔ਺͔Βɺ reactiveͳΦϒδΣΫτΛฦ͢ ৔߹͸ɺtoRefsΛར༻ͯ͠ref Ͱϥοϓͨ͠ϓϩύςΟΛ࣋ͭ ΦϒδΣΫτʹม׵͢Δɻ

Slide 66

Slide 66 text

reactiveͷফࣦ ίϯϙʔβϒϧͳؔ਺͔Βɺ reactiveͳΦϒδΣΫτΛฦ͢ ৔߹͸ɺtoRefsΛར༻ͯ͠ref Ͱϥοϓͨ͠ϓϩύςΟΛ࣋ͭ ΦϒδΣΫτʹม׵͢Δɻ ֤ϓϩύςΟΛrefʹม׵ refͱͯ͠ड͚औΕΔ

Slide 67

Slide 67 text

4. ·ͱΊ

Slide 68

Slide 68 text

SFG SFBDUJWF ϦΞΫςΟϒͷ࣮ݱํ๏ HFUUFSͱTFUUFS 1SPYZ ϦΞΫςΟϒʹग़དྷͳ͍஋ ϓϦϛςΟϒͳ஋ ͦΕͧΕωετͨ࣌͠ͷಈ࡞ SFG͕VOXSBQ͞ΕΔ ಛҟࣄ߲ ɾ UFNQMBUFSFG ɾ DPNQVUFEͷ໭஋ ɾϦΞΫςΟϒͷফࣦ ɾUP3FG UP3FGT

Slide 69

Slide 69 text

ࣗ෼ͷதͰͷ࢖͍෼͚ͷ݁࿦͸..

Slide 70

Slide 70 text

ͦ΋ͦ΋ͷAPIઃܭͱͯ྆͠ํ࢖͏͜ͱΛ૝ఆ͞Ε͍ͯΔΑ͏ʹ ࢥ͑Δɻ௨ৗͷJSͱಉ͡Α͏ʹϓϦϛςΟϒͳ஋Λม਺ʹଋറ ͢Δ৔߹͸refɻԿ͔ͷ·ͱ·ΓͰΦϒδΣΫτͱͯ͠ม਺ʹଋ റ͢Δ৔߹͸reactiveΛ࢖͏ɻϩδοΫΛநग़ͯ͠reactiveΛ࢖ ͏৔߹͸ϦΞΫςΟϒͷফࣦʹ஫ҙͯ͠toRefsΛ࢖͏ɻ refͱreactiveΛదٓ࢖͍෼͚Δ͕ྑͦ͞͏

Slide 71

Slide 71 text

Ҏ্

Slide 72

Slide 72 text

ʮࣗ෼ͷνʔϜ͸͜Μͳ෩ʹ࢖͍෼͚ͯΔΑʔʯ ͳͲ͋Ε͹ίϝϯτ΋Β͑Δͱخ͍͠Ͱ͢

Slide 73

Slide 73 text

ࢀߟ • ͖ͨΔ΂͖vue-nextͷίΞΛཧղ͢Δ • Vue3 API Doc • Vue Composition API RFC • Vue Mastery Vue3 Reactivity • VUE 3 COMPOSITION API: REF VS REACTIVE • Vue #2 Advent Calendar 201918೔໨ • Vue.jsͷcomposition-apiʹ͓͚Δ"ref"ͱ"reactive"ͬͯԿ͕ҧ͏ͷʁ

Slide 74

Slide 74 text

͓·͚

Slide 75

Slide 75 text

Vue Composition APIͰ࢖͑Δ ଞͷϦΞΫςΟϒؔ܎ͷؔ਺঺հ

Slide 76

Slide 76 text

readonly ΦϒδΣΫτʢref or reactive or ϓϨʔϯʣΛड͚औΓɺಡ ΈऔΓઐ༻ͷϦΞΫςΟϒͳϓ ϩΩγΛฦؔ͢਺ɻ ܰྔͳಠࣗstoreͷपΓͷ࣮૷ Ͱ࢖͑ͦ͏ɻ

Slide 77

Slide 77 text

customRef ґଘؔ܎ͷ௥੻ͱߋ৽ͷτϦ ΨʔΛ໌ࣔతʹ੍ޚ͢ΔΧελ ϚΠζ͞ΕͨrefΦϒδΣΫτ Λฦؔ͢਺Ͱ͢ɻ ݶఆ͞Εͨ༻్ͰϦΞΫςΟϒ ͳ஋Λ࢖͍͍ͨ࣌ʹྑͦ͞͏Ͱ ͢ɻ

Slide 78

Slide 78 text

markRaw ϦΞΫςΟϒԽ͞Εͳ͍ʢϓϩΩ γ͞Εͳ͍ʣΦϒδΣΫτΛฦ͢ ؔ਺ɻ దٓmarkRawΛ࢖͍ϓϩΩγม ׵ΛεΩοϓ͢Δ͜ͱͰɺෆมͷ σʔλιʔεΛ࣋ͭେن໛ͳϦε τͷϨϯμϦϯάͳͲͰύϑΥʔ ϚϯεΛ޲্ͤ͞Δ͜ͱ͕Ͱ͖· ͢ɻ

Slide 79

Slide 79 text

shallowReactive ઙ͍ϦΞΫςΟϒͳΦϒδΣΫ τΛฦؔ͢਺ɻωετ͞ΕͨΦ ϒδΣΫτ͸ϦΞΫςΟϒԽ͞ Ε·ͤΜɻ

Slide 80

Slide 80 text

shallowRef ઙ͍ϦΞΫςΟϒΛ࣋ͭrefΦ ϒδΣΫτΛฦؔ͢਺ɻωετ ͞ΕͨΦϒδΣΫτ͸ϦΞΫ ςΟϒԽ͞Ε·ͤΜɻ

Slide 81

Slide 81 text

shallowReadonly ઙ͍ϦΞΫςΟϒΛ࣋ͭrefΦ ϒδΣΫτΛฦؔ͢਺ɻωετ ͞ΕͨΦϒδΣΫτ͸ϦΞΫ ςΟϒԽ͞Ε·ͤΜɻ

Slide 82

Slide 82 text

unref Ҿ਺͕refͷ৔߹͸ref.valueͷ ஋ΛɺͦΕҎ֎ͩͬͨΒҾ਺ࣗ ମΛฦؔ͢਺ɻ val = isRef(val) ? val.value : val ͷ౶ҥߏจͰ͢ɻ

Slide 83

Slide 83 text

toRaw ϓϩΩγ͞ΕͨϦΞΫςΟϒ ͳΦϒδΣΫτͷੜσʔλΛ ฦؔ͢਺ɻ

Slide 84

Slide 84 text

toRef reactiveͳΦϒδΣΫτͷࢦ ఆͷϓϩύςΟΛrefΦϒδΣ Ϋτʹม׵ͯ͠ฦؔ͢਺ɻ propsͷ஋ΛϦΞΫςΟϒΛ ੾Βͣɺsetupؔ਺֎ͷίϯ ϙʔβϒϧͳؔ਺ʹ౉͢ͱ͖ ͳͲʹ࢖͑·͢ɻ

Slide 85

Slide 85 text

toRefs reactiveͳΦϒδΣΫτͷશ ͯͷϓϩύςΟΛrefΦϒδΣ Ϋτʹม׵ͨ͠ΦϒδΣΫτ Λฦؔ͢਺ɻʢ࠶ؼతʹ͸࣮ ߦ͞Εͳ͍ͷͰୈҰ֊૚ͷΈ refʹม׵ʣ