vue3实践踩坑总结

1、切换 页面 空白无报错信息；刷新 页面又能正常展示；

原因：template 里写了两个节点；

<template>
    <div></div>
    <div></div> //页面级组件只允许有一个节点
</template>

解决办法：写到一个节点底下去

疑惑：组件级 在template下写多个节点，没问题；页面级组件写多个会出问题 ；

2、echarts 图表能展示，但是tooltip，图例点击失效；

原因：不是很懂；

解决办法：实例化时 用 markRaw

import { onMounted, onUnmounted, watch, ref, markRaw } from "vue"
const instance = markRaw(echarts.init(chartRef.value));

3、mapbox加载pbf文件正确，但是文字不展示；

原因：设置特殊字体，但是又未加载字体文件；

解决办法：使用默认字体，或者加载特殊字体

4、keepalive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是activated和deactivated.

<router-view v-slot="{ Component, route }">
            <transition name="fade-transform" mode="out-in">
                <keep-alive :include="tabStore.cash">
                    <component
                        v-if="!route.meta.link"
                        :is="Component"
                        :key="route.path"
                    />
                </keep-alive>
            </transition>
        </router-view>

参考：https://juejin.cn/post/7018508057793691656?searchId=202412061659468C7F1A5EFBE840BB05D6

https://juejin.cn/post/7345105927358038070?searchId=202412061659468C7F1A5EFBE840BB05D6