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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. View Slide

4. View Slide

5. ࠓ೔࿩͢͜ͱ
   

   View Slide

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

   View Slide

7. ࠓ೔ͷΰʔϧ
   

   View Slide

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

   View Slide

9. 1. Vue Composition APIͱ͸ʁ
   

   View Slide

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

    View Slide

11. σʔλͱϩδοΫΛ
    ΧϓηϧԽ͠ɺநग़ͱ࠶ར
    ༻͕༰қʹͳΔ
    

    View Slide

12. 2. ϦΞΫςΟϒͱ͸ʁ
    

    View Slide

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

    View Slide

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

    View Slide

15. ίʔυͰද͢ͱ..
    

    View Slide

16. ίʔυͰද͢ͱ..
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ࠷ߴศར
    

    View Slide

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

    View Slide

23. ref &
    reactive
    

    View Slide

24. ref ͱ͸ʁ
    

    View Slide

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

    View Slide

26. reactive ͱ͸ʁ
    

    View Slide

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

    View Slide

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

    View Slide

29. ɹɹެࣜͷݟղ
    

    View Slide

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 ʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. ref
    

    View Slide

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

    View Slide

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

    View Slide

41. reactive
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. reactive
    

    View Slide

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

    View Slide

49. ref
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. ref <- reactive
    

    View Slide

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

    View Slide

56. reactive <- ref
    

    View Slide

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

    View Slide

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

    View Slide

59. ref
    

    View Slide

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

    View Slide

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

    View Slide

62. reactive
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. 4. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. Ҏ্
    

    View Slide

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

    View Slide

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"ͬͯԿ͕ҧ͏ͷʁ
    

    View Slide

74. ͓·͚
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide