props和data中的数据

Question

老师，下面计算属性里面，for循环里面用props中的this.data，页面就会正常显示；把this.data换成data里面的this.singerList，那么list-shortcut表就第一次显示，刷新后就不显示了呢？
props和data中的数据区别在哪里呢？

 <div class="list-shortcut">
      <ul>
        <li class="item" 
        v-for="(item,index) in shortcutList" 
        :key="index">
	        {{item}}
        </li>
      </ul>
    </div>

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      singerList: this.data,
    }
  },
  computed: {
    shortcutList () {
      let list = []
      for(let key in this.singerList){
        list.push(key.slice(0,1))
      }
      return list
    }
  }
};

下图就是this.singerList的结果，第一次显示，刷新页面就消失，this.data则无论怎么刷新都不会消失，咋回事，搞不明白

Answer 1

ustbhuangyi 2019-05-17 12:39:55

刷新后不显示，是什么意思。
prop 可以从外部传入修改
data 是组件内部维护的数据，
它们都是响应式的

• 提问者 旺旺94919 #1

  我说的效果就是上面动图显示的，这个原因是不是因为，props中的data是外部异步请求得到的，data还没有传过来，这边的计算属性就已经计算结束了呢？

• ustbhuangyi 回复 提问者 旺旺94919 #2

  异步请求的数据会经历一次“没有数据-> 有数据”的过程

• 提问者 旺旺94919 回复 ustbhuangyi #3

  好的，谢谢老师！