vue watch

Posted on Edited on In Views: Disqus:

 

一、watch 監聽器，用以監聽某個數據，當有改動時，觸發相對應的處理。

<html>

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

<body>

    <div id="app">
        <input type="text" v-model="message">
        <p v-if="!verificationResult">只能輸入數目</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '',
                verificationResult: true
            },
            watch: {
                message: function (newValue, oldValue) {
                    console.log("newValue:", newValue, " oldValue:", oldValue);
                    this.verificationResult = /^[\d]*$/.test(newValue);
                }
            }
        });
    </script>

</body>

</html>

說明：

此 watch 監聽器去監聽 message 屬性之變化。

 

二、監聽 data 中的 Object 底下的值

<html>

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

<body>

    <div id="app">
        <input type="text" v-model="product.id">
        <p v-if="!verificationResult">只能輸入數目</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                product: {
                    id: "",
                    name: ""
                },
                verificationResult: true
            },
            watch: {
                "product.id": function (newValue) {
                    this.verificationResult = /^[\d]*$/.test(newValue);
                }
            }
        });
    </script>

</body>

</html>

說明：

當想要監聽 data 中的 Object 底下的值時，需要用雙引號將其包裹起來。

 

三、options

<html>

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

<body>

    <div id="app">
        <input type="text" v-model="message">
        <p v-if="!verificationResult">只能輸入數目</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '',
                verificationResult: true
            },
            watch: {
                message: {
                    handler: function (newValue, oldValue) {
                        console.log("newValue:", newValue, " oldValue:", oldValue);
                        this.verificationResult = /^[\d]*$/.test(newValue);
                    },
                    deep: true,
                    immediate: true
                }
            }
        });
    </script>

</body>

</html>

說明：

監聽一屬性可以用另一種「物件表示法」來寫，其中包含三種屬性如下：

1、handler

放入我們需要處理的方法。

2、deep

當欲觀察值的特性為 call by reference，例如 Object 時，需將 deep 值設定為 true，

告知 watch 需要深度觀察。否則會因為特性關係，無法觸發監聽器。

3、immediate

監聽器預設為當值有所變化時才會觸發。如果我們希望在初始化完成後，

就先觸發，執行 handler，就可以將 immediate 值設為 true。