vue2深度监听一个对象以及立即执行

在vue2中监听一个对象时，对象属性值发生变化或者属性也为一个对象，它的值发生变化时watch无法监听到。

解决办法

new Vue({
    el: '#app',
    data: {
        test: {name: 'wzg'},
    },
    watch: {
        test: {
            handler(newVal,oldVal) {
                //...
            },
            deep: true, //是否深度监听
        },
    },
});

有时不仅需要深度监听，还要立即执行 (数据首次绑定后就执行)

watch: {
    test: {
        handler(newVal,oldVal) {
            // ...
        },
        deep: true,
        immediate: true, //是否开启立即执行
    },
},

有时只需要监听对象里的一个属性

watch: {
    'test.name': {
        handler(newVal,oldVal) {
            // ...
        },
        deep: true,
        immediate: true,
    },
},

关于watch的话我现在用这些就足够了，很多次需要用的时候单词忘了，做个记录

官方文档