vue.js - 如何更改 vue 对象的全部数据？

Question

很简单，我只想改变一个Vue对象的全部数据，像这样:

vueobj.$data = newdata; 

但是官方文档说不允许:

VM156 vue.js:597 [Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.

(found in )

所以我尝试了另一种方法:首先通过 $destroy() 销毁 vueobj，然后创建一个新的 vueobj 以将新数据对象绑定(bind)到相同的 UI 元素，但在那之后，UI元素仍然使用旧数据。那么我该如何解决这个问题呢？谢谢!

Answer 1

这对我有用:

<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);