一、简述
前段时间将我的开源项目visualization-collection进行了重构，该项目目前有2.6k的star数，有很多的做Vue开发的同学问有没有Vue版本，所以就对着之前React版本的重新开发并发布了一个Vue版本的，对于Vue我也是现学现用，在开发过程中也遇到很多阻碍和坑，并且将容易踩坑的地方及解决办法都记录下来，今天在这里进行一个技术分享。
二、踩坑分享
style样式中不能使用:global，否则运行会报错(找问题调试半天)。
父组件的样式会影响子组件中最外层第一个元素的样式(该元素的class与父组件中的class名称一样时)，即使两个组件的style标签中都加了scoped，解决办法就是在最外层再套一层div或者改用不一样的class名。
当组件中props参数使用默认值时，不能直接在组件中元素的style中直接使用，这样样式直接无效，解决办法就是将元素所需的style对象用computed方法返回。
比如：
interface SwitchProps {
width?: number;
height?: number;
}
const {
width = 90,
height = 40,
} = defineProps<SwitchProps>();
<template>
<div :style="{ width: `${width}px`, height: `${height}px` }" />
</template>
需改为
import { computed } from "vue";
interface SwitchProps {
width?: number;
height?: number;
}
const {
width = 90,
height = 40,
} = defineProps<SwitchProps>();
const containerStyle = computed(()=>{
return { width: `${width}px`, height: `${height}px` }
});
<template>
<div :style="containerStyle" />
</template>
类型为boolean的且不是必传的props属性值，在使用时且没有传值时，拿到的值一直是false，并不是和react中一样为undefined，所以不能写是否等于undefined来处理业务逻辑。
如果使用了echarts库，那么在拿到echarts.init()后的对象后一定要用markRaw转一下，将echarts图表标记为不可被转为代理，否则会导致如果echarts的配置中的tooltip.trigger为"axis"时，tooltip无法显示，且tooltip.valueFormatter也不会执行。
import { markRaw } from "vue";
chartInstance.value = markRaw(echarts.init(chartRef.value, undefined, { renderer: "canvas" }));
vite.config.ts配置文件中的默认的publicDir属性值为"public", 之前如果要引入public中的文件，在react中写的 <video><source src="public/dance.mp4"></source></video>，而在vue中则必须写成<video><source src="/dance.mp4"></source></video>，这样在本地运行时会找public中的dance.mp4文件，但是使用vite打包后，public中的文件会被复制到outDir的根目录中，所以如果还是和react中一样的写法就不对了，打包时会报错，因为打包后的根目录中没有public文件夹。
watch(xxx, ()=>{ if(boxRef){} }, { immediate: true })中的回调函数在执行第一次时是在onMounted之前执行，也就意味着这和React中的useEffect不一样，在回调函数中是拿不到boxRef实例的，解决办法就是写成watch([xxx, boxRef], ()=>{ if(boxRef){} }, { immediate: true })
三、结语
对于一个Vue新手，如果我的解决办法有问题或大家有更好的解决办法，可以进行留言讨论，再次感谢各位的支持。
最后用一道我自己在学习Vue时琢磨出的一个关于Vue生命周期与API执行顺序的面试题，搞懂了这个，那Vue执行顺序相关的题就不在话下了：
问：该组件第一次渲染后console.log打印什么？点击一次按钮后打印什么？
更多个人文章
