关于vuejs的侦听属性watch的三个问题

问题1

    methods: {
        resume() {
            this.formEdit={a:1};
        }
    },
    watch: {
        formEdit(newVal, oldVal) {
            console.log(oldVal)
        },
    }

• 现象：当执行resume方法时，都会触发formEdit的侦听。
• 原因：“有做赋值操作，就会走监听回调，但不会渲染页面”，并不是formEdit值改变的时候才触发侦听

问题2

<input v-model="formEdit.a" />

    watch: {
        formEdit(newVal, oldVal) {
            console.log(oldVal)
        },
    }        

• 现象：input输入框输入值的时候，并不会触发formEdit的侦听
• 原因：默认不会监听对象里面的属性改变，要侦听的话代码需要改成：

    watch: {
        'formEdit': {
          handler: function(newVal, oldVal) {
              console.log(oldVal)
          },
          deep: true,
          //immediate: true, //初始绑定时就侦听 
        },
    }

问题3

问题2的问题解决了，但是当打印侦听到的formEdit的newVal和oldVal时发现，他们的值是一样的，为什么呢？因为侦听对象或者数组时，vue不会保留旧的副本。参考小tips,注意vue深度监听对象新老值如何保持不一样
解决办法就是用计算属性包装一下，再侦听这个计算属性。

本作品采用《CC 协议》，转载必须注明作者和本文链接