时间戳

首页 > 解决方案 > 如何比较以前和更新的道具 Vue？

javascript - 如何比较以前和更新的道具 Vue？

问题描述

我从道具中得到一个数组，当数组的长度改变时我应该触发一个函数。由于文档，我应该使用以下构造“处理程序：函数（val，oldVal）”，但它返回新长度。

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

也许我应该使用一些生命周期钩子？

标签： javascriptvue.jsvuejs2

解决方案

大多数 JavaScript 的内置数组功能都会改变数组而不是创建新数组。Vue 会检测到变化，但底层行为保持不变，数组被修改。

例如，array.push(17)在同一个数组的末尾添加一个新值，它不会创建一个新数组。

如果您修改数组，它将通知watch函数，但“新”数组与原始数组只是同一个对象。所以 Vue将旧数组传递给您，您刚刚修改了该数组。Vue 不存储该数组的原始状态的副本。

从文档：

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue 不保留 pre-mutate 值的副本。

如果您只关心长度，则可以执行以下操作：

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

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

或更直接地：

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

如果你真的需要旧数组，那么你要么必须传入一个副本作为 prop 值，要么在你的组件中获取一个副本。

推荐阅读