はじめに

vue3の学んでいく中で、新しく実装されたref　reactiveの違いが曖昧だったので調べてみました。
参考にしてもらえると幸いです。

vue3　ref() reactive()とは

refとreactiveはどちらも値をリアクティブな状態にするときに使うメソッドです。
使い方としては、vueからimportで利用することが出来ます。

import { reactive, ref } from 'vue'

それぞれの役割

refメソッド

refは独立したプリミティブ値をリアクティブにする際に利用します。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

refを実行すると、返り値としてミュータブルなオブジェクトを返すようになります。
そのため、.valueで呼び出す必要がある点注意が必要です。

また、refがレンダーコンテキストかつ、テンプレート内でアクセスする必要がある場合、自動的に浅くアンラップされる仕様になっています。
入れ子になったrefがテンプレート内で.valueが必要になります。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
    <button @click="nested.count.value ++">Nested Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count,

        nested: {
          count
        }
      }
    }
  }
</script>

reactiveメソッド

refの単数に対してreactiveは単数ではなくオブジェクトをリアクティブにするメソッドです。

import { reactive } from 'vue'

// リアクティブな状態
const state = reactive({
  count: 0
})

vue2におけるVue.observable()APIに相当するメソッドになります。
vue3にアップデートされたことにより改名されました。

reactiveメソッドを実行した場合、オブジェクトの中身はすべてリアクティブになります。
デフォルトにdeepモードが影響しているためです。
そのため、入れ子になっていた場合でもリアクティブになります。

実はdata()でオブジェクトを返す際にもこのreactiveメソッドが内部で実行されています。

最後に

良いVueライフを〜

参考にさせてもらったサイト