【Vue3】オブジェクトのプロパティを追加してもリアクティブに動作するようになりました

【Vue.js】オブジェクトのプロパティを追加してもリアクティブに動作しなかった時の備忘録にて、Vue2.xにおいて、オブジェクトのプロパティを追加してもリアクティブに動作しないこと、またその解決策について書きました。

Vue3で同じことをしようとすると、どのような挙動になるのか確認してみました。結論を先に言ってしまうと、Vue3からオブジェクトにプロパティを追加した場合もリアクティブに動作するようになりました。

Vue3環境の準備

vue-cliコマンドを利用してVue3をインストールしていきます。vue createコマンドでVue 3 Previewを選択します。（vue-cliがv4.5以上でないとVue3環境は作成できません。）

vue create study-vue3
? Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint)

（ディレクトリ名はstudy-vue3としました。）

npm run serveを実行して以下の画面が確認できれば、インストールは無事に完了しています。

HelloWorldを書き換える

オブジェクトのプロパティがv-ifに指定されるようHelloWorld.vueを以下に書き換えます。

<template>
  <div>
    <button @click="show">表示する</button>
    <p v-if="hoge.isShow">表示</p>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const hoge = reactive({})
    const show = () => {
      hoge.isShow = true
    }
    return { hoge, show }
  }
}
</script>

Vue2.xの場合、ボタンを押しても表示の文字が出ないことは、【Vue.js】オブジェクトのプロパティを追加してもリアクティブに動作しなかった時の備忘録の記事で説明しましたが...

Vue3から導入されたreactiveメソッドによってこの課題が解決されました。

reactiveメソッドから返されるオブジェクトは、プロパティが追加された場合でもリアクティブに動作させる事が可能になります。🙌🦒

Reactivity API
The reactive conversion is "deep"—it affects all nested properties.

【動作イメージ】

Vue3環境でVue2.xコードを書いて動作確認してみる

Vue2.xでは、リアクティブに動作しなかったコードを、Vue3環境で動かすとどうなるのか確認してみました。

<template>
  <div>
    <button @click="show">表示する</button>
    <p v-if="hoge.isShow">表示</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hoge: {
        // isShow: false, コメントアウトで未定義にしています
      }
    }
  },
  methods: {
    show () {
      this.hoge.isShow = true
    }
  }
}
</script>

Vue3ではリアクティブなプロパティとして認識されるようになっていました。

この挙動になる理由について記載されたリファレンス等は見つかり次第追記していきます。🦒