小黑账单 图表渲染失败 父子组件的生命周期钩子函数不会同步调用

项目场景：

记账本+ECharts图表，Vue组件间传递数据

---

问题描述

图表组件中 mounted钩子中获取的list总是空的，表单组件亦然

PayEcharts.vue

<template>
  <div class="payEcharts">
    <div class="right"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props:{
        list:{
            type:Array
        }
    },
    mounted() {
        console.log('在echarts打印',this.list);
        
              this.myChart = echarts.init(document.querySelector('.right'))
              this.myChart.setOption({
                  title: {
                      text: '消费列表',
  
                      left: 'center'
                  },
                  // 提示框
                  tooltip: {
                      trigger: 'item'
                  },
  
                  // 图例
                  legend: {
                      orient: 'vertical',
                      left: 'left'
                  },
                  series: [
                      {
                          name: '消费账单',
                          type: 'pie',
                          radius: '50%',
                          series:[
                            {
                              data:this.list.map(item=>({value:item.price,name:item.name}))
                            }
                          ],
                          emphasis: {
                              itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                          }
                      }
                  ]
              })
          },
}
</script>

<style scoped>
 .right{
      width: 400px;
      height: 300px;
      margin-left: 30px;
      border: 1px solid black;
  }
</style>

App.vue

<template>
    <div class="app">
        <PayList @add="addFn" @del="delFn"   :list="list"></PayList>
        <PayEcharts :list="list"></PayEcharts>
    </div>
  </template>
  <script>
  import PayEcharts from './components/PayEcharts.vue';
  import PayList from './components/PayList.vue';
  import axios from 'axios'
//   import * as echarts from "echarts";
  
   /**
         * 接口文档地址：
         * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
         * 
         * 功能需求：
         * 1. 基本渲染
         * 2. 添加功能
         * 3. 删除功能
         * 4. 饼图渲染
         */
  export default {
    components:{
        PayEcharts,PayList
    },
      data(){
          return {
              list:[],
          }
      },
     
      
      created(){
          this.getList()
      },
      mounted(){
        console.log('在app打印',this.list);
      },
      methods:{
        async getList(){
              const res=await axios.get('https://applet-base-api-t.itheima.net/bill',{
                  params:{
                      creator:'slx'
                  }
              })
              console.log(res.data.data)
              this.list=res.data.data
              console.log('在app的getList函数中打印',this.list);
            //   this.myChart.setOption({
            //       series:[
            //           {
            //               data:this.list.map(item=>({value:item.price,name:item.name}))
            //           }
            //       ]
            //   })
          },
        async delFn(tt){
              await axios.delete(`https://applet-base-api-t.itheima.net/bill/${tt}`)
              this.getList()
          },
  
          async addFn(obj){
              const name=obj.name
              const price=obj.price
              if(name==''){
                  return alert ('请输入有效名字')
              }
  
              await axios.post('https://applet-base-api-t.itheima.net/bill',{
              "creator": 'slx',
              "name": name,
              "price": price
              })
  
              this.getList()
          }
      }
  }
  </script>
  
  <style>
  .app{
      display: flex;
  }
  
  
 
  </style>

---

原因分析：

从你提供的代码中，我注意到可能出现了一个问题，可能导致图表不显示以及list数组获取不到的情况。问题出现在PayEcharts组件的mounted生命周期钩子中。

在PayEcharts组件的mounted钩子中，你尝试初始化 ECharts 实例并设置图表选项。然而，可能在这个时候，this.list 数据还没有被完全传递到子组件。这是因为父组件的mounted钩子会在子组件的mounted钩子之前被调用，因此在PayEcharts的mounted钩子中，this.list 可能尚未被父组件完全初始化。

为了解决这个问题，你可以使用一个 watch 来监听 list 数据的变化，并在 list 数据更新时重新绘制图表。这样可以确保在正确的时机进行图表的初始化和数据渲染。以下是修改后的代码示例：

---

解决方案：

通过使用 watch 监听 list 数据的变化，你可以确保在数据传递到子组件后再进行图表的初始化和渲染，从而解决可能导致图表不显示的问题。

PayEcharts.vue

<template>
  <div class="payEcharts">
    <div class="right"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props:{
        list:{
            type:Array
        }
    },
    mounted() {
    this.myChart = echarts.init(document.querySelector('.right'));
    this.renderChart();
  },
  watch: {
    list: {
      immediate: true, // Trigger the watcher immediately on component creation
      handler() {
        this.renderChart();
      },
    },
  },
  methods: {
    renderChart() {
      if (this.myChart && this.list) {  //这个删了会 在最开始有空白，图表为空
        this.myChart.setOption({
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%',
              data: this.list.map(item => ({ value: item.price, name: item.name })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        });
      }
    },
  },

}
</script>

<style scoped>
 .right{
      width: 400px;
      height: 300px;
      margin-left: 30px;
      border: 1px solid black;
  }
</style>