vue2.x + ts 经验小结

栏目 Vue

公司用 ts 写 vue 项目,经过初步的了解记录在此。

重新开始 #

我们先通过一个全新项目来尝试 ts,通过 vue create ts-vue-demo 再创建过程中选择 ts

初始化之后,看到新增两个依赖:

  • vue-class-component
  • vue-property-decorator

几个开发依赖:

  • @vue/cli-plugin-typescript
  • @vue/eslint-config-typescript
  • typescript
  • vue-template-combiler

其中 vue-class-componentvuejs 官方推出的。

vue-class-component #

这里摘录官方的代码,看看怎么用

// 固定写法,分别引入 Vue Component
import Vue from 'vue'
import Component from 'vue-class-component'

// 装饰器,本质上是一个函数
@Component({
  props: {
    propMessage: String
  }
})
// class Name 是 App
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed 变成了 get
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}

看完官方的demo感觉并不复杂,后续有通过基类继承

import Component,{mixins} from 'vue-class-component'
@Component
export class MyComp extends minxins(MyMixin){}

看到这里,github used27.8k star4.2k

从短暂的考察成都来看,官方维护 vue-class-component 还不够强大,实际中使用 vue-property-decorator 更多,作为替代品。

vue-property-decorator #

这个是民间维护的,官方推荐的插件。它完全依赖 vue-class-compnent

这个插件提供了几个装饰器和 mixin 函数

  • @Prop
  • @PropSync
  • @Model
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref

后两者继承自 vue-class-compnent:

  • @Component
  • Mixins

先看代码 Prop

// 这里一行代码引入 Vue Componet 和 Prop
impornt { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export defalut class _name_ extends Vue {
    @Prop(Number) readonly propA: string
    @Prop({ defalut: '' }) readonly propB!:string
}

有一种情况是,通过 prop 获得数据,在页面里 computed 部分使用。

https://github.com/kaorun343/vue-property-decorator