Vue之資料監聽

當資料監聽的是列表時，資料發生改變，不會被監聽到。

// 用$set修改陣列中的陣列能夠被監聽
// app.$set(this.hobby, 0, "愛你哦");

<div id="app">
    {{name}}
    <hr>
    {{hobby}}
    <hr>
    {{obj}}

    <button @click="my_click">點我改變資料</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "wjs",
            hobby: ["抽菸", "喝酒", "燙頭"],
            obj: {
                age: 32,
                face: null,
            }
        },
        methods: {
            my_click: function () {
                // 改變資料
                // this.name = "wjs0521"
                // 改變陣列的長度
                // 改變陣列長度能夠被監聽到 新值和舊值相同
                // this.hobby.push("生活美滋滋");
                // 改變陣列中的值 不能被監聽到 深度監聽也不可以
                // this.hobby[0] = "愛你哦";
                // console.log(this.hobby);
                // 用$set修改陣列中的陣列能夠被監聽
                // app.$set(this.hobby, 0, "愛你哦");

            }
        },
        watch: {
            name: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal)
                }
            },
            hobby: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true  // 深度監聽
            }
        }
    })
</script>