Vue.js computed、watch

今回は、computedとwatchをやります。
computed(算出プロパティ)は、getter、setterを使って、変数みたいな動作をします。
watchは変数の変更を監視します。

computedは自分以外の変数を監視して、変更があったら自分の値を再計算し、
watchは自分の変数を監視し変更があったら定義しておいた処理を実行します。

シンプルな形(getter)

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        aaa:<input type="text" v-model="aaa" />
        <br />
        bbb:{{bbb}}
        <br />
        ccc:{{ccc}}
    </div>

    <script type="module">
        var app = new Vue({
            el: '#app',
            data: {
                aaa:"Hello",
                ccc:""
            },
            computed: {
                bbb: function () {
                    return "[" + this.aaa + "]";
                }
            },
            watch: {
                aaa: function (after, before) {
                    this.ccc = before + '->' + after;
                }
            }
        });
    </script>
</body>

</html>

画面イメージ

computedはaaa(自分以外)が変更されたら処理を再実行し、bbb(自分)を表示します。
watchはaaa(自分)が変更されたら処理を再実行し、ccc(自分以外)を表示します。

getter、setter

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        aaa:<input type="text" v-model="aaa">
        <br />
        bbb:<input type="text" v-model="bbb">
       
    </div>

    <script type="module">
        var app = new Vue({
            el: '#app',
            data: {
                aaa:10
            },
            computed: {
                bbb: {
                    get: function () {
                        return this.aaa * 2;
                    },
                    set: function (after) {
                        this.aaa =  after / 2;
                    }
                }
            }
        });
    </script>
</body>

</html>

画面イメージ

$emitで親にイベント送信できます。引数には送信先を指定します。
引数を渡したい場合は送信先の後ろに付けられます。

ページのトップへ戻る