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

Remote.vue#2 2020/07/31

スライド補足情報を加えた勉強会登壇レポートはこちらにまとめてます。
https://qiita.com/ryo2132/items/f4e78dbadd9368c91add

1. Ref vs Reactive Vue3 Composition API ͷϦΞΫςΟϒؔ਺ͷ୳ڀ 2020/07/31 Remote.vue @KawamataRyo
2. ࣗݾ঺հ
5. ࠓ೔࿩͢͜ͱ
6. Vue3 Composition API ͷ ϦΞΫςΟϒؔ਺ͷৄࡉ & ࢖͍෼͚
7. ࠓ೔ͷΰʔϧ
8. ͬ͘͟ΓComposition APIͷ ϦΞΫςΟϒؔ਺ʹ͍ͭͯཧղ͢Δ ࣗ෼ͳΓͷref & reactiveͷ ࢖͍෼͚Λߟ͑ΒΕΔ
9. 1. Vue Composition APIͱ͸ʁ
10. Vue3Ͱ௥Ճ͞ΕΔ৽͍͠API ʢPlugin ͱͯ͠Vue2ܥͰ΋࢖༻Մೳʣ
11. σʔλͱϩδοΫΛ ΧϓηϧԽ͠ɺநग़ͱ࠶ར ༻͕༰қʹͳΔ
12. 2. ϦΞΫςΟϒͱ͸ʁ
13. ϦΞΫςΟϒ ͋Δม਺Λॻ͖׵͑ͨ࣌ʹɺࣄલʹఆΊͨؔ܎ੑΛ ݩʹɺଞͷม਺͕ద੾ʹߋ৽͞ΕͨΓɺ ࣄલʹఆΊͨಈ࡞͕ൃಈ͢Δ͜ͱ ʢࢀߟɿ ͖ͨΔ΂͖vue-nextͷίΞΛཧղ͢Δ ʣ
14. ਎ۙͳϦΞΫςΟϒ excelͷsumؔ਺ ґଘ͢Δ஋ͷ มԽʹΑͬͯࣗಈతʹ ܭࢉ݁ՌΛߋ৽͢Δ
15. ίʔυͰද͢ͱ..
16. ίʔυͰද͢ͱ..
17. ίʔυͰද͢ͱ.. ΋ͪΖΜมΘΒͳ͍...
18. Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...
19. Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...
20. มΘͬͯΔ!!! Composition APIͷϦΞΫςΟϒؔ਺Λ࢖͏ͱ...
21. ࠷ߴศར
22. 3. Vue Composition API Ͱ ϦΞΫςΟϒΛ࡞Γग़ؔ͢਺ͱ͸ʁ
23. ref & reactive
24. ref ͱ͸ʁ
25. ref ஋ΛϦΞΫςΟϒͳrefΦϒδΣΫτʹͯ͠ฦؔ͢਺ɻ ஋ʹ͸valueͱ͍͏୯ҰͷϓϩύςΟͰΞΫηεͰ͖Δɻ
26. reactive ͱ͸ʁ
27. reactive ϓϦϛςΟϒͰͳ͍஋Λड͚औΓɺϦΞΫςΟϒͳProxyΦϒ δΣΫτΛฦؔ͢਺
28. ͰɺɺͲͬͪΛ࢖͑͹ྑ͍Μ͍ͩʁ
29. ɹɹެࣜͷݟղ
30. 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 definitive guidance on this topic. ʢࢀߟɿhttps://composition-api.vuejs.org/#ref-vs-reactive ʣ
31. 2ͭͷελΠϧ͕͋Δ 1. refͱreactiveΛ࢖͍෼͚Δ 2. ՄೳͳݶΓreactiveΛ࢖͏
32. 1. refͱreactiveΛ࢖͍෼͚Δ ௨ৗͷJSͰͷϓϦϛ ςΟϒͱΦϒδΣΫτ ͷ࢖͍෼͚ͷΑ͏ʹɺ ༻్ʹΑͬͯ࢖͍෼͚Δ
33. 2. ՄೳͳݶΓreactive࢖͏ vue2ܥͷdataΈ͍ͨͳѻ͍ Ͱcomponent͝ͱʹ୯Ұͷ stateΛ࣋ͪՄೳͳݶΓ reactiveΛ࢖͏
34. Ͱ΋ɺʮ·ͩϕετϓϥΫςΟεΛܾΊΔͷ ͸࣌ظঘૣɺϢʔβʔ͔ΒͷҙݟΛऩू͠ɺ ࠷ऴతʹΨΠμϯεΛఏڙ͢Δɻʯͱͷ͜ͱ
35. ͳΔ΄Ͳ... Ͱ΋໎͏ͳʙ
36. ࣗ෼ͳΓʹ ref & reactive ʹ͍ͭͯ৭ʑௐ΂ͯΈͨ
37. ᶃ ಺෦࣮૷͸Ͳ͏ͳ͍ͬͯΔʁ
38. ref
39. Ҿ਺Ͱड͚ͱͬͨ஋Λ createRefͰvalueͱ͍͏ getterͱsetterΛ࣋ͭΦϒ δΣΫτͰϥοϓ͍ͯ͠Δɻ ref
40. ref getterͱsetter͕ݺ͹Εͨλ ΠϛϯάͰɺґଘؔ਺ͷه࿥ Λߦ͏track,ґଘؔ਺ͷ࠶࣮ ߦΛߦ͏ triggerΛݺͼग़͠ ͯϦΞΫςΟϒΛ࣮ݱ͍ͯ͠ Δ ͜͜Ͱґଘؔ਺Λอଘ ͜͜Ͱґଘؔ਺Λ࠶࣮ߦ
41. reactive
42. reactive Ҿ਺Ͱड͚औͬͨΦϒδΣΫ τΛ΋ͱʹProxyΛ࡞੒ͯ͠ ฦ͍ͯ͠Δɻ
43. Proxy͸ES6ͰೖͬͨΦϒ δΣΫτͷجຊૢ࡞ΛΠϯ λʔηϓτ͢ΔϓϩΩγΛ࡞ Δؔ਺ reactive ͜͜ͰProxyΛ࡞੒
44. proxyͷgetϋϯυϥʔͱɺ setϋϯυϥʔͰґଘؔ਺ͷ ه࿥Λߦ͏track,ґଘؔ਺ͷ ࠶࣮ߦΛߦ͏ triggerΛݺͼ ग़ͯ͠ϦΞΫςΟϒΛ࣮ݱ͠ ͍ͯΔ reactive
45. proxyͷgetϋϯυϥʔͱɺ setϋϯυϥʔͰґଘؔ਺ͷ ه࿥Λߦ͏track,ґଘؔ਺ͷ ࠶࣮ߦΛߦ͏ triggerΛݺͼ ग़ͯ͠ϦΞΫςΟϒΛ࣮ݱ͠ ͍ͯΔ reactive ͜͜Ͱґଘؔ਺Λه࿥ ͜͜Ͱґଘؔ਺Λࡍ࣮ߦ
46. ᶄ ϦΞΫςΟϒԽͰ͖ͳ͍஋͸ʁ
47. reactive
48. reactive ϓϦϛςΟϒҎ֎ͷ஋ͳΒ ϦΞΫςΟϒͳProxyΦϒ δΣΫτΛ࡞ͬͯ͘ΕΔɻ
49. ref
50. ref ϓϦϛςΟϒͳ஋Ҏ֎ͷΦϒ δΣΫτ΍ɺArray౳Ͱ΋Ϧ ΞΫςΟϒͳrefΦϒδΣΫτ Λ࡞ͬͯ͘ΕΔɻ
51. ref refͷ಺෦ͰɺϓϦϛςΟϒͳ ஋Ҏ֎͕Ҿ਺ʹ༩͑ΒΕͨ৔ ߹͸reactive͕ݺ͹Ε͍ͯΔɻ
52. ref refͷ಺෦ͰɺϓϦϛςΟϒͳ ஋Ҏ֎͕Ҿ਺ʹ༩͑ΒΕͨ৔ ߹͸reactive͕ݺ͹Ε͍ͯΔɻ ͜͜ͰreactiveΛ࣮ߦ
53. ᶅ ͦΕͧΕΛωετͨ͠৔߹͸ʁ
54. ref <- reactive
55. ref <- reactive refʹreactiveΛೖΕͨ৔߹ ͸ɺಛʹมΘΒͣͦͷ··ಈ ࡞͢ΔɻݩͷϓϩΩγͱͷࢀ র΋อͨΕΔɻ
56. reactive <- ref
57. reactive <- ref reactiveʹrefΛೖΕͨ৔߹ ͸ɺref͕Ξϯϥοϓ͞ΕΔɻ ͨͩɺݩͷrefͱͷࢀর͸อͨ ΕΔɻ
58. ᶆ ଞͦΕͧΕͷಛҟࣄ߲͸ʁ
59. ref
60. template Ref Composition APIͰ͸ϦΞΫ ςΟϒͳRefͱtemplate Ref ʢVue2ܥͷvm.$refʣͷ֓೦ ͕౷Ұ͞Ε͍ͯΔɻ refΦϒδΣΫτΛref=ͰόΠ ϯυ͢Δ͜ͱͰDOMཁૉΛ औಘͰ͖Δɻ
61. computedͷ໭Γ஋ͱͯ͠ͷrefʢreadonlyʣ computedʢࢉग़ϓϩύ ςΟʣͷ໭Γ஋͸ɺreadonly ͳrefʹͳΔɻcomputedͷ໭ Γ஋͕ΦϒδΣΫτͷ৔߹Ͱ ΋ɺrefͰϥοϓ͞Ε͍ͯΔɻ
62. reactive
63. reactiveͷফࣦ ϩδοΫΛ֎෦Խͯ͠ɺ reactiveͳΦϒδΣΫτΛฦ ؔ͢਺Λ࡞ͬͨ৔߹ɺ෼ׂ୅ ೖͨ͠ॠؒϦΞΫςΟϒ͕ফ ࣦ͢Δɻ
64. reactiveͷফࣦ ϩδοΫΛ֎෦Խͯ͠ɺ reactiveͳΦϒδΣΫτΛฦ ؔ͢਺Λ࡞ͬͨ৔߹ɺ෼ׂ୅ ೖͨ͠ॠؒϦΞΫςΟϒ͕ফ ࣦ͢Δɻ ͜͜Ͱx, y͸ͨͩͷϓϦϛςΟϒ ͳ஋ʹͳͬͯ͠·͏
65. reactiveͷফࣦ ίϯϙʔβϒϧͳؔ਺͔Βɺ reactiveͳΦϒδΣΫτΛฦ͢ ৔߹͸ɺtoRefsΛར༻ͯ͠ref Ͱϥοϓͨ͠ϓϩύςΟΛ࣋ͭ ΦϒδΣΫτʹม׵͢Δɻ
66. reactiveͷফࣦ ίϯϙʔβϒϧͳؔ਺͔Βɺ reactiveͳΦϒδΣΫτΛฦ͢ ৔߹͸ɺtoRefsΛར༻ͯ͠ref Ͱϥοϓͨ͠ϓϩύςΟΛ࣋ͭ ΦϒδΣΫτʹม׵͢Δɻ ֤ϓϩύςΟΛrefʹม׵ refͱͯ͠ड͚औΕΔ
67. 4. ·ͱΊ
68. SFG SFBDUJWF ϦΞΫςΟϒͷ࣮ݱํ๏ HFUUFSͱTFUUFS 1SPYZ ϦΞΫςΟϒʹग़དྷͳ͍஋  ϓϦϛςΟϒͳ஋ ͦΕͧΕωετͨ࣌͠ͷಈ࡞  SFG͕VOXSBQ͞ΕΔ ಛҟࣄ߲ ɾ UFNQMBUF
    SFG
    ɾ DPNQVUFEͷ໭஋ ɾϦΞΫςΟϒͷফࣦ
    ɾUP3FG
    UP3FGT
69. ࣗ෼ͷதͰͷ࢖͍෼͚ͷ݁࿦͸..
70. ͦ΋ͦ΋ͷAPIઃܭͱͯ྆͠ํ࢖͏͜ͱΛ૝ఆ͞Ε͍ͯΔΑ͏ʹ ࢥ͑Δɻ௨ৗͷJSͱಉ͡Α͏ʹϓϦϛςΟϒͳ஋Λม਺ʹଋറ ͢Δ৔߹͸refɻԿ͔ͷ·ͱ·ΓͰΦϒδΣΫτͱͯ͠ม਺ʹଋ റ͢Δ৔߹͸reactiveΛ࢖͏ɻϩδοΫΛநग़ͯ͠reactiveΛ࢖ ͏৔߹͸ϦΞΫςΟϒͷফࣦʹ஫ҙͯ͠toRefsΛ࢖͏ɻ refͱreactiveΛదٓ࢖͍෼͚Δ͕ྑͦ͞͏
71. Ҏ্
72. ʮࣗ෼ͷνʔϜ͸͜Μͳ෩ʹ࢖͍෼͚ͯΔΑʔʯ ͳͲ͋Ε͹ίϝϯτ΋Β͑Δͱخ͍͠Ͱ͢
73. ࢀߟ • ͖ͨΔ΂͖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"ͬͯԿ͕ҧ͏ͷʁ
74. ͓·͚
75. Vue Composition APIͰ࢖͑Δ ଞͷϦΞΫςΟϒؔ܎ͷؔ਺঺հ
76. readonly ΦϒδΣΫτʢref or reactive or ϓϨʔϯʣΛड͚औΓɺಡ ΈऔΓઐ༻ͷϦΞΫςΟϒͳϓ ϩΩγΛฦؔ͢਺ɻ ܰྔͳಠࣗstoreͷपΓͷ࣮૷ Ͱ࢖͑ͦ͏ɻ
77. customRef ґଘؔ܎ͷ௥੻ͱߋ৽ͷτϦ ΨʔΛ໌ࣔతʹ੍ޚ͢ΔΧελ ϚΠζ͞ΕͨrefΦϒδΣΫτ Λฦؔ͢਺Ͱ͢ɻ ݶఆ͞Εͨ༻్ͰϦΞΫςΟϒ ͳ஋Λ࢖͍͍ͨ࣌ʹྑͦ͞͏Ͱ ͢ɻ
78. markRaw ϦΞΫςΟϒԽ͞Εͳ͍ʢϓϩΩ γ͞Εͳ͍ʣΦϒδΣΫτΛฦ͢ ؔ਺ɻ దٓmarkRawΛ࢖͍ϓϩΩγม ׵ΛεΩοϓ͢Δ͜ͱͰɺෆมͷ σʔλιʔεΛ࣋ͭେن໛ͳϦε τͷϨϯμϦϯάͳͲͰύϑΥʔ ϚϯεΛ޲্ͤ͞Δ͜ͱ͕Ͱ͖· ͢ɻ
79. shallowReactive ઙ͍ϦΞΫςΟϒͳΦϒδΣΫ τΛฦؔ͢਺ɻωετ͞ΕͨΦ ϒδΣΫτ͸ϦΞΫςΟϒԽ͞ Ε·ͤΜɻ
80. shallowRef ઙ͍ϦΞΫςΟϒΛ࣋ͭrefΦ ϒδΣΫτΛฦؔ͢਺ɻωετ ͞ΕͨΦϒδΣΫτ͸ϦΞΫ ςΟϒԽ͞Ε·ͤΜɻ
81. shallowReadonly ઙ͍ϦΞΫςΟϒΛ࣋ͭrefΦ ϒδΣΫτΛฦؔ͢਺ɻωετ ͞ΕͨΦϒδΣΫτ͸ϦΞΫ ςΟϒԽ͞Ε·ͤΜɻ
82. unref Ҿ਺͕refͷ৔߹͸ref.valueͷ ஋ΛɺͦΕҎ֎ͩͬͨΒҾ਺ࣗ ମΛฦؔ͢਺ɻ val = isRef(val) ? val.value : val ͷ౶ҥߏจͰ͢ɻ
83. toRaw ϓϩΩγ͞ΕͨϦΞΫςΟϒ ͳΦϒδΣΫτͷੜσʔλΛ ฦؔ͢਺ɻ
84. toRef reactiveͳΦϒδΣΫτͷࢦ ఆͷϓϩύςΟΛrefΦϒδΣ Ϋτʹม׵ͯ͠ฦؔ͢਺ɻ propsͷ஋ΛϦΞΫςΟϒΛ ੾Βͣɺsetupؔ਺֎ͷίϯ ϙʔβϒϧͳؔ਺ʹ౉͢ͱ͖ ͳͲʹ࢖͑·͢ɻ
85. toRefs reactiveͳΦϒδΣΫτͷશ ͯͷϓϩύςΟΛrefΦϒδΣ Ϋτʹม׵ͨ͠ΦϒδΣΫτ Λฦؔ͢਺ɻʢ࠶ؼతʹ͸࣮ ߦ͞Εͳ͍ͷͰୈҰ֊૚ͷΈ refʹม׵ʣ