Vue 3.0 (vue-next) ベータ版 Composition API リアクティブプロパティを試す(2)

Vue 3.0 (vue-next) ベータ版 Composition API を使って、リアクティブプロパティの使い方を試していきます。

前回は ref() を使って、プリミティブ値をリアクティブプロパティとしてコンポーネント上で利用しました。
次は reactive() を使った場合のリアクティブプロパティの取り扱いを試します。

学習リソース

以下の公式ドキュメントに従って学習しています。
できればこっちを参照することをお勧めします。

composition-api.vuejs.org

コンポーネント定義

クリックするとカウントアップするボタンを作っていきます。

template ブロック

二つのボタンと、それぞれにラベルとしてカウンターを表示します。

<template>
  <div>
    <button @click="incrementFooA">A: {{foo.a}}</button>
    <button @click="incrementFooB">B: {{foo.b}}</button>
  </div>
</template>

script ブロック

Vue.js v2 における script ブロックの例は割愛し、Vue 3.0 (vue-next) ベータ版の例を示します。

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

export default defineComponent({
  setup () {
    const foo = reactive({
      a: 0,
      b: 0
    })

    function incrementFooA () {
      foo.a++
    }

    function incrementFooB () {
      foo.b++
    }

    return {
      foo,
      incrementFooA,
      incrementFooB
    }
  }
})
</script>

reactive() を使ってオブジェクトのプロパティをリアクティブにできます。
ボタンをクリックすると、対応したボタンのラベルがインクリメントされるのがわかります。
インスペクタを表示してみると、対応するDOM要素だけが再描画されていることも確認できます。

ネストされたプロパティ

任意の階層にネストしてもリアクティブプロパティとして機能します

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

export default defineComponent({
  setup () {
    const foo = reactive({
      bar: {
        baz: {
          c: 0
        }
      }
    })

    function incrementFooBarBazC () {
      foo.bar.baz.c++
    }

    return {
      foo,
      incrementFooBarBazC
    }
  }
})
</script>

リアクティブ性の喪失

ref() のときにはなかった注意点として、プロパティをリアクティブに扱うためには reactive() の戻り値として得られたオブジェクトへの参照を維持する必要があります。
以下のように取り回すといずれもリアクティブ性が失われます。

分割代入構文を用いて取り出したとき
スプレッド構文を用いて展開したとき

おわり

次は Composition API から、算出プロパティ / 読み取り専用プロパティについてやっていきます。

lnly.hatenablog.com

l12a

白ウサギを追え