最近在學(xué)Vue3，閑來無事隨便找了個(gè)界面畫畫，有時(shí)候太自信也是問題，本覺得Vue3除了一些寫法和原理變更以外其他都差不多，真正動(dòng)手做的時(shí)候才發(fā)現(xiàn)原來有挺多坑。
這篇文章針對(duì)echarts用法做個(gè)簡單記錄，同時(shí)提醒一下自己，要多看更要多動(dòng)手。

框架：vue3 + TypeScript+vite
echarts版本：5.4.0

遇到的問題：
邏輯：全局定義一個(gè)屬性接收視圖，在onMounted生命周期初始化echarts，方便在指定位置或者數(shù)據(jù)請(qǐng)求之后進(jìn)行更新。
按照Vue2的寫法

var someEcharts = null

onMounted(()=>{
    someEcharts = echarts.init(document.getElementById('chart-view'))
})

const doSomething = () => {
  let options = {……}
  someEcharts.setOptions(options)
}

看上去很正常，初次加載options時(shí)也是正常渲染。但是當(dāng)切換options或者點(diǎn)擊圖例的時(shí)候，頁面就會(huì)報(bào)錯(cuò)

Cannot read property ‘type‘ of undefined
// 無法讀取未定義的屬性“type”

我蒙了，Vue2和Vue3難道不通用？還是是Ts語法導(dǎo)致的問題？或者是Ts類型推斷導(dǎo)致的刷新異常？
之后各種嘗試在初始化時(shí)定義屬性，echarts.EchartsType或as HTMLElement，結(jié)果都無效。
兩小時(shí)無果，沒辦法只能去echarts官網(wǎng)和Vue3官網(wǎng)看文檔了。
結(jié)果：echarts沒有任何說明
正在我頭疼時(shí)，突然發(fā)現(xiàn)Api文檔中有幾個(gè)不明所以的東西，unref、toRef、toRaw、markRow。
別的懶得講了，這里直接講一下用到的吧：

// markRow
// 作用:標(biāo)記一個(gè)對(duì)象,使其永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象（界面不會(huì)更新）
// 應(yīng)用場(chǎng)景:
// 1.有些值不應(yīng)被設(shè)置成響應(yīng)式時(shí),例如復(fù)雜的第三方類庫等
// 2.當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí),跳過響應(yīng)式轉(zhuǎn)換可以提高性能
// 3.在動(dòng)態(tài)渲染組件的時(shí)候我們就可以使用 markRaw 包裹。
// 實(shí)際上并不是真不變，當(dāng)markRow修飾的內(nèi)容和需要相應(yīng)的內(nèi)容一起改變時(shí)，仍然會(huì)作為響應(yīng)式對(duì)象

// toRaw，將響應(yīng)式對(duì)象（由 reactive定義的響應(yīng)式）轉(zhuǎn)換為普通對(duì)象。不再被proxy代理

中間過程也比較麻煩，懶得講了，直接附代碼(畢竟不是教程文檔)

import {markRaw, onMounted} from 'vue'
import * as echarts from 'echarts'

<script setup lang="ts">
  const someEcharts = ref<any>();
  onMounted(() => {
    someEcharts.value = markRaw(
      echarts.init(
        document.getElementById("chart-view") as HTMLElement
      )
    );
    loadCharts()
    window.onresize = function () {
      someEcharts.value.resize();
    };
  });
  const loadCharts = () => {
    type EChartsOption = echarts.EChartsOption;
    someEcharts.value.setOption(options() as EChartsOption);
  };
</script>

至此，echarts功能全部正常。有需要或者遇到同樣問題的兄弟可以參照上面寫法去調(diào)整。
再次提醒自己，不要眼高手低，看文檔的時(shí)候腦子說“我會(huì)了”，做的時(shí)候手抓腦袋“怎么不行”，要多看多做多嘗試