【Vue3】refとreactiveとは?使い方を紹介する

vuejsのrefとreactiveとは

refreactiveとは、Composition APIで値をリアクティブに使うための仕組みです。

リアクティブとはjavascript側で値が変更されたら、html側に反映される状態のことを言います。

Option APIdataに相当します。

refとreactiveの使い方

refの使い方

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let inputData = ref('')
      return {
        inputData
      }
    }
  }
</script>

<template>
  <input v-model="inputData" />
  <p>inputData : {{ inputData }}</p>
</template>

raactiveの使い方

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      let reactiveData = reactive({ title: 'Vue 3 Guide' })

      return {
        reactiveData
      }
    }
  }
</script>

<template>
  <p>reactiveData : {{ reactiveData.title }}</p>
</template>