Vue Mounted没有执行，请问为什么？

Question

项目中基于webpack + Vue ，已经用npm install 了echarts
在js中引用echarts，但图表不显示，而且mounted中的console.log也没有执行，请问为什么啊？

困扰很久的问题。。求解惑。。

入口js

import Vue from 'vue'
var collVm = new Vue(
    {
        el: '#box',
        data: {
            reData: []
        }
    }
);
fetch("url", {
    method: 'GET',
})
    .then(function(response){
        return response.json();  
    })
    .then(function(json){
        if(json.status == '1000'){
            collVm.reData = json.data;
        } 
    })
    .catch(function(error){
        console.log(error);
    });

var echarts = require('echarts');

export default{
    name: 'chart',
    data (){
        return {
            msg: "error:chart"
        }
    },
    mounted (){
        
        var myChart = echarts.init(document.getElementById('ichart'));
        console.log(true);

        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
}

Answer 1

是不是没把vue文件挂载到vue实例上

Answer 2

你好，vue的生命周期中一个实例的mounted只会运行一次，collVm在创建的时候的时候已经运行调用了mounted的钩子了。你在export中没有创建一个实例。这里我们需要理解mounted会在什么时候运行，mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。当然你这里需要解决的并不是这个问题，你需要解决的是在什么情况下去初始化echarts。因为不清楚你的具体文件结构，所以也不好给出答案。

所以你可以在实例被创建的js中，添加mounted的时候初始化echarts，当然还有其他办法。只要是组件被创建完成就行。

Answer 3

遇到同样的问题怎么破。