Vue watch() outputs same oldValue and newValue

Question

When doing my frontend Vue project, I have the need of executing certain steps when element(s) are pushed into the list in data. However, when I pushed some initial values into the list in mounted(), the console.log() in the corresponding watch() outputs the same value for the newVal and oldVal parameter values.

Javascript/Vue code:

let app = new Vue({
    el: "#app",
    data: {
        testList: [],
    },
    mounted: function() {
        this.testList.push('a');
        this.testList.push('b');
        this.testList.push('c');
    },
    watch: {
        testList: {
            handler: function(newVal, oldVal) {
                console.log("new", newVal);
                console.log("old", oldVal);
            },
        },
    }
});

The console logging information:

Why do the newVal and oldVal hold the same value?
Why isn't the watch() function being executed three times (since I pushed three times in mounted())?

user_4689036 · Answer

I have changed two thing

do clone in watch
added computed

It works fine now.

console.clear();

let app = new Vue({
    el: "#app",
    data: {
        testList: ['old'],
    },
    mounted: function() {
        this.testList.push('a');
        this.testList.push('b');
        this.testList.push('c');
    },
    watch: {
        testListClone: { //<-- Edited
            handler: function(newVal, oldVal) {
                console.log("new", newVal);
                console.log("old", oldVal);
            },
        },
    },
  computed:{  //<-- Added
    clonedItems: function(){
       return JSON.parse(JSON.stringify(this.testList))
    }
  }
});

Vue watch() outputs same oldValue and newValue

1 Answers