質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1941閲覧

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

momochi

総合スコア68

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/12/18 06:47

編集2022/12/18 08:11

前提

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

実現したいこと

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

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

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

(起動時)

(右側だけが変化する想定)

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

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

該当のソースコード

js(vue3)

1<script setup lang="ts"> 2import { ref } from "vue"; 3 4const now = new Date(); 5const nowStr = now.toLocaleTimeString(); 6let timeStr = nowStr; 7const timeStrRef = ref(nowStr); 8 9function changeTime(): void { 10 const newTime = new Date(); 11 const newTimeStr = newTime.toLocaleTimeString(); 12 timeStr = newTimeStr; 13 timeStrRef.value = newTimeStr; 14} 15setInterval(changeTime, 1000); 16</script> 17 18<template> 19 <p>現在時刻: {{ timeStr }}</p> // ① 20 <p>現在時刻(ref): {{ timeStrRef }}</p> // ② 21</template> 22

試したこと

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

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

node: 18.12.1
vue: 3.2.45

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

投稿2022/12/30 07:07

編集2022/12/30 07:16
bashi

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momochi

2022/12/30 07:39 編集

回答ありがとうございます! > 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

2022/12/30 08:02

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

0

JavaScript

1<script> 2import { ref } from "vue"; 3 4export default { 5 setup() { 6 const now = new Date(); 7 const nowStr = now.toLocaleTimeString(); 8 let timeStr = nowStr; 9 const timeStrRef = ref(nowStr); 10 11 function changeTime() { 12 const newTime = new Date(); 13 const newTimeStr = newTime.toLocaleTimeString(); 14 timeStr = newTimeStr; 15 timeStrRef.value = newTimeStr; 16 } 17 18 setInterval(changeTime, 1000); 19 20 return { 21 timeStr, 22 timeStrRef 23 }; 24 } 25} 26</script>

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

投稿2022/12/18 14:29

bellchin

総合スコア56

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問