vue3 のref() reactive()について

はじめに

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

vue3　ref() reactive()とは

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

import方法

import { reactive, ref } from 'vue'

それぞれの役割

refメソッド

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が必要になります。

refのアンラップ

<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は単数ではなくオブジェクトをリアクティブにするメソッドです。

reactiveの例

import { reactive } from 'vue'

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

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

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

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

最後に

良いVueライフを〜

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