前面在定义表单提交的时候我们用到了Object.assign()方法，这是ES6提供的对象合并方法。目前主流的chrome、safria、firefox、opera、Edge等浏览器是支持该方法，但是一些低版本的浏览器如IE并不支持该方法。Object.assign()方法的原型为：Object.assign(target, ...sources)，可以将源对象（source）的所有可枚举属性复制到目标对象（target）中。

Object.assign()的好处和注意点

当我们需要定义大量的对象属性时我们就可以利用Object.assign()方法，可以大大减少我们要输出的代码量。当然如果定义的属性和target的已有属性重名就会被覆盖，如果这个属性值是一个引用类型那么其对应的引用属性值也会被修改。因为Object.assign()复制的是引用地址，所以赋值会指向了同一块内存区域。

Object.assign()的使用

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。这里的参数都是对象，如果该不是则会先转换成对象。如果只有一个参数则会直接返回该参数，这里我们定义了一个空的目标对象来拷贝自身属性并返回目标对象。这样在el-form中绑定registerForm对象，我们就可以在绑定表单属性的时候直接定义v-model对应的对象属性。

Object.assign()的应用

在提交注册的时候我们来打印下registerForm中的属性，在registerForm已经包含了我们在el-form中提交的所有对象属性和值。这个在数据比较多的时候表现的特别明显，比如我们开发的【精密工具智能開發系統】中一款刀具设计的参数就有好几十个，要实现数据的双向绑定我们就需要在data中定义对应的属性并用v-model绑定。

总结：

Object.assign方法是操作目标对象，直接将源对象属性拷贝到目标对象自身。当然被拷贝的属性必须是自有属性，不能继承自属性也不拷贝不可枚举的属性。当然你可以一次性拷贝多个对象的属性，只要对象与对象之间使用逗号分隔即可。以上内容是小编给大家分享的【Vue实战086：Object.assign()用法和注意点】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：

<el-form :model="registerForm" ref="rulesForm" autocomplete="on" 
         :rules="rules" class="register-form">
  <div class="form-container">
      <el-form-item prop="username" label="用户名">
        <span> <svg-icon icon-class="user" /></span>
        <el-input placeholder="请输入用户名" name="username"
                  type="text" v-model="registerForm.username" autocomplete="on" />
      </el-form-item>
      <el-form-item prop="license" ref="fileupload" autocomplete="on"label="营业执照">
        <el-upload class="fileupload" action="..."
                    :show-file-list="false" :on-change="PicturePreview" :auto-upload="false"      
                    accept="image/png,image/gif,image/jpg,image/jpeg">
          <img v-if="ImageUrl"  :src="ImageUrl" alt="">
          <i v-else ref="uploadicon" class="el-icon-upload uploader-icon">
            <div slot="tip" class="el-upload__text upload__tip">上传照片</div> </i>
        </el-upload>
        <span>要求照片所有信息需清晰可见，内容真实有效，不得做任何修改！</span>
      </el-form-item>
  </div>
  <el-button :loading="loading" type="primary"  @click.native.prevent="register">注册</el-button>
</el-form>
//data初始化定义
data () {
  return {
    registerForm: {
        username：'',
        password: '',
        company: '',
        phone: '',
        email: '',
        license: '',
        picture: ''
    }
  }
},
//Object.assign
data () {
  return {
    registerForm: Object.assign({}),
  }
},