Vue之数据监听存在的问题

Posted 2021-01-20 wjs521

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>