關於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 協議》，轉載必須註明作者和本文連結