Vue2 迁 Vue3 踩过的一些坑（持续更新）

去除extends

这个是迁移过程中暂时来看最复杂的

//b.vue
import a from './a.vue'
export default class b extends a {
	getB () {}
} 

//a.vue
<template>
	<div>{{tabData}}</div>
</template>
<script lang="ts">
export default class a extends Vue {
	getA () {}
} 
</script>

由于a.vue也需要在其他页面渲染，最后的解决方法是把template拆出来放一个vue，方法通过判断进行渲染

//test.vue
<template>
	<div>{{tabData}}</div>
</template>
import useA from './useA.ts'
import useA from './useA.ts'
export default {
	props: {
    	isBase: {
      		type: Boolean,
      		required: true,
      		default: false
    	}
  	},
	setup() {
		const tabKey = ref('test') 
		if (props.isBase) {
      		({ tabData } = useA(tabKey))
      	} else {
      		({ tabData } = useB(tabKey))
    	}
    }
}

//A.ts
export default A(tabKey: string) {
	const tabData = () => {
		return api.getData({tabKey.value})
	}
	return { tabData }
}
//B.ts 同理

暂时只能想到这个方法，如果有更好的会做调整

ps: 可以使用以下方法调用其他vue组件的方法和数据，与extends的效果类似

import A from './A.vue';

export default {
  setup() {
    const {activeTabKey, type, chartDataStore, getData} = A.setup()

不过这种方法在A的setup需要props的时候就会出问题，还是把公共方法抽离出来较好。

使用Vue3推荐的这种组合式函数中的一些坑

1. 尝试从test.vue获取$route, $router再传进函数A, B中处理

setup() {
	const $route = useRoute()
	const $router = useRouter()
	const tabKey = 'test' 
	if (props.isBase) {
      	({ tabData } = useA(tabKey, $route))
      } else {
      	({ tabData } = useB(tabKey, $router)) 
    }
   }

获取时会出现一些问题（太慢？），直接在函数A, B里面获取就没啥问题

2. 传进去的如果是ref ，在函数里面记得使用value

filter转换成computed

//vue2
filters: {
    getTime(value: number) {
      return format(value);
	},
//vue3
setup() {
	const getTime = computed(() => {
  		return (value: number) => {
    		return format(value)
    	}
  	})
  	return { getTime }
}

watch最好放到setup的最下面

vue3迁移常见报错

//index.vue
import a from ./a.vue
import b from ./b.vue
import { useCommon } from ./useCommon.ts

<script lang="ts">
export default {
	components: {
		a, b
	}
	setup() {
		const { value } = useCommon() // composable函数
	}
}

如果出现了报错Couldn't resolve component "default" at "index.vue"
大概率是当前文件index.vue或者引入组件a, b或者引入组合函数useCommon里有未清理掉的vue2遗留，例如@Component等，就会导致这个问题

v-model

自定义组件时，v-model prop 和事件默认名称已更改：
prop：value -> modelValue
event：input -> update:modelValue