从使用vue-property-decorator的Vue2类式组件升级到Vue3有哪些注意事项？

1. 装饰器依赖替换 #

• 原有Vue2环境依赖为 vue-class-component@7.x + vue-property-decorator，二者均不再官方支持Vue3，需要替换为适配Vue3的类式装饰器方案：
  • 核心类组件库升级为 vue-class-component@8.x，官方仅提供基础类组件能力
  • 原vue-property-decorator提供的@Prop/@Watch/@Emit等装饰器，替换为社区维护的vue-facing-decorator，API和原有写法基本兼容，仅需修改导入路径。你提供的类式组件示例中用到的装饰器写法，在该库中均有对应实现，无需修改业务逻辑代码
• 示例替换：

  // 原有导入
  import { Component, Prop, Watch } from 'vue-property-decorator'
  // 升级后导入
  import { Component, Prop, Watch } from 'vue-facing-decorator'
  

2. 组件语法调整 #

• 响应式声明：类属性必须初始化（赋值为null/undefined/具体默认值）才会被识别为响应式状态，未初始化的属性不会触发响应式更新
• 生命周期钩子替换：
  • beforeDestroy 改为 beforeUnmount
  • destroyed 改为 unmounted
    其余生命周期钩子名称保持不变
• 移除Vue原型挂载方法：Vue3不再推荐在Vue.prototype上挂载全局属性，原this.$store/this.$route/this.$message等调用，替换为对应生态的组合式API调用：
  • Vue Router用useRouter/useRoute获取实例
  • Pinia直接导入对应Store
  • 全局工具方法通过provide/inject透传

3. 迁移方案选择 #

• 渐进式迁移：可以先开启Vue3兼容模式（@vue/compat），先保证原有组件正常运行，再逐个组件重构
• 重构选项：
  • 继续使用类式组件：替换依赖后调整少量语法即可，原有业务逻辑几乎不用改动
  • 替换为组合式API：如果团队接受新写法，更推荐重构为<script setup>语法，Vue3官方生态对组合式API的支持更完善，长期维护成本更低

4. 其他注意事项 #

• 原有mixins用法可以继续使用，vue-facing-decorator提供了@Mixins装饰器支持混入逻辑
• TS类型适配：Vue3类式组件的类型推导更严格，原有隐式any的属性需要补充类型标注
• 不建议继续使用已经停止维护的旧版装饰器库，避免后续出现兼容性问题无法修复

内容的提问来源于stack exchange，提问作者fResult