vue - watch （偵聽器）

Vue.js

本章內容：

• 偵聽器
  • 偵聽器的應用場景
  • 淺度監聽
  • 深度監聽
  • 監聽數組
    

偵聽器

​ 偵聽器是對data中的數據進行偵聽（監聽）數據的改動。

偵聽器的應用場景

1. 數據改變後可以做一些異步操作，這個特點是計算屬性做不到的，因爲計算屬性只能做同步操作。
2. 數據改變後，可以在偵聽器中做一些開銷較大的工作（DOM操作）。
   
   

淺度監聽

​ 針對於基本數據類型（String，Boolean，Number）。

<div id="app">
    <p>{{message}}</p>
    <!-- 觸發事件，修改message的值。 -->
    <button @click="change()">change</button>
</div>

new Vue({
    el: "#app",
    data: {
        message: "Hello"
    },
    methods: {
        change() {
            this.message = "Vue.js";
        }
    },
    watch: {
        message(newVal, oldVal) {
            console.log("新的值："+newVal, ",舊的值："+oldVal);
        }
    }
})

深度監聽

​ 針對引用類型（Array，Object）。

<div id="app">
    <p v-for="item,index in obj" :key="index">
        {{index}} --- {{item}}
    </p>
    <button @click="change()">change</button>
</div>

new Vue({
    el: "#app",
    data: {
        obj: {
            name: "李四",
            age: 18,
            sex: "男"
        }
    },
    methods: {
        change() {
            this.obj.name = "安哥拉";
        }
    },
    watch: {
        // 當偵聽器監聽的是個對象時，此時修改obj內的name時偵聽器是不會觸發的。因爲我們監聽的是obj，而不是obj					 內的某一個對象，只有這個屬性的引用類型發生變化，偵聽器纔會執行。
        obj(newVal, oldVal) {
            console.log("新的值："+newVal, ",舊的值："+oldVal);
        },
        // 直接監聽obj的某一項，這樣雖然可以使用，但是不推薦。
        "obj.name"(newVal, oldVal) {
            console.log("新的值："+newVal, ",舊的值："+oldVal);
        },
        // 深度監聽，建議這樣寫。
        obj: {
            deep: true, // 是否深度監聽
            handler(newVal) {
                console.log("新的值："+JSON.stringify(newVal));
            }
        }
    }
})

監聽數組

<div id="app">
    <p v-for="item,index in arr" :key="index">
        {{index}} --- {{item}}
    </p>
    <button @click="change()">change</button>
</div>

new Vue({
    el: "#app",
    data: {
        arr: ["蘋果", "西瓜", "橙子", "桃子"]
    },
    methods: {
        change() {
            /*
                數據雖然改變，但是視圖沒有更新，偵聽器也沒有執行。
                這是因爲javascript的限制，vue不能檢測以下變動的數據：
                當你使用索引去更改數組內的某一項時，例如：this.arr[0] = "xxx";
            */
            //this.arr[0] = "芒果";

            /*
                解決方法：
                    使用$set實例方法/數據。
                    參數：
                        1. {Object | Array} target
                            要修改的源數組或對象。
                        2. {string | number} propertyName/index
                            要修改的某一項，對象名或者指定下標。
                        3. {any} value
                            要修改的新值。
            */
            this.$set(this.arr, [0], "芒果");
        }
    },
    watch: {
        arr(newVal) {
            console.log(newVal);
        }
    }
})

---