将React项目代码转成Vue3时最容易踩坑的地方

一、简述

前段时间将我的开源项目visualization-collection进行了重构，该项目目前有2.6k的star数，有很多的做Vue开发的同学问有没有Vue版本，所以就对着之前React版本的重新开发并发布了一个Vue版本的，对于Vue我也是现学现用，在开发过程中也遇到很多阻碍和坑，并且将容易踩坑的地方及解决办法都记录下来，今天在这里进行一个技术分享。

二、踩坑分享

1. style样式中不能使用:global，否则运行会报错(找问题调试半天)。

2. 父组件的样式会影响子组件中最外层第一个元素的样式(该元素的class与父组件中的class名称一样时)，即使两个组件的style标签中都加了scoped，解决办法就是在最外层再套一层div或者改用不一样的class名。

3. 当组件中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>

4. 类型为boolean的且不是必传的props属性值，在使用时且没有传值时，拿到的值一直是false，并不是和react中一样为undefined，所以不能写是否等于undefined来处理业务逻辑。

5. 如果使用了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" }));

6. vite.config.ts配置文件中的默认的publicDir属性值为"public", 之前如果要引入public中的文件，在react中写的 ，而在vue中则必须写成，这样在本地运行时会找public中的dance.mp4文件，但是使用vite打包后，public中的文件会被复制到outDir的根目录中，所以如果还是和react中一样的写法就不对了，打包时会报错，因为打包后的根目录中没有public文件夹。

7. watch(xxx, ()=>{ if(boxRef){} }, { immediate: true })中的回调函数在执行第一次时是在onMounted之前执行，也就意味着这和React中的useEffect不一样，在回调函数中是拿不到boxRef实例的，解决办法就是写成watch([xxx, boxRef], ()=>{ if(boxRef){} }, { immediate: true })

三、结语

对于一个Vue新手，如果我的解决办法有问题或大家有更好的解决办法，可以进行留言讨论，再次感谢各位的支持。

最后用一道我自己在学习Vue时琢磨出的一个关于Vue生命周期与API执行顺序的面试题作为结束，搞懂了这个，那Vue执行顺序相关的题就不在话下了：

问：该组件第一次渲染后console.log打印什么？点击一次按钮后打印什么？