Vueのreactive、ref、toRef、toRef

前の文章で見たように、Vueはエージェントを使用してステータスの変更を監視します.Proxyはオブジェクトです.彼には識別子がある.(JavaScriptにはvalue(값)とreference(참조)があります.)参照されていない元のタイプ(string、numberなど)をProxyとして作成することはできません.この問題を解決するために、VueはRefを提供する.

reactive

まず、反応を見てみましょう.管理するステータスがobjectの場合、参照があるため、proxyを作成して変更を追跡できます.
元のタイプは変化しても反応しません.string ""のステータスとして宣言されます.inputに変更しましたが反映されません.proxyはpropertyの変化を追跡するため、元のタイプはpropertyを持つことができません.

<script setup>
import { reactive } from 'vue'
const msg = reactive("")
</script>

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

例

objectで包むとどうなりますか?参照があるため、reactive roproxyに変換し、プロセスvalueの変更の追跡を開始します.

<script setup>
import { reactive } from 'vue'
const msg = reactive({value:""})
</script>

<template>
  <h1>msg = {{ msg.value }}</h1>
  <input v-model="msg.value">
</template>

例

ref

したがって、Vueは元のタイプを追跡するためにrefを提供する.refの仕事は簡単です.オリジナルのタイプを包容しているように値をvalueに挿入し、objectに変更します.Proxyを使用するためにvalueにreferenceを付与します.実際のrefの内部も最終的にreactiveを使用するように実現される.

<script setup>
import { ref } from 'vue'
const msg = ref("")
</script>

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

例

Vueのtemplateは、objectを直接使用するのと比較して、msg.valueではなくmsgを使用することができる.VUEはRefを認識する
また,前の文章でarrayにfilter,mapなどの新しい配列を割り当てることでエージェントが上書きされ追跡できない問題を解決するためにobjectを用いて解決した.refを使用しても、この問題を簡単に解決できます.objectで包むような効果

<script setup>
import { ref } from 'vue'

const list = ref([])
const onClick = () => {
  list.value = [...list.value, 'a']
}
</script>

<template>
  <h1> List: {{ list.join(', ')  }} </h1>
  <button @click='onClick'>
    add
  </button>
</template>

例

toRef

オブジェクトのプロパティをコピーする場合、元のタイプの識別子の欠落も問題です.コピーする値が元のタイプの場合、JavaScriptはvalue値のみをコピーするため、Proxyの応答性を忘れます.
文字列はwordsのaであるため、コピーすると値のみがコピーされ、応答性が失われます.

<script setup>
import { reactive, toRef } from 'vue'

const words = reactive({a:"a",b:"b"})
const msg = words.a
</script>

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

例

この問題を解決するにはtoRefを使用します.toRefは、親オブジェクトとの接続を維持するreactiveを返します.このレプリカの変更は、親レプリカも反映され、追跡されます.

<script setup>
import { reactive, toRef } from 'vue'

const words = reactive({a:"a",b:"b"})
const msg = toRef(words, 'a')
</script>

<template>
  <h1>msg = {{ msg}}</h1>
  <input v-model="msg">
</template>

例

toRefs

最後に、toRefsはtoRefを適用してすべてのアクティブなPropertyを返します.だからdestructingを使うことができます

<script setup>
import { reactive, toRefs } from 'vue'

const words = reactive({a:"a",b:"b"})
const {a,b} = toRefs(words)
</script>

<template>
  <h1>msg = {{ a }}</h1>
  <input v-model="a">
</template>

整理する

整理すると、ref、toRef、toRefsは元のタイプの値にreferenceを割り当ててProxyを追跡すると考えられます.
VUEは状態を維持し続けたいしたがって、Proxyを使用して、参照値が必要であることを覚えておくといいでしょう.
また、既存のreactiveを使用する場合に不便なアレイ状態も便利です.
次の記事では、これらの反応性変更に値を変更することを禁止する例外的な状況のPropsについてさらに理解します.