关于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,
      },
      });

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

讨论数量: 1

既然都打算玩 vue3 了还是用第二种吧,便于打包和业务逻辑集中。

3周前 评论
wj2015 (作者) 2周前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!