javascript - Vue watch() 输出相同的 oldValue 和 newValue

Question

在做我的前端 Vue 项目时，当元素被插入 data 中的列表时，我需要执行某些步骤。 .但是，当我将一些初始值插入 mounted() 中的列表时, console.log()在相应的watch()为 newVal 输出相同的值和 oldVal参数值。
Javascript/Vue 代码:

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);
            },
        },
    }
});

控制台日志信息:

为什么newVal和 oldVal保持相同的值(value)？

为什么不是 watch()函数被执行了三次(因为我在 mounted() 中推送了三次)？

Answer 1

我改变了两件事

在 watch 中进行克隆

添加计算

它现在工作正常。

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))
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="app"></div>