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

vuejsのrefとreactiveとは

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

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

Option APIのdataに相当します。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

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>