vue3踩坑记录

今天起正式将前面vue2的项目升级成vue3，该项目将使用element ui3+vue3+vue router 4+typescript完成，这里将迁移碰到的一些问题，记录一下。
参考学习内容如下：
element ui3官网
vue3官网
typescript有关

1.keyup.enter.native报错

原因：

经查官网，.native的写法已经废除

解决：

将keyup.enter.native改为keyup.enter

2.vue3中使用beforeRouteEnter报错

需求：

路由进入时渲染背景图片
可以看到，导入时，只有如下两个选项可供选择，而在setup中写beforeRouteEnter又会报错

原因：

经多方查找，发现目前使用的版本为vue-router4,BeforeRouteLeave在router4中被改为onBeforeRouteLeave，BeforeRouteUpdate则被改为onBeforeRouteUpdate，至于beforeRouteEnter则没有找到对应的hook

解决：

不需要导入，只需要写在setup外即可，如图：

3.类型“Window & typeof globalThis”上不存在属性“xxx”

需求：

想在生产环境下统一配置url，不用每次修改后打包（配置方法）,结果ts的语法检查出现了这样一个错误

解决：

在项目中找到*.d.ts 文件 加上以下代码即可：

declare interface Window {
  PLATFROM_CONFIG: any
}

还有一种方法（不推荐）：直接将window对象定义为any类型
(window as any).xxx

4.vue3匹配所有路由报错：Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

需求：添加一个404路由，匹配所有错误路径，结果使用path: "*",会报下面这样一个错误

image.png

解决：使用：path: "/:pathMatch(.)"

参考：vue3报错Uncaught Error

5.组件中使用.sync修饰符会报错，如图

'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead

需求：需要子组件将加载过来的图片放到父组件数组中，以实现在父组件中预览图片时可切换图片

原因：vue3中 sync的修饰符已经废弃，详细内容见：vue3中文文档

解决：使用v-model ，如图：

6.vue3如何使用emit

vue2中用法：

this.$emit('xxx') //不带参数
this.$emit('xxx',arg) //带参数

vue3用法：

setup(props: any, context: any) {
    context.emit('xxx') //不带参数
    context.emit('xxx',arg) //带参数
}