【Vue】リアクティブシステム

最近携わっているVueについての備忘録。

リアクティブとは

その値が監視され、変更が検知される状態のこと。
変数に格納した値など何らかの変更があった場合にDOMを更新してくれる。

ref()

referenceの略。
プリミティブ値（文字や数字など）をリアクティブにする。

ref()は引数を受け取り、それを.valueプロパティを持つ ref オブジェクトにラップして返す。

const sample = ref(123)
console.log(sample.value)
//　123
// valueプロパティを持つオブジェクトにラップされているため、.valueによって値にアクセスできる

computed

計算結果をリアクティブにする。returnが必ず必要。返り値は算出されたref。算出結果はテンプレート内では自動的にアンラップされるため、テンプレート内では .value なしで参照することができる。

<template>
  <p>半径{{ radius }}の円面積を円周率{{ PI }} で計算すると、{{ area }}</p>
</template>

<script setup lang="ts">
//使用する際はimportする
import {ref, computed} from 'vue'

// 半径の初期値設定
const radiusInit = Math.round(Math.random() * 10)
const radius = ref(radiusInit)
const PI = ref(3.14)

// リアルタイムで変更したい計算式
const area = computed(() => {
  return radius.value * radius.value * PI.value
})

// 一秒ごとに半径を生成して、計算結果を反映させる
setInterval(()=> {
  radius.value = Math.round(Math.random() * 10)
}, 1000)

</script>

reactive()

リアクティブなオブジェクトや配列を作る。

上の参考例をオブジェクトにて書き換えてみる。

<template>
  <p>半径{{ data.radius }}の円面積を円周率{{ PI }} で計算すると、{{ area }}</p>
</template>

<script setup lang="ts">
import {reactive, computed} from 'vue'

// オブジェクトにて格納
// reactiveを使用することにより、リアクティブな値となる
const data = reactive({
    PI: 3.14,
    radius: Math.round(Math.random() * 10)
  })

const area = computed(() => {
  return data.radius * data.radius * data.PI
})
const radiusInit = Math.round(Math.random() * 10)

setInterval(()=> {
  data.radius = Math.round(Math.random() * 10)
}, 1000)

</script>

reactiveの制限

①オブジェクト型のみ機能するので、プリミティブ型には機能しない
②リアクティブなオブジェクトを置き換えることや、プロパティをローカル変数に代入したり、分割代入したり、そのプロパティを関数に渡したりすると、リアクティブな接続が失われる

Deep Reactivity

Vue では、デフォルトで状態がリアクティブになっているため、ネストしたオブジェクトや配列を変化させた場合でも、変更が検出されることが期待できる。

参考：https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html

c.sakyou