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

Question

简单地说，我只想改变一个 Vue 对象的整个数据，像这样：

vueobj.$data = newdata; 

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

VM156 vue.js:597 [Vue 警告]：避免替换实例根 $data。请改用嵌套数据属性。

（在发现 ）

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

Answer 1

这很棘手，但您可以遍历数据属性并：

• 第一：删除所有data属性；
• 第二：将newdata对象的每个属性添加到data对象中。

演示如下：

new Vue({
  el: '#app',
  data: {
    name: 'Alice',
    age: 30
  },
  methods: {
    changeWholeData() {
    	 let newdata = {name: 'Bob', age: 40};
       // erase all current keys from data
       Object.keys(this.$data).forEach(key => this.$data[key] = null);
       // set all properties from newdata into data
       Object.entries(newdata).forEach(entry => Vue.set(this.$data, entry[0], entry[1]));
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Name: {{ name }}</p>
  <p>Age: {{ age }}</p>
  <button @click="changeWholeData">Change Whole Data</button>
</div>

Answer 2

这对我有用：

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