无法从 Vue.js 中的监视属性访问旧值

Question

例如，我想从 Vue.js 中的监视属性访问旧数据。这是我的例子：

mounted(){
axios.get(url).then(({data})=>{
this.data = data //Initialize data to HTML. For example, username='A'
Object.assign(this.oldValues, {data : data}) //Copying data to OldValues. Both object it should has same value
})
},
data(){
return {
data : //data from mounted()
oldValues : //Copied from data
}
},
watch : {
data : {
handler : function(after, before){
console.log(this.data) // show updated value 
console.log(this.oldValues) // Expect : show copied value from first mounted()
}
}
}

当我使用v-model="data"编辑数据时，它成功触发了监视属性并显示这样的日志。

<input v-model="data.username"> // 'AAA' 

显示的日志：

data.username = 'AAA' //From this.data
data.username = 'AAA' //From this.oldValues. Expect, keep show the first data. It should username = 'A'

那么，有什么帮助吗？

Answer 1

这种情况应该使用Deep clone方法。有 2 种方法可以做到这一点。

1. 洛达什或西米利亚尔库

this.oldValues = _.cloneDeep({data : data})

2. 杰森。Parse + JSON.stringify

this.oldValues = JSON.parse(JSON.stringify({data : data})

参考

• 如何在JavaScript中深度克隆
• https://github.com/vuejs/vue/issues/971

Answer 2

有了Object.assign(this.oldValues, {data : data})，oldValues只是对data的引用。在这种情况下，oldValues将在更改data时更新。

通过以下示例，您将从data获得真实副本：

this.oldValues = Object.assign({}, this.oldValues, {data : data})

在 JavaScript 中，对象是一种引用类型。

了解更多： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Comparing_Objects