时间戳

首页 > 解决方案 > Vue：完全替换数据对象？

vue.js - Vue：完全替换数据对象？

问题描述

我知道如果我想向数据对象添加属性，我会使用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;
   }
}

标签： vue.jsvuejs2

解决方案

TL;博士：

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

new MyClass() === new MyClass()

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

总而言之，当你设置一个全新的对象时，Vue 能够跟踪差异，但当你更改一个键的内容时，它就不能。

无聊的全文

您可以在此处阅读有关 Vue 反应性的完整文档

推荐阅读