Vue.jsのリアクティビティと状態管理 | Vue.js入門

refで値を包む

ref()は数値、文字列、真偽値、オブジェクトなどをリアクティブなRefへ変換します。JavaScriptでは.valueを通して読み書きします。

カウンターVUE

import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value += 1
}
console.log(count.value) // 0
increment()
console.log(count.value) // 1

実行結果OUTPUT

0
1

テンプレートでは自動的にアンラップされるため、{{ count }}と書けます。関数や配列の状態も、まずrefで作ると扱いを統一しやすくなります。

reactiveでオブジェクトを扱う

reactive()はオブジェクトや配列をリアクティブにします。プロパティを直接変更できますが、オブジェクト全体を別の値へ差し替える用途にはrefのほうが分かりやすい場合があります。

プロフィールVUE

import { reactive } from 'vue'
const profile = reactive({ name: 'Mika', age: 20 })
profile.age += 1
console.log(profile.name, profile.age)

実行結果OUTPUT

Mika 21

分割代入の注意
const { age } = profileのように取り出すとリアクティビティを失うことがあります。必要ならtoRefs(profile)を使うか、テンプレートやcomputed内でprofile.ageを参照します。

computedで計算値を作る

computedは依存するリアクティブな値が変化したときだけ再計算される、読み取り中心の値です。元データから作れる値を別のstateとして重複保存しないために使います。

未完了件数VUE

import { ref, computed } from 'vue'
const todos = ref([
  { text: '読む', done: true },
  { text: '作る', done: false }
])
const remaining = computed(() =>
  todos.value.filter(todo => todo.done === false).length
)
console.log(remaining.value)

実行結果OUTPUT

「未完了件数」をクリックイベントの中で更新するのではなく、元のtodosから計算します。表示だけでなく、テンプレートの条件判定や検索結果にも使えます。

watchとwatchEffect

watchは指定した値の変化を監視し、API通信や保存などの副作用を実行します。watchEffectはコールバック内で読み取ったリアクティブ値を自動的に追跡します。

検索語を保存するVUE

import { ref, watch } from 'vue'
const keyword = ref('')
watch(keyword, (newValue) => {
  localStorage.setItem('keyword', newValue)
})

計算可能な値をwatchでstateへコピーすると、更新漏れが起きやすくなります。値を返すだけならcomputed、外部システムと同期するならwatch、と覚えましょう。

ライフサイクルと後片付け

コンポーネントには作成、表示、更新、破棄の流れがあります。DOMが必要な処理はonMounted、イベント解除やタイマー停止はonUnmountedで行います。

タイマーを安全に扱うVUE

import { ref, onMounted, onUnmounted } from 'vue'
const seconds = ref(0)
let timer

onMounted(() => {
  timer = setInterval(() => seconds.value += 1, 1000)
})
onUnmounted(() => {
  clearInterval(timer)
})

後片付けがないと、画面から消えたコンポーネントの処理が残り続けることがあります。API通信にはAbortControllerを使う方法もあります。

Vue.js入門の講座一覧

refで値を包む

reactiveでオブジェクトを扱う

computedで計算値を作る

watchとwatchEffect

ライフサイクルと後片付け