vue.js - vue 中的对象数据属性是否需要存在所有属性？

Question

假设我是这样开始的:

data() {
    return {
        user: {}
    }
}

然后……我进行了 API 调用:

let response = await this.axios.get("/api/users/1.json");
this.user = response.data

这是将我的 API 调用中的数据分配给 this.user 的正确方法吗？ ?

做 user的所有属性需要先定义吗？

Answer 1

不，您不必声明 user 的所有属性.刚好 user在任何值不同于 undefined 的数据中就足够了。

当属性(property)在data , Vue 会将其替换为 get特尔和一个 set三。当你这样做时:

this.user = newValue;

您实际上是在调用一个 setter 来映射 newValue 的所有属性。进入 setter/getter 本身。

在官方文档中，您可以在 Reactivity in Depth 上找到更多信息。页。

看看下面。检查演示和图像中显示已创建(并在控制台中打印)的对象的说明。

var app = new Vue({
  el: '#app',
  data: {
    other: null,
    user: null
  },
  mounted() {
  	this.user = {
      name: 'bob',
      age: 10
    }
  }
})
console.dir(app)

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

<div id="app">
  <p>{{ other }}</p>
  <p>{{ user }}</p>
</div>