vue中使data中的数据初始化

组件中的根元素使用了v-if，但是组件中的data数据不会初始化，因为不是组件使用了v-if，组件不会销毁；但是可是使用以下方式来让data数据初始化：

Object.assign(this.$data, this.$options.data())

this.$data：当前的data数据（修改过后的）；
this.$options.data()：初始化的data数据；
Object.assign的作用就是把this.$options.data()的值赋值给this.$data;
下面详细说说Object.assign的用法：

ES6的官方文档的解释是：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

1. 当源对象的属性和目标对象的属性一样时，直接把源对象的属性值赋值给目标对象的属性；

let target = {
    
    
  aaa: 18,
  bbb: '张三'
}
let source = {
    
    
  aaa: 12,
  bbb: '李四'
}
let newObj = Object.assign(target, source)
console.log(newObj, target == newObj); // {aaa: 12, bbb: '李四'} true

2. 当源对象的属性和目标对象的属性不一致时，会把源对象的所有属性拿出来，如果目标对象中有该属性，则直接把属性值赋值，如果没有，则把属性和属性值都添加到目标对象；

let target = {
    
    
  aaa: 18,
  bbb: '张三'
}
let source = {
    
    
  aaa: 12,
  bbb: '李四',
  ddd: true
}
let newObj = Object.assign(target, source)
console.log(newObj, target == newObj); // {aaa: 12, bbb: '李四', ddd: true} true

需要注意的是，Object.assign遇到属性是一个对象或者数组的（引用类型的数据），会直接把引用地址赋值：

let target = {
    
    
  aaa: 18,
  bbb: {
    
    
    ccc: 18
  }
}
let source = {
    
    
  aaa: 12,
  bbb: {
    
    
    ddd: 18
  }
}
let newObj = Object.assign(target, source)
console.log(newObj, target == newObj); // {aaa: 12, bbb: {ddd: 18}} true

手写一个简易版的Object.assign:

let target = {
    
    
  aaa: 18,
  bbb: {
    
    
    ccc: 11
  }
}
let source = {
    
    
  aaa: 11,
  name: '张三',
  bbb: {
    
    
    ddd: 88
  }
}
let source1 = {
    
    
  eee: '李四'
}
let myAssign = (target, ...source) => {
    
    
  source.forEach(item => {
    
    
    let sourceKeys = Object.keys(item)
    sourceKeys.forEach(keyItem => {
    
    
      target[keyItem] = item[keyItem]
    });
  })
  return target
}
Object.prototype.myAssign = myAssign
let newObj = Object.myAssign(target, source, source1)
console.log(">>>>", newObj);