Vue3のリアクティブシステムの実験

Question

前提

Vue3の基礎についての質問です。
「Vue３　フロントエンド開発の教科書」のソースコードです。

実現したいこと

ref変数と通常の変数の表示の差（リアクティブ）を実験したい。

発生している問題・エラーメッセージ

①は表示が変わらず、②は１秒毎に表示が変化することを想定しております（本の解説もそのように書いてあります。）が、両方の値が動いてしまいます。

（起動時）

（右側だけが変化する想定）

なにかの設定など環境の影響でしょうか？
それとも、Vueのアップデートなどで仕組みが変わったとかでしょうか。

本の通りに動かす方法など、なにかわかる方はご教授お願いいたします。

該当のソースコード

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

const now = new Date();
const nowStr = now.toLocaleTimeString();
let timeStr = nowStr;
const timeStrRef = ref(nowStr);

function changeTime(): void {
  const newTime = new Date();
  const newTimeStr = newTime.toLocaleTimeString();
  timeStr = newTimeStr;
  timeStrRef.value = newTimeStr;
}
setInterval(changeTime, 1000);
</script>

<template>
  <p>現在時刻: {{ timeStr }}</p> // ①
  <p>現在時刻(ref): {{ timeStrRef }}</p> // ②
</template>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

node: 18.12.1
vue: 3.2.45

Answer 1

それとも、Vueのアップデートなどで仕組みが変わったとかでしょうか。

のようです。
ダウンロードできるサンプルコードでは説明通りに動きました。
こちらはvue 3.2.37のようです。
試しにpackage.jsonで3.2.44にしても期待通りの動作だったので、3.2.45で入った修正によるもののようです。
https://github.com/vuejs/core/issues/7417
こちらで同じ問題について書いているようです。

Comments

[momochi]

回答ありがとうございます！

> When the component re-renders because you changed the ref, the whole template is updated with all of the latest data.
（refを変更したためにコンポーネントが再レンダリングされると、テンプレート全体が最新のデータで更新されます。）

> Ah ses, this was a bug that was fixed in 3.2.45. See:
(あses、これは3.2.45で修正されたバグでした。ご覧ください。)

timeStrRef が更新され再レンダリング→コンポーネント全体が更新→timeStr が最新の日時に更新される

つまり、ver. 3.2.45のように動くのがVueとして正しい動作ということなのでしょうか。
この本の説明はふさわしくないということですか。

[bashi]

そうみたいですね。
3.2.45が本来の動作ということのように思えます。

Answer 2

<script>
import { ref } from "vue";

export default {
  setup() {
    const now = new Date();
    const nowStr = now.toLocaleTimeString();
    let timeStr = nowStr;
    const timeStrRef = ref(nowStr);

    function changeTime() {
      const newTime = new Date();
      const newTimeStr = newTime.toLocaleTimeString();
      timeStr = newTimeStr;
      timeStrRef.value = newTimeStr;
    }

    setInterval(changeTime, 1000);

    return {
      timeStr,
      timeStrRef
    };
  }
}
</script>

Vue.jsは、サンプルをコピペして動かす程度しか出来ないです
なので何か教えるとか無理だけど、書き方の違いで宣言された変数の置かれる環境（スコープ）が変わってしまうのはわかる
本のコードは、それを考慮せずに書かれたのではないかと