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

Question

我需要将对象类型的数据变量分配给普通变量

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 创建的所有属性

Answer 1

你可以使用 toRaw(reactive object gone here) 方法。

Answer 2

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

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

这是 Evan You在这里建议的方法。即使对于深度嵌套的对象，只要类型可以与 JSON（字符串、数字、布尔值、对象和数组）进行相互转换，它也能正常工作。如果您的数据包含其他内容（例如日期），您将需要另一种方法。

const unwrapped = { ...this.vars }

这对于浅对象很有效，即使它们包含非基元。

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