Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理_vue3中子组件数据优先于父组件异步数据

	- [3.4 方法四：使用事件总线 bus](#34__bus_89)
	- [3.5 其他方法](#35__121)
+ [四、其它场景问题](#_123)
+ [五、拓展阅读](#_128)

---

一、问题描述

父组件通过Promise等其他异步方式获取异步数据，并传递给子组件，子组件直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。

二、原因分析

父组件通过Promise等其他异步方式获取异步数据，在尚未等到数据返回时，子组件 created已经执行完毕，故此时子组件中的数据为父组件上次的数据。

父子组件的生命周期：

一、加载渲染过程

父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子
beforeMount–>子 mounted–>父mounted

二、子组件更新过程

父beforeUpdate --> 子 beforeUpdate–> 子 updated–> 父updated

三、销毁过程

父beforeDestroy --> 子 beforeDestroy–> 子 destroyed–> 父destroyed

三、解决措施

3.1 方法一：v-if 判断

父组件

  <child :child-data="asyncData" v-if="asyncData"></child>

当asyncData有值得时候，再加载子组件。

评价：在asyncData为对象或数组元素，子组件获取对象属性或某一数组元素时，以上方法可行（不会报错），但仍会存在数据加载显示缓慢情形（及子组件首先显示的仍是上次父组件传值，然后才会渲染为当前父组件传值）。

3.2 方法二：watch 监听

子组件

watch:{
  childData(val){
      console.log('子组件 数据处理',val)
  }
}

评价： 以上方法仍会出现方法一中的数据加载缓慢问题。

3.3 方法三：子组件 watch + computed data 相结合

<template>
 <div>
  子组件
  <p>{{test}}</p>
 </div>
</template>
 
<script>
 export default {
 props: ['tableData'],
 data: () => ({
 test: ''
 }),
 watch: {
 tableData (val) {
 this.dataResult = val
 }
 },
 computed: {
 dataResult : {
 set (value) {
 this.update()
 this.test = value
 },
 get () {
 return this.test
 }
 }
 },
 methods: {


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。



* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。