Например, я хочу получить доступ к старым данным из свойств часов в 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"
он запускает свойство watch успешно и показывает такой журнал.
<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'
Итак, любая помощь?
В этом случае должен использоваться метод Deep clone
. Есть два способа сделать это.
this.oldValues = _.cloneDeep({data : data})
this.oldValues = JSON.parse(JSON.stringify({data : data})
Ссылка С 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
Object.assign
все еще копируется как ссылка. github.com/vuejs/vue/issues/971 Это работает, когда я использую lodashdeepClone
. Но я все еще нахожу другой путь без Лодаша. Если бы у вас был другой ответ, я был бы рад проверить его. Спасибо