如何将 Vue 包装的对象转换为普通对象答案

【问题标题】：How to convert a Vue-wrapped object to a normal object如何将 Vue 包装的对象转换为普通对象
【发布时间】：2020-01-25 14:19:03
【问题描述】：

我需要将object类型的数据变量赋给一个普通变量

const myVue = new Vue({
  el: '#myVue',
  data: {
    vars: {}, // show Form
  },
  methods: {
    assign_vars() {
      const new_vars = this.vars;
    },
  },
});

html

<input type="text"  v-model="vars.name" >

我需要new_vars 是这样的：

new_vars: { name: 'test' }

但是new_vars 拥有 Vue 创建的所有属性

【问题讨论】：

好的。你的问题是什么？有问题吗？
喜欢这个let new_vars = {name: this.vars.name}; ?
是的，但我需要动态 ``` let new_vars = this.vars;```
不清楚您所说的“动态”是什么意思。请更具体。
取决于您的项目设置，但您可以使用对象解构。例如const new_vars = { ...this.vars };

标签： vue.js

【解决方案1】：

Vue 将其观察到的数据包装在一个特殊的对象中以有效地观察变化（这就是实现反应性的原因）。在大多数用例中，您不需要解包对象，但如果您这样做，这里有几个方法：

const unwrapped = JSON.parse(JSON.stringify(this.vars));

这是 Evan You here 建议的方法。它甚至适用于深度嵌套的对象，只要类型可以转换为 JSON（字符串、数字、布尔值、对象和数组）或从 JSON 转换。如果您的数据包含其他内容（例如日期），您将需要另一种方法。

const unwrapped = { ...this.vars }

这适用于浅层对象，即使它们包含非原始对象。

如果您有一个包含非原始值的深层嵌套对象，则需要编写一个递归解包其子对象的函数。

【讨论】：

不知道有没有人试过衡量哪种方法效率更高，所以我用了一个简单的比较模型。如果有人以更合适的方式确认它，那将是受欢迎的。我的测试标准是比较我知道如何转换的 3 种方法：Object.assign、JSON.stringify into JSON.parse、const unwrapped = { ...this.vars }。它循环了 100000 次迭代，在我的电脑 const unwrapped = { ...this.vars } 中它比其他人快得多，总共 1462.4199999962002 ms。其他的，分别是5084.745000000112 ms 和8934.004999988247 ms。

【解决方案2】：

如果你想保留函数，lodash.defaultsDeep({}, vm.$data) 是个好主意。

【讨论】：