Pro Yearly is on sale from $80 to $50! »

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

0a16f7b8629f2facca2a1e80a73c5423?s=47 ryo
July 31, 2020
2.2k

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

0a16f7b8629f2facca2a1e80a73c5423?s=128

ryo

July 31, 2020
Tweet

Transcript

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

  2. ࣗݾ঺հ

  3. None
  4. None
  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͞ΕΔ ಛҟࣄ߲ ɾ UFNQMBUFSFG ɾ 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ʹม׵ʣ