vue2.x + ts 经验小结

公司用 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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 固定写法,分别引入 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感觉并不复杂,后续有通过基类继承

1
2
3
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

1
2
3
4
5
6
7
8
// 这里一行代码引入 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

请我喝杯咖啡吧~