Vue.js 如何更改vue对象的整个数据？

简单地说，我只想更改Vue对象的整个数据，如下所示：

vueobj.$data = newdata; 

但是官方文件说这是不允许的：

VM156 vue.js:597[vue warn]：避免替换实例根$data。使用 而不是嵌套的数据属性

（位于）

因此我尝试了另一种方法：首先通过

$destroy（）

销毁vueobj，然后创建一个新的vueobj，将新数据对象绑定到同一个UI元素，但在此之后，UI元素仍然使用旧数据。那么我该如何解决这个问题呢？谢谢

2021年更新：

这是正确的解决方案

Vue核心团队成员Linus Borg在年提出了相同的解决方案

---

我认为您无法更改整个数据对象。再次破坏和创造似乎也不正确。但是您可以将数据1中的值更改为1

e、 g

您可以通过在Vue实例外部执行

vueApp.number=//…

来更改

number

---

希望这就是您所要求的。

这很棘手，但您可以迭代数据属性并：

• 第一：删除所有

  数据

  属性
• 第二：将

  newdata

  对象的每个属性添加到

  data

  对象中

演示如下：

newvue({
el:“#应用程序”，
数据：{
名字：“爱丽丝”，
年龄:30
},
方法：{
changeWholeData（）{
让newdata={name:'Bob'，年龄：40}；
//从数据中删除所有当前关键点
Object.keys（this.$data）.forEach（key=>this.$data[key]=null）；
//将所有属性从newdata设置为data
Object.entries（newdata.forEach）（entry=>Vue.set（this.$data，entry[0]，entry[1]）；
}
}
})

名称：{{Name}

年龄：{{Age}

更改整个数据

正如它所说的，您需要使用嵌套属性来包装要替换的数据，因此只需事先进行一点规划

如果像这样创建Vue实例

var vueobj = new Vue({
  el: '#app',
  data: {
    dataSource: {
        name: 'Alice',
        age: 30
    }
  }
})

然后您可以像这样替换数据

vueobj.dataSource = newdata;

dataSource

包装器属性可以是任何有效的属性名称。缺点是您无法再直接在

Vue

实例上访问内部属性。例如，您必须使用

vueobj.dataSource.name

而不是

vueobj.name

，但我想这是Vue提供的所有其他易用性的折衷。您可以创建一个

名称

计算，以逐案解决此问题，但如果有许多根属性，则这样做会很繁琐。

这对我很有用：

<div id="app">
  {{name}}: {{age}}
</div>

const app = new Vue({
  el: "#app",
  data: {
    name: "Alice",
    age: 30
  },
  methods: {
    refresh(data) {
      Object.assign(this.$data, data); // <--
    }
  }
});

const newData = {
  name: "Bob",
  age: 22
};

app.refresh(newData);

{{name}}:{{age}
const app=新的Vue({
el:“应用程序”，
数据：{
姓名：“爱丽丝”，
年龄:30
},
方法：{
刷新（数据）{
Object.assign（this.$data，data）；//非常感谢您改进了我的问题当然！顺便问一下，我可以问一下您为什么选择了另一个吗？（只是好奇，真的，另一个也是一个很好的解决方案，您应该保持接受！）我是使用Vue的新手，我是使用Microsoft ASP.NET的编码员，在ASP.NET中，设置元素很容易。DataSource=somedata，所以我认为Vue应该以同样的方式，现在我知道我错了。谢谢你，你太好了。@Jinmin你只有想错的时候才错。你可以轻松地向数据对象添加
DataSource
属性打包要交换的数据。使用此命令创建Vue根：
var data={dataSource:originalData}
然后你可以这样替换它
vueobj.dataSource=newdata；
你的答案比没有答案更糟糕。此人写道他想更改整个数据字典。相反，你显示的代码甚至与答案不太接近。@ilyasJumadurdyew。我不太欣赏这里的咆哮，但我同意答案是正确的tinos确实是一个解决方案。感谢你让我学到了一些新东西。我真的很抱歉，我写得有点太严格或太生气了，但我已经和facebook打了一段时间交道，我真的很讨厌这样的回答，当他们不回答你的问题，而是建议你一些你已经尝试过的东西，并且你在你的简历中描述了这一点stion。这是正确的答案。干得好！这将破坏反应性…因此任何需要反应性的东西都必须是计算的或$set。为什么它会破坏反应性@RayFoss？
对象。在目标对象上分配
调用设置器（在本例中为
This.$data
），这是vue2系统使用的所有属性。换句话说，使用
对象.assign（this.$data，source）
与手动分配给
this.$data
中的每个单独属性相同。
<div id="app">
  {{name}}: {{age}}
</div>

const app = new Vue({
  el: "#app",
  data: {
    name: "Alice",
    age: 30
  },
  methods: {
    refresh(data) {
      Object.assign(this.$data, data); // <--
    }
  }
});

const newData = {
  name: "Bob",
  age: 22
};

app.refresh(newData);