preface

TypeScript was recently introduced in the project, so here’s a quick note on some of the usages.

The installation

Vue-property-decorators are introduced in the project.

NPM i-s vue-property-decorator // For the following example, use version: ^9.0.2Copy the code

Vue-property-decorator is a wrapper based on vue-class-component. You can click here to see how vue-class-component is used.

usage

Some common usages in projects are described below and can be documented here.

@Component

In a project, use the @Component decorator to make your class a Vue Component:

<script>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {... } </script>Copy the code

data

Data can be declared as a class attribute:

<template>
  <div>name: {{ name }}</div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    name = 'tom';
}
</script>
Copy the code

Note that if the initial value is undefined, the class attribute will not respond, which means that no changes to the attribute will be detected. To avoid this, you can use NULL or use datahook

computed

Computed can be declared as a getter/setter for a class property:

<script>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    book = 'tom';
    
    get bookname() {
        return ` 【The ${this.book}】 `
    }
    
    set bookname(val) {
        this.book = val;
    }
}
</script>
Copy the code

Props

Component parameters can be declared by introducing a Prop decorator in the following format:

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
Copy the code

<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    @Prop(Number) readonly propA: number | undefined
    @Prop({ default: 'default value'.type: String }) readonly propB: string | undefined
    @Prop([String.Boolean]) readonly propC: string | boolean | undefined
}
</script>
Copy the code

If you don’t want to add undefined every time, you can write:

@Prop(Number) readonly propA! : numberCopy the code

However, be careful not to turn on compileroptions.strict in tsconfig.json.

Watch

Data monitoring can use the Watch decoration circle, in the following format:

@Watch(path: string, options: WatchOptions = {})
Copy the code

<script>
import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    @Watch('child')
    onChildChanged(val: string, oldVal: string) {}

    @Watch('person', { immediate: true.deep: true })
    onPersonChanged1(val: Person, oldVal: Person) {}

    @Watch('person')
    onPersonChanged2(val: Person, oldVal: Person) {}
}
</script>
Copy the code

Is equivalent to

export default {
  watch: {
    child: [{handler: 'onChildChanged'.immediate: false.deep: false],},person: [{handler: 'onPersonChanged1'.immediate: true.deep: true}, {handler: 'onPersonChanged2'.immediate: false.deep: false,}]},methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal){},}}Copy the code

methods

Methods are simple enough to declare as prototype-like methods:

<script>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    hello() {
        console.log('Hello World! ')
    }
}
</script>
Copy the code

component

If additional components need to be introduced into the page, they need to be configured in the decorator @Component.

<template>
  <OtherComponent />
</template>

<script>
import { Vue, Component } from 'vue-property-decorator';

import OtherComponent from './OtherComponent.vue'

@Component(
    components: {
        OtherComponent
    }
)
export default class HelloWorld extends Vue {... }</script>
Copy the code

Life cycle & Hooks

Lifecycle functions and data and render methods can be used directly as class prototype methods:

<script>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    mounted() {
        console.log('mounted')}data() {
        return {
            name: 'tom'}}render() {
       return <div>Hello World!</div>
    }
}
</script>
Copy the code

Model

The format of the model declaration in the component is as follows:

@Model(event? : string,options: (PropOptions | Constructor[] | Constructor) = {})
Copy the code

<script>
import { Vue, Component, Model } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean}) readonly checked! : boolean } </script>Copy the code

$emit(‘change’, XXX); this.$emit(‘change’, XXX);

Mixins

The mixins method needs to be modified in the class declaration:

<script>
import { Vue, Component, Mixins } from 'vue-property-decorator';

import MixinsComponent from './MixinsComponent.vue'

@Component
export default class HelloWorld extends Mixins(MixinsComponent) {... } </script>Copy the code

reference

• Vue and Typescript development