vue.js - 如何将 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 创建的所有属性

标签： vue.js

Answer 1

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

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

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

const unwrapped = { ...this.vars }

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

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