Vue.jsにおけるrefとuseStateの挙動の理解
背景
Vue.jsのリアクティブな状態管理には、ref や useState などのAPIが利用されます。これらのAPIの挙動を理解するため、関数外での ref 宣言がアプリケーションにどのような影響を与えるのかを整理しました。
ソースコードの実験
以下のGitHubリポジトリには、ref と useState を用いたサンプルコードがあります。このコードをクローンして、各APIの挙動を実際に確かめてみることができます。
GitHubリポジトリへのリンク
実験結果と解析
主なポイント
-
useState:
useStateはアプリケーション全体で状態を共有します。これにより、アプリケーションの異なる部分間で同じ状態を利用することができます。 -
コンポーネント内のref:
refをコンポーネント内で宣言すると、そのスコープはそのコンポーネントに限られます。他のコンポーネントで同じcomposablesを使用しても、状態は共有されません。 -
関数外のref宣言:
関数の外部でrefを宣言すると、その状態はアプリケーション全体で共有されます。これにより、異なるコンポーネント間で一貫したデータを持つことが可能です。
気づきとベストプラクティス
ダブルクォーテーションの表示
-
分割代入をしない場合、テンプレートに直接
refオブジェクトを表示しようとすると、ダブルクォーテーションが表示されることがあります。これは、refで宣言されたmessageプロパティがオブジェクトとして解釈されるためです。 -
正しい表示のためには、テンプレートに渡す際には文字列を直接指定することが重要です。例えば、
refオブジェクトの内部プロパティにvalueを使用して直接アクセスします。
valueにアクセスすることでダブルクォーテーション回避
<!-- refオブジェクトの内部プロパティに直接アクセスする例 -->
<p>{{ message_2.message.value }}</p>
ただ、基本的には分割代入を使うと思うので大丈夫かと思います。
個人的にいろいろ試したりする中で気づいた違いで戸惑った点でした。