やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > vue.js > Vue.ref()を使う

Vue.ref()を使う

vue.js JavaScript

　値の変更ができた！

成果物

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="../vue.3.0.5.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div id="conditional-rendering">
  <span v-if="seen">Now you see me</span>
  <button @click="toggleSeen">toggle seen</button>
</div>
</body>
</html>

window.addEventListener('load', (event) => {
    const ConditionalRendering = {
        setup() {
            const seen = Vue.ref(true);
            const toggleSeen = () => { seen.value = !seen.value; }
            return {
                seen,
                toggleSeen,
            };
        }
    };
    Vue.createApp(ConditionalRendering).mount('#conditional-rendering');
});
  1. toggle seenボタンを押す
  2. Now you see meテキストの表示・非表示が切り替わる

setup()、data()

　2版ではdata()を使っていた。3版ではsetup()を使う。data()でもできた。

2系版とは違う

　上記のとき公式サイトのガイドをみていた。v-ifディレクティブの使い方の話。以下の要素を非表示にする。このときデベロッパツールのコンソールでapp.seen = falseとすると非表示になると書いてあった。2版、3版ともに。2版はそのとおりにできた。しかし3版ではできずに困っていた。

  <span v-if="seen">Now you see me</span>

　今回はそれが解決した。以下コードで。

    const ConditionalRendering = {
        setup() {
            const seen = Vue.ref(true);
            const toggleSeen = () => { seen.value = !seen.value; }
            return {
                seen,
                toggleSeen,
            };
        }
    };

　どうやら3版ではリアクティブという概念を用いるらしい。ならガイドにそう書いてくれよ……。

　2版ではseenという変数を直接編集していた。しかし3版ではメソッドを介してのみアクセスできるっぽい。つまりカプセル化されたということだろうか。

リアクティブシステム

「リアクティブである」とは、「その値が監視され、変更が検知される状態のこと」を指します。

　オブジェクト指向のデザインパターンでいう「Observer」かな？

refとreactive

　リアクティブシステムを使うにはrefとreactiveという2つのシンタックスを使うらしい。違いは以下。

シンタックス 型
ref プリミティブ型(int,bool等)
reactive object型

所感

2, 3どれを使うべき？

　まだref,reactiveを使い分けたベストプラクティスは未定だとか。執筆時点でVue.js 3 は出たばかりなので、これから発達・変更していくと思われる。ただ、vue3の目玉はComponent APIで、その中核がこのリアクティブシステムだと思われる。なのにそこが洗練されていないというなら、果たしてvue 3を使うべきなのか判断できない。

3の学習コスト高い

　学習コスト高くない？　vue.jsは簡単に使えるのがウリだったはず。でも3版になってから一気に難しくなった印象を受けた。

規模により使い分ける

　小規模コードなら2版。大規模なら3版。そんな使い分けをするといいかも。

版 規模
2 小
3 大

　3版のウリであるComponent APIはコードを小分けにするための機構だと思う。そのせいで複雑化してしまった。コード量が多いなら恩恵があるだろう。少ないなら面倒しかない。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux