Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ryo
July 31, 2020
14k

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

ryo

July 31, 2020
Tweet

More Decks by ryo

Transcript

  1. 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 ʣ
  2. ref

  3. ref

  4. ref

  5. SFG SFBDUJWF ϦΞΫςΟϒͷ࣮ݱํ๏ HFUUFSͱTFUUFS 1SPYZ ϦΞΫςΟϒʹग़དྷͳ͍஋  ϓϦϛςΟϒͳ஋ ͦΕͧΕωετͨ࣌͠ͷಈ࡞ 

    SFG͕VOXSBQ͞ΕΔ ಛҟࣄ߲ ɾ UFNQMBUFSFG ɾ DPNQVUFEͷ໭஋ ɾϦΞΫςΟϒͷফࣦ ɾUP3FG UP3FGT
  6. ࢀߟ • ͖ͨΔ΂͖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"ͬͯԿ͕ҧ͏ͷʁ