在Vue的mounted中仍然加載渲染不出echarts的方法問題
更新時間：2024年03月06日 10:38:07 作者：沒有頭發(fā)的戰(zhàn)斗暴龍獸
這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題
問題的主要原因是在mounted中無法獲取到dom元素
<template>
<div>
<div ref="echarts"></div>
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$$refs.echarts); // undefined
},
}
</script>知道了問題在哪里，那就從根源下手：
這是因為某些因素使得在mounted中還并沒有生成dom，所以結果自然就是undefined，那怎樣才能獲取到這個dom元素？
解決方法1（完美解決+超簡單）
直接把初始化方法寫在updated生命周期中
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
updated() {
this.initEcharts();
}解決方法2（完美解決+復雜）
使用自定義指令
我們自己設置一個自定義屬性，去監(jiān)測dom是什么時候生成的，在dom生成的時候立刻將echarts渲染到頁面上。
這個方法完美解決了加定時器有延時的缺點。
<template>
<div>
<div ref="echarts" v-init="option"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
option: {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
}
},
directives: {
init: {
// inserted: 在dom元素成功插入父節(jié)點時的鉤子函數(shù)
inserted(el, binding) {
echarts.init(el).setOption(binding.value);
}
}
},
}
</script>解決方法3（有缺陷+超簡單）
在初始化方法外面套一層定時器
在初始化方法外面套一層定時器：等dom生成了之后我們再去獲取這個dom元素
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
mounted () {
setTimeout(() => {
this.initEcharts();
}, 500)
},這個方法有一個很大的缺點，就是我們要自己去設置定時器的時間，就有可能會造成頁面的渲染和echarts的渲染不同步，頁面顯示出來了之后echarts可能要過一會兒才會出現(xiàn)。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要想來和大家一起探討一下Vue為什么需要同時使用Ref和Reactive，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
這篇文章主要介紹了Vue.js組件高級特性,結合實例形式詳細分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關操作技巧,需要的朋友可以參考下2018-12-12
vue router導航守衛(wèi)（router.beforeEach()）的使用詳解
導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。這篇文章主要介紹了vue-router導航守衛(wèi)（router.beforeEach()）的使用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標簽可以用來遍歷數(shù)組，將數(shù)組的每一個值綁定到相應的視圖元素中去，下面這篇文章主要給大家介紹了關于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架，手機端有對應框架是Mint UI ，今天給大家普及vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼，一起看看吧2021-06-06
el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn)
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關于Vue中實現(xiàn)過渡動畫效果的相關資料,需要的朋友可以參考下2023-01-01
如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能
在Vue3項目中集成Video.js庫,可以創(chuàng)建強大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫Video.js實現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
Vue.js?是一個用于構建用戶界面的漸進式?JavaScript?框架,它提供了多種方法來實現(xiàn)頁面之間的導航,本文將詳細介紹?Vue?3?中的各種頁面跳轉(zhuǎn)方式,有需要的小伙伴可以參考一下2024-12-12