Vue2.0+ ts（TypeScript）常用装饰器

装饰器
一、前言
二、装饰器
三、常用装饰器使用方式
1、@Component 和 @Prop 装饰器
2、@Emit 装饰器
3、@Model 装饰器
4、@Watch 装饰器
5、@Provide 装饰器 和 @Inject 装饰器
6、@PropSync
一、前言
在构建完项目之后，上一篇构建地址 ，打开src/components/HelloWorld.vue，将会发现写法已大有不同，如图

看到上面代码引入了vue-property-decorator 它是依赖于 vue-class-component

Install

        npm i -S vue-property-decorator
        //如果是直接用vuecli+ts构建的话,已经有依赖

二、装饰器
1、vue-property-decorator 装饰器有几个装饰器和1个功能（Mixin）：
- @Prop
- @PropSync
- @model
- @Watch
- @Provide
- @inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @Component (由vue-class-component提供)
- Mixins (由vue-class-component提供的名为Mixins的助手函数)

2、vuex-class的装饰器
- @State
- @Getter
- @Action
- @Mutation

三、常用装饰器使用方式
1、@Component 和 @Prop 装饰器
@Component 装饰器是用以声明子组件
@Prop 装饰器是用以接收来自父组件的数据

1)父组件

<template>
  <div class="home">               
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>            
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src                
    @Component({
      components: {HelloWorld,},
    })
    export default class Home extends Vue {}
</script>

2）子组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;    // ! 表示确定msg有值
}
</script>

//----------------------------------------------------
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;    // ! 表示确定msg有值  
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
// 上面的类似于☟
export default {
  props: {
    msg: {
      type: String,
      default: '',
    },
    propA: {
      type: Number,
    },
    propB: {
     type: String,
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  },
}

2、@Emit 装饰器
@Emit 装饰器是用以子组件触发父组件的自定义事件。

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
//子组件里面的定义
  count = 0
  @Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

  @Emit()
  returnValue() {
    return 10
  }

  @Emit()
  onInputChange(e) {
    return e.target.value
  }

  @Emit()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}
//-----------------------------------类似于
export default {
//子组件里面的定义
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })
      promise.then((value) => {
        this.$emit('promise', value)
      })
    },
  },
}

3、@Model 装饰器
@Model 装饰器是用以组件上实现双向绑定
1)父组件

<template>
  <div class="home">
      <div>
        <h1>@Model - 组件上实现双向绑定</h1>
        <button type="primary" @click="onAlterFoo">父组件改变foo</button>
        <HelloWorld v-model="foo"></HelloWorld>
      </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Model } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({ components: { HelloWorld } })
export default class ModelComponent extends Vue {
  private foo: boolean = true;
  private onAlterFoo() {
    this.foo = !this.foo;
  }
}
</script>

2）子组件

<template>
  <div>
    <h1>{{checked}}</h1>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Model, Prop } from 'vue-property-decorator';    
@Component
export default class ModelComponent extends Vue {
  @Model('change', { type: Boolean }) private checked!: boolean;
}
</script>

//类似于
export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

4、@Watch 装饰器
@Watch 装饰器是用以监控数据是否改变。

    <template>
      <div>
        <h1>@Watch用以监控数据是否改变</h1>
        <input v-model="dataWatch" placeholder="请输入内容"></input>
        <p>当前值：{{ newVal }} 原来值：{{ oldVal }}</p>
      </div>
    </template>    
    <script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator';    
    @Component
    export default class datasWatch extends Vue {
      private dataWatch: number | null = null;
      private newVal : number | null = null;
      private oldVal: number | null = null;    
      @Watch('dataWatch')
      private onChanged(newVal : number, oldVal: number): void {
        this.newVal = newVal ;
        this.oldVal = oldVal;
      }
    }
    </script>

5、@Provide 装饰器 和 @Inject 装饰器
@Provide 装饰器是用以注入数据
@Inject 装饰器是用以获取注入的数据
1）父组件 @Provide

<template>
  <div>
    <h1>@Provide/@Inject -接收来自父组件的数据</h1>
    父组件通过依赖注入赋予的值是：{{ foo }}
    <ProvideInject></ProvideInject>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
import ProvideInject from '@/components/HelloWorld.vue';
@Component({ components: { ProvideInject } })
export default class Home extends Vue {
  @Provide('bar') private foo = '111';
}
</script>

2）子组件 @Inject

<template>
  <div>
    子组件通过依赖注入接收的值是：{{ bar }}
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator';
@Component
export default class ProvideInject extends Vue {
  @Inject() private readonly bar!: string;
}
</script>

6、@PropSync
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator
import { Vue, Component, PropSync } from ‘vue-property-decorator’

@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}
//-------------------is equivalent to
export default {
  props: {
    name: {
      type: String,
    },
  },
  computed: {
    syncedName: {
      get() {
        return this.name
      },
      set(value) {
        this.$emit('update:name', value)
      },
    },
  },
}