Vue.js watchプロパティ #JavaScript

豚野郎です。

今回はVue.jsのwatchプロパティについて書いていきます。
functionを書く方法と、functionを省略する方法があります。
参考：https://prograshi.com/language/vue-js/what-are-handler-deep-and-immediate-in-watch/

今回はfunctionを省略した方法を書いていきます。

初回に書いた双方向データバインディングはこちら↓
https://qiita.com/pig_buhi555/items/a3ad0e8f7a13c6d49234

1. 普通に使う場合

watchプロパティはデータの中を監視します。
そのため、データに変化があった時に処理が走ります。

以下の例の場合、sampleとテキストボックスに入力すると
「sampleと入力しています」と表示されます。

js/main.js

(function() {
    'use strict';

    let vm = new Vue({
        el: '#app',

        // モデルにデータを保持
        data: {
            sample: 'test',
        },

        watch: {
            // sampleに何らかの変更があった場合
            sample(text) {
                if (text == 'sample') {
                    var sampleText = document.getElementById('sample_text');
                    sampleText.textContent = 'sampleと入力しています';
                }
            }
        },
    });
})();

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app" class="container">
        <input type="text" v-model="sample">
        {{ sample }}
        <div id="sample_text"></div>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="js/main.js"></script>
</body>
</html>

sample(text, old)に第二引数を入れれば、変更前の値を入れることもできます。
(この場合、old)

2. handlerを使う場合

ネストしたデータの変更を検知する際には、以下のように記載します。
(あまりいいサンプルソースではありませんが、お許しください・・・・)

以下の例では、3つのテキストボックスのどれかに「sample」と記載された時に
「sampleと入力しています」と表示されます。

js/main.js

(function() {
    'use strict';

    let vm = new Vue({
        el: '#app',

        // モデルにデータを保持
        data: {
            samples: [
                {text: 'sample1'},
                {text: 'sample2'},
                {text: 'sample3'},
                ],
            },

        watch: {
            // sampleに何らかの変更があった場合
            samples:{
                handler(text) {
                    var sampleText = document.getElementById('sample_text');
                    if (text[0]['text'] == 'sample' || text[1]['text'] == 'sample' || text[2]['text'] == 'sample') {
                        sampleText.textContent = 'sampleと入力しています';
                    } else {
                        sampleText.textContent = '';
                    }
                },
                deep: true
            }
        },
    });
})();

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app" class="container">
        <div v-for="(sample, index) in samples">
            <input type="text" v-model="sample.text">
            {{ sample.text }}
        </div>
        <div id="sample_text"></div>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="js/main.js"></script>
</body>
</html>

deep: true：ネストされた値の変更も検知します。
immediate: true：初回読み込み時にhandlerが呼ばれます。