created vue neutron component, mounted hooks to get the value in question is less than props

Sons communication component

The official website is very clear, very simple, using the parent components are bound to the v-bind, receiving subassembly using props to 
example: 
parent components:

<template>
    <div>
        <head-top></head-top>
        <section class="data_section">
            <header class="chart-title">数据统计</header>
            <el-row :gutter="20" class="chart-head">
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">统计：</div></el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售数量 <span>{{number}}</span></div></el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><sales amount>= "Content-the Data Grid-head"classdiv<span>{{amount}}</span></div></el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利润统计 <span>{{profits}}</span></div></el-col>
            </el-row>
        </section>
        <chart :chartData="chartData"></chart>
    </div>
</template>

<script>
    data(){
            return {
                number: null,
                amount: null,
                profits: null,
                chartData: [10,10,10]
            }
        },
</script>

Sub-components:

export default {
    props: ['chartData']
}

In this case, the sub-assembly  methods  in the value of props you want to take the direct use of  the this .chartData  can 
but there is a writing case, your  chartData  inside and values are not fixed, but dynamic acquisition , which under case, you will find  methods  is taking less than you  chartData  , or has been taken to the default values.

Example, the following cases 
parent components:

<Script> 
    Data () { 
            return { 
                Number: null , 
                AMOUNT: null , 
                Profits: null , 
                chartData: [] 
            } 
        }, 
        Mounted () { 
            the this .getStatistics (); 
        }, 
        Methods: { 
            // get statistics 
            getStatistics ( ) { 
                the console.log ( 'Get statistics' ) 
                axios.post (API, { 

                }). the then ((RES) => {
                     the this.number = res.data.domain.list[0].number;
                    this.amount = res.data.domain.list[0].amount;
                    this.profits = res.data.domain.list[0].profits;
                    this.chartData = [this.number,this.amount,this.profits];
                }).catch((err) => {
                    console.log(err);
                })
            },
        },
</script>

At this time, using methods subassembly  the this .chartData  find does not exist (as is empty)

This is what I deal with the use of watch:

Solutions are as follows:

Use  Watch  :

Export default { 
    The props: [ 'chartData' ], 
        Data () { 
            return { 
                CDATA: [] 
            } 
        }, 
        Watch: { 
            // correct assignment to the method CDATA 
            chartData: function (newVal, oldVal) {
                 the this .cData = newVal;   // newVal that is chartData 
                newVa L && the this .drawChart (); // newVal exist functions performed drawChar 
            } 
        }, 
        Methods: { 
            drawChart () { 
                // perform additional logic 
            } 
        },
　　　　　 
        Mounted () { 
            // In this life cycle created, mounted, will fail to this.cData assignment, the assignment method of error 
            // this.cData = this.chartData; 
        } 
}

Listening  chartData  value, when it will trigger the transition from empty, this time will be able to get to, and post-processing method also needs to do to get the value of the  watch  inside execution.

//to sum up

The reason for this appears to be necessary to pass as a parent assembly   props  property is returned via ajax request occurs, this request process takes time, but the rendering is faster than subassembly ajax request process, so this when   the Created  ,  Mounted   so only once in the life cycle of a hook, has been performed, but no props flow coming in (subcomponent), you can only get the default value.

Reprinted: https://blog.csdn.net/zmkyf1993/article/details/80320802