Question

我知道如果我想向数据对象添加属性，我会使用 Vue.set()。我在我的 created() 生命周期方法中这样做了……一个新字段将添加到 myObject。但是如果我想进行 api 调用并完全替换 myObject 的现有数据对象呢？我可以在 updateMore() 方法中做我正在做的事情还是有其他方法来处理这个问题？

data() {
   return {
      myObject: {}
   }
},
async created() {
     let apiData = await axios.get('http://myurl.com');
     this.$set(this.myObject, 'name', apiData.name);
},
methods: {
   updateMore() {
       let moreAPIData = await axios.get('http://myurl.com');

       // will this completely override `myObject` with `moreAPIData` and still be reactive? 
       this.myObject = moreAPIData;
   }
}

Answer 1

TL;DR：

这个新对象的分配很好。向对象添加新键时会出现 Vue 反应性问题，因为对象是相同的，更改的是其内容。 Javascript 通过地址比较对象，所以如果我这样做

new MyClass() === new MyClass()

它返回false，因为即使它们的内容相同，它们的地址也不同。

总结一下，当你设置一个全新的对象时，Vue 能够跟踪差异，但是当你改变一个键的内容时，它不能。

无聊的文字

您可以阅读有关 Vue 中反应性的整个文档here

Vue：完全替换数据对象？

1 个答案: