Vue.js 2如何通过API返回数据批量设置组件响应式属性

你的场景下（接口返回字段和组件data内待更新属性完全同名）不需要逐个手动赋值，以下是可直接用的实现方案：

• 通用全量匹配赋值（最简便，兼容Vue2/Vue3选项式API）
  直接用原生Object.assign方法把接口返回的字段合并到组件实例即可，该方法只会覆盖和返回数据key同名的属性，不会改动data里其他无关字段（比如你定义的loading、分页参数等未在接口返回里的字段不会受影响）。
  注意：这个写法生效的前提是你已经在data()里提前定义了这些待更新的属性（你的场景完全满足这个条件），不会出现响应式丢失的问题。
  示例代码：

  // 注意根据你自己的axios封装调整返回值层级，示例默认接口返回数据在res.data
  axios.get('/url/').then(res => {
    Object.assign(this, res.data)
  })
  

  如果你用的是题目里封装的getAPI实例，替换axios即可，逻辑完全一致。
• 带白名单的安全赋值（避免接口返回多余字段污染组件状态）
  如果你担心接口后续迭代返回多余字段、意外覆盖组件内其他同名状态，可以提前定义允许更新的字段列表，做一层过滤再赋值：

  // 只允许更新以下两个字段
  const updateAllowList = ['first_name', 'last_name']
  axios.get('/url/').then(res => {
    updateAllowList.forEach(key => {
      if (Object.prototype.hasOwnProperty.call(res.data, key)) {
        this[key] = res.data[key]
      }
    })
  })
  

• 表单类场景推荐写法（后续维护更方便）
  针对个人信息编辑这类表单场景，更推荐一开始就把所有表单字段收拢到一个独立的form对象下管理，后续做重置、校验、提交都更方便，赋值也更简单：
  首先在data里定义结构：

  data() {
    return {
      form: {
        first_name: "",
        last_name: "",
      }
      // 其他非表单状态比如loading、弹窗开关等放在form外面
    }
  }
  

  接口返回后直接合并到form对象即可：

  axios.get('/url/').then(res => {
    this.form = { ...this.form, ...res.data }
    // 等价写法：Object.assign(this.form, res.data)
  })
  

补充说明：你贴的手动赋值示例代码里存在笔误，重复写了两次first_name的赋值、遗漏了last_name，这类低级错误也是手动逐个赋值的常见问题，批量赋值可以完全避免这类疏漏。

内容的提问来源于stack exchange，提问作者John