Vue.js 非リアクティブ変数が更新されている
Q&A
解決したいこと
Vue3初学者です。
参考書内のソースを動かしていたところ、ref()ではない変数(timeStr)が画面上で更新されています。
「現在時刻(ref)：」は毎秒更新され
「現在時刻：」は初期表示時の時刻が表示されて更新されない認識でした。
・なぜこのソースで「現在時刻：」が更新されるのか
上記の原因を知りたいのでご存じの方がいらっしゃれば教えてください。
該当するソースコード
<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>
0
