由于Object.assign()有上述特性,所以我们在Vue中可以这样使用:
Vue组件可能会有这样的需求:在某种情况下,需要重置Vue组件的data数据。此时,我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态
export default {
data() {
return {
systemInfoArr: [],
unitListArr: [],
formSelectObj: {
systemInfo: { // 业务系统列表
name: 'systemInfo',
arr: [],
selectVal: '',
value: '',
curSelect: null
},
unitList: { // 用户配置系统
name: 'unitList',
arr: [],
selectVal: '',
value: '',
curSelect: null
}
}
}
},
mounted(){
// 1.
Object.assign(this.$data.formSelectObj, this.$options.data().formSelectObj) // 这里重置 formSelectObj 数据,其他不受影响
// 2.
Object.assign(this.$data, this.$options.data()) // 这里重置 data 下的所有数据
}
}