早く流れる川で

雑に書き留めた何か

Vue.js, computedは1または2回実行するのか？

JavaScript Vue.js

はじめに

TLを眺めていたら次の書き込みがあった。
https://twitter.com/mpyw/status/1251517636984352768
ここのところVue.jsを触れていなかったので復習のつもりで確認した。

動作環境

開発環境

  • Editor
  • Vue.js
    • Version 2.6.11
      • console.log(Vue.version);で確認した

結論

結論から書くとcomputedは1回実行した。

ソースコード全文

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, computed!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ foo }}</div>
        <div>{{ bar }}</div>
        <div>{{ fooAndBar }}</div>
        <div>
            <button v-on:click="Test">押してね！</button>
        </div>
    </div>

    <script>
        console.log(Vue.version);

        var app = new Vue({
            el: '#app',
            data: {
                foo : 1,
                bar : 1
            },
            computed : {
                fooAndBar : function() {
                    console.log("computed");
                    return this.foo + this.bar;
                }
            },
            methods : {
                Test : function() {
                    this.foo = 2;       // fooAndBarで利用しているプロパティを変更
                    this.bar = 3;       // 〃
                }
            },
            watch : {
                foo : function(newValue, oldValue) {
                    console.log(`new : ${newValue}, old : ${oldValue}`)
                },
                bar : function(newValue, oldValue) {
                    console.log(`new : ${newValue}, old : ${oldValue}`)
                }
            }
        });
    </script>
</body>
</html>

所感

v-on:clickやmethodsの存在を忘れていた・・・。
編集していて思い出した。watchはおまけ。
触れていないと忘れてしまう。