Vue项目中如何在对象解构赋值左侧使用this绑定实例属性

嘿，这个场景我太熟悉了！每次先解构到局部变量再一个个赋值给this确实有点啰嗦，其实有两种更优雅的方案可以解决这个问题：

方案1：使用Object.assign快速批量赋值 #

如果你的findPrimaryAndType函数返回的对象只有primaryNumber和typeOfExpression这两个属性（或者你不介意把返回对象的所有属性都同步到this上），直接用Object.assign是最简洁的：

Object.assign(this, this.findPrimaryAndType(this.naturalExpressionYearOfBirth, this.gender));

这个方法会把返回对象的所有可枚举属性直接复制到this实例上，完美替代你之前的两步赋值操作，一行代码搞定！

方案2：解构时直接赋值到this属性（精准控制） #

如果函数返回的对象还有其他你不想同步的属性，或者你想明确指定要赋值的属性，可以用带重命名的解构赋值，注意要把整个赋值语句用括号包裹（避免JavaScript把开头的{}解析成代码块）：

({ 
  primaryNumber: this.primaryNumber, 
  typeOfExpression: this.typeOfExpression 
} = this.findPrimaryAndType(this.naturalExpressionYearOfBirth, this.gender));

这里的逻辑是：从函数返回的对象中解构出primaryNumber和typeOfExpression，然后直接把它们的值分别赋值给this.primaryNumber和this.typeOfExpression，全程不需要中间变量。

小提醒（Vue专属） #

要确保this.primaryNumber和this.typeOfExpression是Vue实例的响应式属性：

• Vue2中，需要提前在data选项里声明这两个属性；
• Vue3中，如果你用的是setup语法，要确保它们是ref或reactive包裹的响应式变量（如果是reactive对象的属性，直接赋值就好）。

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