记录一个vue生命周期的bug

  今天在书写业务代码的时候，遇到一个问题：简单来说，就是在一个Tab组件内，写了两个子组件，子组件是两个echarts图表，然而，在点击tab栏目之后，echarts图表并没有渲染。

<template>
    <div class="tab">
        <sfPanel :bodyPadding="bodyPadding" :panelMarginTop="panelMarginTop">
            <div slot="title">
                <ul class="nav">
                    <li v-for="(item, index) in　navOption"
                        :class="{active: curActive === index}"
                        @click="changeNav(index, navOption[index].clickCallback)"
                        :ga-data="item.gaData">{{item.title}}</li>
                </ul>
            </div>
            <div slot="content">
                <div v-for="(item, index) in navOption" v-show="curActive === index">  
//这便是问题的所在了，点击tab栏之后，执行props传进来的回调，tab下面的栏目是否显示，则是由回调的执行结果所决定的。考虑到点击之后，立即执行，而echarts图表切换好之后，可能v-show的状态还没有改变过来。所以会报错。
                    <slot :name="item.bodyName"></slot>
                </div>
            </div>
        </sfPanel>
    </div>
</template>

<script>
    /**
     * @file tab
     * props属性 navOption 传入一个数组：[{
     *      title: 'xxx',
     *      bodyName: 'xxx',
     *      clickCallback () {},
     *      gaData: xxx
     * },{
     *      title: 'xxx',
     *      bodyName: 'xxx',
     *      gaData: xxx
     * }]
     */

    import sfPanel from 'components/common/panel/index.vue';
    import Router from 'framework/router/index';

    export default {
        data () {
            let vm = this;

            return {
                curActive: vm.activeItem
            };
        },
        props: {
            activeItem: {
                type: Number,
                'default': 0
            },
            navOption: {
                type: Array,
                'default': function () {
                    return [{
                        title: '',
                        bodyName: ''
                    }, {
                        title: '',
                        bodyName: ''
                    }];
                }
            },
	        bodyPadding: {
		        type: Number,
		        'default': 20
            },
	        panelMarginTop: {
		        type: Number,
		        'default': 20
            }
        },
        components: {
            sfPanel
        },
        mounted () {
            let vm = this;

            vm.setPageActive();
        },
        methods: {
            changeNav (status, callback) {
                let vm = this;
                
                Router.push({query: Object.assign(vm.$route.query, { activePage: vm.navOption[status].bodyName})});
                vm.curActive = status;
                
	            if ($.isFunction(callback)) {
		            callback();
	            }
            },

            setPageActive () {
                let vm = this,
                    result = vm.$route.query.activePage;

                vm.navOption.forEach((item, index)=>{
                    if (item.bodyName === result) {
                        vm.curActive = index;
                    }
                });
            }
        }

    };
</script>

<style scoped>
    .comp-panel{
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    }
    .nav li{
        cursor: pointer;
        float: left;
        width: 140px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        margin-top: 7px;
        margin-right: 10px;
        font-size: 15px;
    }
    .nav li:hover{
        background: #fff;
        border: 1px solid #dddddd;
        border-radius: 4px 4px 0 0;
        color: #317ad4;
    }
    .active{
        background: #fff;
        border: 1px solid #dddddd;
        border-radius: 4px 4px 0 0;
        color: #317ad4;
    }
</style>

解决方法:

data () {
            let vm = this;
            return {
                navOption:[{
                    title:'金砖会议',
                    bodyName:'goldBrick',
                    clickCallback () {
                        vm.getJinzhuanChartData();
                    }
                }, {
                    title:'博鳌会议',
                    bodyName:'boAo',
                    clickCallback () {
                        vm.getBoaoChartData();
                    }
                }]
            };
        },

methods:{
    getJinzhuanChartData () {
                let vm = this;

                vm.$ajax({
                    url: '/supervisor/get_zero_echarts',
                    successCallback (res) {
                        let data = res.data;
                        vm.$refs.goldBrick.initeventPie(data.goldbrick);
                        vm.$refs.goldBrick.initcompanyPie(data.goldbrick);
                        vm.$refs.goldBrick.initnumberOfPie(data.goldbrick);
                    }
                });
            },
}

在回调中,渲染子组件中的echarts图表，而不是单独在echarts图表组件中渲染。