Vue的created 和 mouted的執行順序

今天在數據可視化的項目中，用了echarts和vue來進行展示。按照我的理解，先執行created中調用后臺數據的接口，然后再進行echarts的展現。很遺憾一直失敗，而且每次打印都有數據，但是始終無法給echarts綁定。

<template><div class="map"><dv-border-box-8 class="map-chart-border"><div ref="mapChart" class="map-chart"></div></dv-border-box-8></div> </template> <script>//引入geo數據//import mapApi from '@/api/chinaMap'import mapData from "@/lib/china";export default {data() {return {mapData: [],currentData: [],statisticData: []}},created() {this.getMapData();},methods: {initMapChart() {console.log(this.currentData)const el = this.$refs.mapChart;const myChart = this.$echarts.init(el);this.$echarts.registerMap("chinaMap", mapData);const option = {title: {text: '地圖可視化',left: '45%',textStyle: {fontSize: 20,color: "#fff"},},tooltip: {trigger: 'item'},visualMap: {min: 0,max: 100,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']},textStyle: {color: "#fff",fontSize: 18},left: '5%'},series: [{name: '全國疫情熱力圖',type: 'map',map: 'chinaMap',label: {show: false},zoom: 1.4,data: this.currentData,layoutCenter: ['50%', '70%'],layoutSize: 400}]}myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},getMapData() {mapApi.getMapData().then(response => {//刷新頁面this.mapData = response.data.data.mapDatafor (let i = 0; i < this.mapData.length; i++) {this.currentData.push({name: this.mapData[i].name,value: this.mapData[i].currentConfirmedCount})this.statisticData.push({name: this.mapData[i].name,value: this.mapData[i].confirmedCount})}})},},mounted() {this.initMapChart();},}; </script><style lang="less" scoped>.map {width: 60%;height: 100%; //要給指定高度，這里我在組件外加了固定高度，所以這里給了100%.map-chart-border {width: 100%;height: 100%;}.map-chart {width: 100%;height: 100%;padding: 10px;}} </style>

經過半天的探索發現其實created和mounted沒有嚴格的執行順序，因為異步執行兩段代碼。
最后附上正確代碼

<template><div class="map"><dv-border-box-8 class="map-chart-border"><div ref="mapChart" class="map-chart"></div></dv-border-box-8></div> </template> <script>//引入geo數據//import mapApi from '@/api/chinaMap'import mapData from "@/lib/china";export default {data() {return {mapData: [],currentData: [],statisticData: []}},created() {this.getMapData();},methods: {initMapChart() {console.log(this.currentData)const el = this.$refs.mapChart;const myChart = this.$echarts.init(el);this.$echarts.registerMap("chinaMap", mapData);const option = {title: {text: '地圖可視化',left: '45%',textStyle: {fontSize: 20,color: "#fff"},},tooltip: {trigger: 'item'},visualMap: {min: 0,max: 100,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']},textStyle: {color: "#fff",fontSize: 18},left: '5%'},series: [{name: '全國疫情熱力圖',type: 'map',map: 'chinaMap',label: {show: false},zoom: 1.4,data: this.currentData,layoutCenter: ['50%', '70%'],layoutSize: 400}]}myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},getMapData() {mapApi.getMapData().then(response => {//刷新頁面this.mapData = response.data.data.mapDatafor (let i = 0; i < this.mapData.length; i++) {this.currentData.push({name: this.mapData[i].name,value: this.mapData[i].currentConfirmedCount})this.statisticData.push({name: this.mapData[i].name,value: this.mapData[i].confirmedCount})}this.initMapChart();})},},mounted() {},}; </script><style lang="less" scoped>.map {width: 60%;height: 100%; //要給指定高度，這里我在組件外加了固定高度，所以這里給了100%.map-chart-border {width: 100%;height: 100%;}.map-chart {width: 100%;height: 100%;padding: 10px;}} </style>

效果如下：

總結

以上是生活随笔為你收集整理的vue的mounted和created方法的执行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。