Как сравнить предыдущие и обновленные реквизиты Vue?

Question

Я получаю массив из реквизита, и я должен вызвать функцию, когда длина массива изменяется. Из-за документов, я должен использовать следующую конструкцию «обработчик: функция (val, oldVal)», но он возвращает новую длину.

props: ['array']
watch: {
  array: function(val, oldVal) { // watch it
    console.log('Prop changed: ', val, ' | was: ', oldVal) // it always returns the new array 
  }
}

Может быть, я должен использовать некоторые из крючков жизненного цикла?

Answer 1

Я не вижу ничего плохого в вашем примере кода. Ниже приведен рабочий пример.

• Вы уверены, что массив, который вы передаете как реквизит, меняется?
• Вы уверены, что правильно изменяете массив?

Выезд Vuejs Docs - Массив предостережения

    Vue.component('child', {
        template: '<div>Array length is {{ array.length }}</div>',
        props: {
            array: {
                type: Array,
                default: () => [],
            },
        },
        watch: {
            array: function(val, oldVal) {
                alert(`changed from ${oldVal.length} to ${val.length}`);
            },
        },
    });

    new Vue({
        el: '#app',
        data() {
            return {
                arr: [1, 2, 3],
            };
        },
        mounted() {
            setTimeout(this.updateArr, 3000);
        },
        methods: {
            updateArr() {
                this.arr = [1, 2, 3, 4];
            },
        },
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <child :array="arr"></child>
</div>

Answer 2

Большинство встроенных в JavaScript функций массива изменяет массив, а не создает новый массив. Vue обнаружит изменения, но основное поведение останется прежним, массив будет изменен.

Например, array.push(17) добавляет новое значение в конец того же массива, но не создает новый массив.

Если вы измените массив, он уведомит функцию watch, но «новый» массив - это тот же объект, что и исходный массив. Итак, Vue передает вам старый массив, вы только что изменили этот массив. Vue не хранит копию исходного состояния этого массива.

С Документы :

Примечание: при замене (а не замене) объекта или массива старое значение будет совпадать с новым значением, поскольку они ссылаются на один и тот же объект / массив. Vue не сохраняет копию значения перед изменением.

Если вы просто заботитесь о длине, вы можете сделать что-то вроде этого:

computed: {
    arrayLength () {
        return this.array.length
    }
},

watch: {
    arrayLength (newLength, oldLength) {
        // ...
    }
}

или более непосредственно:

watch: {
    'array.length' (newLength, oldLength) {
        // ...
    }
}

Если вам действительно нужен старый массив, то вам придется либо передать копию в качестве значения реквизита, либо взять копию в своем компоненте.