Vue3のプロパティの変更を検知する(その2)

この記事は 2023 年 05 月 04 日に投稿しました。

1. はじめに

こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue3のプロパティの変更を検知する方法についてです。

2.Vue3のプロパティの変更を検知する(その2)

Vue3のプロパティの変更を検知するには、以下のような実装にします。

実装例

<script lang="ts" setup>
import { defineProps, ref, watchEffect } from "vue";

/**
 * プロパティ定義
 */
interface Props {
  /**
   * 表示フラグ
   */
  isShow: boolean;
}
const props = defineProps<Props>();

/**
 * 表示フラグ(リアクティブ変数)
 */
const isShow = ref(props.isShow);

/**
 * リアクティブ変数が変更された時に呼び出される。
 */
watchEffect(() => {
  if (isShow.value) {
    // 表示フラグが設定されている場合
    // 何らかの処理
  }
};
</script>

リファレンス

Vue3

プロパティ

目次へ

3. おわりに

前回

www.paveway.info

紹介した方法だと、プロパティから取得したリアクティブ変数は変更できないようです。
そのためプロパティから取得したリアクティブ変数を変更する場合はtoRefsではなく、refで取得する必要があります。

リンク

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッド OS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOS モバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ