vue3踩坑

1.路由获取

const route = useRoute();

只能在setup方法中获取一次，之后直接调用route就好了，否则第二次调用useRoute()会获取不到

2.echarts初始化
需要使用以下方式初始化，不能使用refs的方式

const echartsId = 'echarts_' + Math.random().toString(36).substr(2);
const echartsEl = document.getElementById(echartsId);
myEchart = echarts.init(echartsEl);

3.$refs已不能使用，需要使用以下方式

setup() {
	const cumRef = ref(null);
	return { cumRef }; 
}
<template>
	<div ref="cumRef"></div>
<template>

4.vue3.2.X vue-tsc检查
vue3.2.x之前必须使用<script>import MAliplayer from "./Maliplayer.ts";
vue3.2.x 之后必须使用<script lang="ts">import MAliplayer from "./MAliplayer";并且ts文件中必须使用export default defineComponent({ setup() ….})

5.props定义default函数方式

export default defineComponent({
  name: 'echarts',
  props: {
    option: {
      type: Object,
      default() {  // 不能使用这种方式必须使用箭头函数，否则会导致类型推断失败
        return {};
      }
    },
    styles: {
      type: Object,
      default: () => {
        return {
          width: '100%',
          height: '100%'
        };
      }
    },
  },

props里面定义的default需要用default: ()=>{}，不能用 default(){}，用default(){}这种方式会导致props类型推断失败

6.defineComponent中Array类型自定义

export default defineComponent({
  name: 'Prize-Template-Form',
  components: { PutawayList },
  props: {
    isEdit: {
      type: Boolean,
      required: false,
      default: false
    },
    tmpModeList: {
      type: Array as () => Common.Config.Param[],
      required: true,
      default: () => {
        return [];
      }
    },
…