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

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

//b.vue import a from './a.vue' export default class b extends a { getB () {} } //a.vue ="ts"> export default class a extends Vue { getA () {} }

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

//test.vue 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 = https://www.it610.com/article/() => { 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()

【vue|Vue2 迁 Vue3 踩过的一些坑（持续更新）】不过这种方法在A的setup需要props的时候就会出问题，还是把公共方法抽离出来较好。
使用Vue3推荐的这种组合式函数中的一些坑

尝试从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里面获取就没啥问题

传进去的如果是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="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