リアクティビティー パート１
Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする 優れたリアクティビティシステム を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、ref、computed、watch があります。
ref()は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は.valueを通してアクセスすることができます。computed()は getter 関数を受け取り、getter からの返り値を反映したrefオブジェクトを返します。
ここのプレイグラウンドでは、数字を保持するための count という名前の ref オブジェクトと、count の倍の値を計算する doubled という名前の computed オブジェクトを作成します。Vue は doubled が count に依存していることを知っているため、count が変更された際に doubled は自動で再計算されます。
ボタンをクリックして count の値が増やしてみてください。doubled の値も変更が反映されることを確認することができます。
注意: <template> 内で参照された場合、refs は Vue によって自動的にアンラップされます。.value は、<script> 内や Vue コンポーネント外の JavaScript でアクセスする時にのみ必要になります。
チャレンジ
では、実際にやってみましょう！
現在 2 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。
そのためには:
ref()を使ってmultiplierという名前の変数を作成し、2をセットします<script>と<template>の両方で、doubledをresultにリネームしますresultの実装をcount.value * multiplier.valueを返すように変更しますmultiplierの値を増加させるための別のボタンを追加します
以上です！ multiplier ボタンを押下すると、新しい乗数による変更結果を確認することができます。
もし行き詰まったら、以下のボタンかエディタの右上にあるボタンをクリックして回答を見ることができます。
アイデアを自由に試してみてください。終わったら、次のセクションに進んで、リアクティビティシステムについてさらに学びましょう。