从一个Echarts报错，来进一步学习Vue3中的ref和shallowRef区别&附Echarts组件二次封装代码

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

上述是报错信息

报错场景

• 笔者简单封装一个Echarts组件，代码文末附上，使用Vue3搭配Echarts5
• 在初始化echarts.init图表时，没有问题，但是当进行自适应resize的时候报错了
• 报错截图如下：

报错截图

报错原因分析

• 报错的原因是Echarts初始化的实例变量受到了Vue响应式ref的影响——啥意思呢？就是
• 响应式的原理就是代理，也就是说，通过ref函数加工代理的Echarts实例，已经不是原来的实例了。通俗而言，就是ref函数“克隆”了一份Echarts本体实例，本体实例自带resize方法，但是代理克隆体上的resize方法可能克隆的不太完美【这样描述不太严谨，反正是这个意思】
• 也就可能导致了ref函数克隆体的Echarts实例在调用时出错

解决方案

• 既然Echarts初始化的实例变量会受到Vue响应式的影响
• 那么我们在存储Echarts的时候，就不存到Vue的响应式变量里面即可
• 如下：

思考，难道所有的变量，都要，都得，都必须通过ref或者reactive定义成响应式的吗？

原来的写法用ref存储：不建议

import * as echarts from "echarts";

const eChaDom = ref(null); // 用于初始化Echarts画布需要的dom元素
const chart = ref(null) // 用于存储Echarts
chart.value = echarts.init(eChaDom.value) // 初始化实例

解决方案一：直接使用普通变量来存储Echarts实例

import * as echarts from "echarts";

let eChaDom = document.querySelector('.eChaDom'); // 用于初始化Echarts画布需要的dom元素
let chart = null // 用于存储Echarts
chart = echarts.init(eChaDom) // 初始化实例

解决方案二：使用浅层响应式shallowRef进行存储Echarts实例

• 我们知道ref响应式有些过头了，稍微一变都能感应到，而Echart的实例是不可变的
• 你变我不变，就容易打架出问题
• 所以，若是不想使用普通变量来存储Echarts实例，使用shallowRef进行定义存储也是可以的
• 如下：

import * as echarts from "echarts";

const eChaDom = shallowRef(null); // 用于初始化Echarts画布需要的dom元素
const chart = shallowRef(null) // 用于存储Echarts
chart.value = echarts.init(eChaDom.value) // 初始化实例

解决方案三：依旧用ref但是搭配markRaw强制返回自身，不让代理克隆一份

import { ref, markRaw, shallowRef } from "vue";
import * as echarts from "echarts";

const eChaDom = ref(null); // 用于初始化Echarts画布需要的dom元素
const chart = ref(null) // 用于存储Echarts
chart.value = markRaw(echarts.init(eChaDom.value)) // 初始化实例

• 这种方式有些多此一举了，本来ref就是要代理克隆的一份，我们再使用markRaw去强制不允许代理克隆一份
• 这种方式不太推荐
• 属于奇葩的操作

思考ref和shallowRef应用场景————性能优化

• 我们平常定义一个变量，可以将其定义成响应式的，或者非响应式的
• 定义成响应式的是为了后续改它，自动触发页面视图更新
• 可是啊，在Echarts中，初始化的实例一般也不用去更改，更多的是去调用其自带的方法
• 所以我们没必要还用ref将其定义响应式存储
• 直接定义一个非响应式数据去存储一下也没问题的
• 当然，折中一下，就是用浅层响应式的shallowRef来定义存储吧

实际上，这也是性能优化提升的一种方式

因为ref是把一个变量递归深层次加工成响应式【耗时不少】，而shallowRef操作加工【耗时少】

我们看官方的shallowRef和markRaw这两张图，就能够理解明白了：

图：

图：

官方地址在这

总结

1. 响应式变量有对应的好处、非响应式变量也有其优点
2. 我们应该根据实际情况，去灵活定义一个变量到底是响应式还是非响应式的【亦或是浅层响应式的】
3. 本文就是一个实际情况【shallowRef折中定义一个浅层响应式的Echarts实例的变量】
4. 时间允许下，可以多研究研究一些报错的具体原因，这样可以加深我们对于技术的理解

当然，github就这个问题，也有对应的issue。地址在这里

一句话总结，某些大一些的、不需要更改的实例化的数据对象，就不需使用ref定义成深层响应式啦（直接用普通变量存储也无妨）。若是依旧想定义成响应式的，那就使用shallowRef即可

• 一句话总结，某些大一些的、不需要更改的实例化的数据对象，就不需使用ref定义成深层响应式啦
• 直接用普通变量存储也无妨
• 若是依旧想定义成响应式的，那就使用shallowRef即可

嗯，这样记，通俗易懂

封装的Echarts组件，可复现对应报错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有报错
// const chart = ref(null)
const eChaDom = shallowRef(null); // 这样resize就没报错了
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
        }
    ]
}

</script>

<style>
.tenBox { width: 100%; height: 90vh; }
</style>