Vue.js のリアクティブ変数と onBeforeMount の活用術

Vue.js はコンポーネントベースのフレームワークとして、多くの開発者に愛されています。その中核となるのが リアクティブシステム です。このシステムは、データが変更されると自動的に DOM に反映される強力な仕組みを提供します。

今回は、リアクティブ変数の基礎から、onBeforeMount の使い方、さらに非同期処理との連携について解説します。

### 問題の背景

次のようなコードを考えます。

function isEditable() {
  console.log('isEditable', channel.value.myname);
  console.log('isEditable', aliasName.value);
  return channel.value.myname && aliasName.value === channel.value.myname;
}

onBeforeMount(async () => {
  fetched.value = true;
});

このコードでは、Vue コンポーネントの v-if で条件を判定するための関数 isEditable を使おうとしていますが、思った通りに動作しないケースがあります。

isEditable は Vue のリアクティブシステムに直接結びついておらず、また、onBeforeMount のタイミングでは DOM やリアクティブなデータが完全に初期化されていない可能性があるため、意図した挙動になりません。

そこで、このコードを リアクティブ変数 を用いて改善します！

### リアクティブ変数とは？

リアクティブ変数 (Reactive Variables) とは、Vue のリアクティブシステムに登録され、変更を監視できるようになったデータのことです。これにより、データが変更された場合に、Vue は自動的に DOM を再レンダリングする仕組みを提供します。

Vue.js 3 では、以下の 2 つの方法でリアクティブなデータを作成できます。

ref 単一の値をリアクティブにする。
```
import { ref } from 'vue';
const myValue = ref(0); // 数値や文字列を持つリアクティブ変数
```
ref を使うと、値の変更を監視しながら myValue.value を操作できます。

reactive オブジェクトや配列全体をリアクティブにする。

import { reactive } from 'vue';
const myObject = reactive({
  name: 'Vue',
  version: 3
});

### 解決策：`isEditable` をリアクティブ変数にする

関数ではなく、ref を使ってリアクティブ変数に変えることで、Vue のリアクティブシステムにフックします。以下は修正後のコードです：

<script setup>
import { ref, onBeforeMount } from 'vue';

const fetched = ref(false);
const channel = ref({ myname: '' });
const aliasName = ref('');
const aliasImg = ref('');
const isEditable = ref(false); // ここでリアクティブ変数として定義

onBeforeMount(() => {
  // データを適切に初期化
  channel.value.myname = 'testUser';
  aliasName.value = 'testUser';
  aliasImg.value = 'testImage.png';

  // isEditable を更新
  isEditable.value = channel.value.myname && aliasName.value === channel.value.myname;

  fetched.value = true; // コンポーネントの描画準備完了
});
</script>

<template>
  <div id="content" v-if="fetched">
    <br><br>
    <div class="join">
      <template v-if="!isEditable">
        <img v-if="aliasImg && aliasImg.charAt(0) != ','" :src="aliasImg" />
      </template>
    </div>
  </div>
</template>

このように、isEditable をリアクティブ変数に変更し、その値を onBeforeMount 内で初期化しました。

### `onBeforeMount` について

onBeforeMount は Vue のライフサイクルの一部で、以下のタイミングで実行されます。

データはすでにセットアップ済み。
- コンポーネント内で定義されたデータやメソッドが利用可能。
DOM はまだ生成されていない。
- この段階ではテンプレートがまだレンダリングされていません。

onBeforeMount の用途：

非同期で必要なデータを取得する処理
初期化ロジック（例えば、リアクティブ変数の設定）
テンプレートで利用するデータの準備

### リアクティブ変数を使う利点

リアクティブ変数を使うことで、以下のようなメリットがあります：

自動的なリアクティビティ
データが変更されると、それに応じて DOM が再レンダリングされます。
シンプルなコード
条件やデータを明示的に管理しやすくなり、関数の呼び出し回数を減らせます。
Vue の強力なエコシステムと連携
watch や computed と組み合わせて使うことで、さらに効率的なリアクティビティを実現できます。

### 注意点

リアクティブデータの初期化タイミング
リアクティブ変数が適切に初期化されないと、予期しない挙動につながる可能性があります。
ref と reactive の使い分け
単一の値を管理する場合は ref を、複数のプロパティを持つオブジェクトの場合は reactive を使いましょう。

### まとめ

Vue.js のリアクティブシステムは、開発を劇的に簡単にしてくれる強力なツールです。今回のように、リアクティブ変数を活用してデータを自動的に監視することで、コードの可読性を高め、期待通りの動作を簡単に実現できます。

「リアクティブ変数」という概念をしっかり理解し、プロジェクトで活用してみましょう！✨

登録日：2025-01-17

更新日：2025-01-17

by プログラマーこまつ

コメント tweetでコメント