关于vue3+ts在 .vue 文件中的多种组织方式应该怎么选择？

项目基础 vue3 + ts

问题描述：

最近想使用 vue3 + ts 搭建一个项目，发现网上有多种关于 ts 在 .vue 文件中的使用方式，就很懵… 不知道这几种方式都有什么差别

目的：

最终目的是选择一种可用的，以后不需要变更的使用方式

看到的使用方式：

1. 在使用 vue create APP 创建项目的时候，提供的不同的选择

   • 使用基于 class 类型的方式（这种方式是不是 vue2.0+的时候使用的那种…）

     // 在 package.json 中引入了 vue-class-component 插件
     
     // 在 vue2.0+ 中应该是这样用的
     // === 计做 方式1
     import Vue from 'vue'
     import Component from 'vue-class-component'
     
     @Component({
     props: {
       propMessage: String
     }
     })
     export default class App extends Vue {
     // 初始化数据 data可以声明成类属性形式
     msg = 123
     
     // 使用props
     helloMsg = 'Hello, ' + this.propMessage
     
     // 生命周期钩子声明  保留名称
     mounted () {
       this.greet()
     }
     
     // computed属性可以声明成类方法形式
     get computedMsg () {
       return 'computed ' + this.msg
     }
     
     // method方法可以声明成类方法形式
     greet () {
       alert('greeting: ' + this.msg)
     }
     }

     但是，在使用 vue3.0的cli创建出来的项目，给的例子中是这样用的

     // === 计做 方式2
     import { Options, Vue } from 'vue-class-component';
     import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
     
     @Options({
     components: {
       HelloWorld,
     },
     })
     export default class Home extends Vue {}

     所以就懵了，不知道该怎么弄

   • 不使用 class 模式
     这个时候，cli 创建的项目给出的方式是这种

     // === 计做 方式3
     import { defineComponent } from 'vue';
     import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
     
     export default defineComponent({
     name: 'Home',
     components: {
       HelloWorld,
     },
     });

     所以，我应该使用哪种方式去开发项目？
     希望大家给个建议，最好是说明下理由
     万分感谢！！