報(bào)錯(cuò)場景

Uncaught TypeError: Cannot read properties of undefined (reading 'type') at LineView2.render (LineView.js:567:36) echarts.js:976

上述是報(bào)錯(cuò)信息

• 筆者簡單封裝一個(gè)Echarts組件，代碼文末附上，使用Vue3搭配Echarts5
• 在初始化echarts.init圖表時(shí)，沒有問題，但是當(dāng)進(jìn)行自適應(yīng)resize的時(shí)候報(bào)錯(cuò)了
• 報(bào)錯(cuò)截圖如下：

報(bào)錯(cuò)截圖

報(bào)錯(cuò)原因分析

• 報(bào)錯(cuò)的原因是Echarts初始化的實(shí)例變量受到了Vue響應(yīng)式ref的影響——啥意思呢？就是
• 響應(yīng)式的原理就是代理，也就是說，通過ref函數(shù)加工代理的Echarts實(shí)例，已經(jīng)不是原來的實(shí)例了。通俗而言，就是ref函數(shù)“克隆”了一份Echarts本體實(shí)例，本體實(shí)例自帶resize方法，但是代理克隆體上的resize方法可能克隆的不太完美【這樣描述不太嚴(yán)謹(jǐn)，反正是這個(gè)意思】
• 也就可能導(dǎo)致了ref函數(shù)克隆體的Echarts實(shí)例在調(diào)用時(shí)出錯(cuò)

解決方案

• 既然Echarts初始化的實(shí)例變量會(huì)受到Vue響應(yīng)式的影響
• 那么我們在存儲(chǔ)Echarts的時(shí)候，就不存到Vue的響應(yīng)式變量里面即可

如下：

思考，難道所有的變量，都要，都得，都必須通過ref或者reactive定義成響應(yīng)式的嗎？

原來的寫法用ref存儲(chǔ)：不建議

import * as echarts from "echarts";
const eChaDom = ref(null); // 用于初始化Echarts畫布需要的dom元素
const chart = ref(null) // 用于存儲(chǔ)Echarts
chart.value = echarts.init(eChaDom.value) // 初始化實(shí)例

解決方案一：直接使用普通變量來存儲(chǔ)Echarts實(shí)例

import * as echarts from "echarts";
let eChaDom = document.querySelector('.eChaDom'); // 用于初始化Echarts畫布需要的dom元素
let chart = null // 用于存儲(chǔ)Echarts
chart = echarts.init(eChaDom) // 初始化實(shí)例

解決方案二：使用淺層響應(yīng)式shallowRef進(jìn)行存儲(chǔ)Echarts實(shí)例

• 我們知道ref響應(yīng)式有些過頭了，稍微一變都能感應(yīng)到，而Echart的實(shí)例是不可變的
• 你變我不變，就容易打架出問題
• 所以，若是不想使用普通變量來存儲(chǔ)Echarts實(shí)例，使用shallowRef進(jìn)行定義存儲(chǔ)也是可以的
• 如下：

import * as echarts from "echarts";
const eChaDom = shallowRef(null); // 用于初始化Echarts畫布需要的dom元素
const chart = shallowRef(null) // 用于存儲(chǔ)Echarts
chart.value = echarts.init(eChaDom.value) // 初始化實(shí)例

解決方案三：依舊用ref但是搭配markRaw強(qiáng)制返回自身，不讓代理克隆一份

import { ref, markRaw, shallowRef } from "vue";
import * as echarts from "echarts";
const eChaDom = ref(null); // 用于初始化Echarts畫布需要的dom元素
const chart = ref(null) // 用于存儲(chǔ)Echarts
chart.value = markRaw(echarts.init(eChaDom.value)) // 初始化實(shí)例

• 這種方式有些多此一舉了，本來ref就是要代理克隆的一份，我們再使用markRaw去強(qiáng)制不允許代理克隆一份
• 這種方式不太推薦
• 屬于奇葩的操作

思考ref和shallowRef應(yīng)用場景————性能優(yōu)化

• 我們平常定義一個(gè)變量，可以將其定義成響應(yīng)式的，或者非響應(yīng)式的
• 定義成響應(yīng)式的是為了后續(xù)改它，自動(dòng)觸發(fā)頁面視圖更新
• 可是啊，在Echarts中，初始化的實(shí)例一般也不用去更改，更多的是去調(diào)用其自帶的方法
• 所以我們沒必要還用ref將其定義響應(yīng)式存儲(chǔ)
• 直接定義一個(gè)非響應(yīng)式數(shù)據(jù)去存儲(chǔ)一下也沒問題的
• 當(dāng)然，折中一下，就是用淺層響應(yīng)式的shallowRef來定義存儲(chǔ)吧

實(shí)際上，這也是性能優(yōu)化提升的一種方式

因?yàn)閞ef是把一個(gè)變量遞歸深層次加工成響應(yīng)式【耗時(shí)不少】，而shallowRef操作加工【耗時(shí)少】

我們看官方的shallowRef和markRaw這兩張圖，就能夠理解明白了：

圖：

圖：

官方地址在這

小結(jié)

• 響應(yīng)式變量有對應(yīng)的好處、非響應(yīng)式變量也有其優(yōu)點(diǎn)
• 我們應(yīng)該根據(jù)實(shí)際情況，去靈活定義一個(gè)變量到底是響應(yīng)式還是非響應(yīng)式的【亦或是淺層響應(yīng)式的】
• 本文就是一個(gè)實(shí)際情況【shallowRef折中定義一個(gè)淺層響應(yīng)式的Echarts實(shí)例的變量】
• 時(shí)間允許下，可以多研究研究一些報(bào)錯(cuò)的具體原因，這樣可以加深我們對于技術(shù)的理解

當(dāng)然，github就這個(gè)問題，也有對應(yīng)的issue。地址在這里

一句話總結(jié)，某些大一些的、不需要更改的實(shí)例化的數(shù)據(jù)對象，就不需使用ref定義成深層響應(yīng)式啦（直接用普通變量存儲(chǔ)也無妨）。若是依舊想定義成響應(yīng)式的，那就使用shallowRef即可

• 一句話總結(jié)，某些大一些的、不需要更改的實(shí)例化的數(shù)據(jù)對象，就不需使用ref定義成深層響應(yīng)式啦
• 直接用普通變量存儲(chǔ)也無妨
• 若是依舊想定義成響應(yīng)式的，那就使用shallowRef即可

嗯，這樣記，通俗易懂

封裝的Echarts組件，可復(fù)現(xiàn)對應(yīng)報(bào)錯(cuò)bug

組件二次封裝Echarts代碼

<template>
    <div ref="eChaDom" :style="{ height: h }" />
</template>
<script setup>
import { watch, onMounted, onBeforeUnmount, ref, shallowRef } from "vue";
import * as echarts from "echarts";
import debounce from 'lodash/debounce'
const props = defineProps({
    h: {
        type: String,
        default: '360px'
    },
    options: {
        type: Object,
        default: () => ({})
    },
    theme: {
        type: String,
        default: 'dark'
    }
})
// const eChaDom = ref(null); // 這樣resize有報(bào)錯(cuò)
// const chart = ref(null)
const eChaDom = shallowRef(null); // 這樣resize就沒報(bào)錯(cuò)了
const chart = shallowRef(null)
const init = () => {
    chart.value = echarts.init(eChaDom.value, props.theme)
    chart.value.setOption(props.options);
    window.addEventListener('resize', debounce(resizeFn, 360))
}
const resizeFn = () => {
    chart.value.resize()
}
onMounted(() => {
    init()
})
watch(
    () => props.options,
    (newOptions) => {
        chart.value.setOption(newOptions);
    },
    { deep: true }
)
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeFn)
})
</script>

使用組件

<template>
    <div class="tenBox">
        <eCha :options="options" h="600px" />
    </div>
</template>
<script setup>
import eCha from "@/components/eCha/index.vue";
const options = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }
    ]
}

以上就是從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3 ref和shallowRef區(qū)別及其組件二次封裝demo的詳細(xì)內(nèi)容，更多關(guān)于Vue3 ref shallowRef區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論