Vue.js で$forceUpdate()によりビューを強制更新する

2020/12/04

(この記事の文字数: 783)

Vue.js で、Vue インスタンスの内部のデータはリアクティブになっているので、データを更新すればUIの表示は自動的に更新されます。ちょっと特殊なケースになるのですが、Vue インスタンスの外で定義したグローバル変数をビューにバインドして表示したいようなケースに遭遇しました。具体的にはあるWebツールのVueインスタンスを他のツールで使い回したいけど、元のVueインスタンスには手を入れたくないようなケースで、Vueインスタンスの外側に追加データを用意したようなケースです。

Vue インスタンスの外なのでリアクティブになっておらず、そのグローバル変数を書き換えてもビュー上の表示は更新されません。こういったケースで強制的に更新する事ができないのか調べてみたところ、ちゃんと方法が用意されていました。

https://jp.vuejs.org/v2/guide/components-edge-cases.html#%E5%BC%B7%E5%88%B6%E6%9B%B4%E6%96%B0

Vue インスタンスに $forceUpdate() という関数があり、これを呼ぶことで強制的にビューの表示を更新することができました。ただし、このページにも「もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。」と注意書きがあるように、やむを得ない稀な事情がない限りは使わない方が良いようです。

以下に簡単なサンプルを用意しておきます。valueがVueインスタンス内部、globaValueが外側で定義された変数です。globaValueを変更してもビュー上は変化がないこと、強制更新をすることでビューが更新されることを確認できます。

value={{value}}, globalValue={{globalValue}}

以下がサンプルのソースです。コピペでそのまま動作すると思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
    <p>
        value={{value}}, globalValue={{globalValue}}
    </p>
    <input type="button" value="value++" @click="value++" />
    <input type="button" value="globalValue++" @click="globalValue++" />
    <input type="button" value="globalValue++ & 強制更新" @click="globalValue++;vm.$forceUpdate();" />
</div>

<script>
    // 何らかの事情で外で値を定義する必要があった場合
    let globalValue = 2;

    let vm = new Vue({
        el: "#app",
        data: {
            value: 1,
        },
    });
</script>