vue组件的渲染

Question

export default {

data() {
  return {
   seller: {}
  };
},
created() {
  this.$http.get('/api/seller').then((response) => {
    response = response.body;
    if (response.errno === ERR_OK) {
      this.seller = response.data;
    }
  });
},
components: {
  'v-header': header
}

<v-header :seller="seller"></v-header>
上面是给组件v-header赋值





<template>
<div class="header">

   <div class="content-wrapper">
     <div class="avatar">
       <img width="64" height="64" :src="seller.avatar">
     </div>
     <div class="content">
       <div class="title">
         <span class="brand"></span>
         <span class="name">{{seller.name}}</span>
       </div>
       <div class="description">
         {{seller.description}}/{{seller.deliveryTime}}分钟送达
       </div>
       <div v-if="seller.supports" class="support">

         <span class="icon"></span>
         <span class="text">{{seller.supports[0].description}}</span>
       </div>
     </div>
   </div>
   <div class="bulletin-wrapper"></div>
</div>

上面分别渲染组件
怎么感觉像是渲染多次啊。
不写v-if="seller.supports"控制台会提示报错未定义0，我在想这个是不是渲染了多次，期间用到vue-router的组件路由

Answer 1

created中是一个异步操作；数据还在获取中...；
然后就直接渲染了一次（这个时候seller还是{},自然"seller.supports"是未定义的）
然后等到数据拿到了，然后data变化了，又重新渲染。
我猜是这样子的

---

你是否有用vuex来做state management？
按照我的理解，你seller数据都还没拿过来的时候，就不应该让页面呈现，或者显示一个加载中