vue + ts 装饰器的合理使用

装饰器

什么是装饰器？

内裤可以用来遮羞，但是到了冬天它没法为我们防风御寒，聪明的人们发明了长裤，有了长裤后宝宝再也不冷了，装饰器就像我们这里说的长裤，在不影响内裤作用的前提下，给我们的身子提供了保暖的功效。装饰器本质上是一个函数，它可以让其他函数在不需要做任何代码变动的前提下增加额外功能，装饰器的返回值也是一个函数对象。

vue项目

import { Vue, Component, Prop } from 'vue-property-decorator'

@PropSync

补充.sync 修饰符

数据双向绑定，一般使用prop 父组件传值到子组件，子组件不允许修改

但是使用.sync ,子组件可以对父组件传入的值进行修改，并传回给父组件

实现真正意义上的数据双向绑定！

   ```
   // 写法
   <text-document v-bind:title.sync="doc.title"></text-document>
   ```

实例代码

a.父组件：

  ```
  <match-list v-show="active === 0" :committee_id.sync="committee_id" @next="next" />


   @Component({
      components: {
        MatchList
      }
    })
    export default class extends Mixins(···) {
        private committee_id = '-1' // 赛会id

        ···

    }
    </script>
  ```



    b.子组件：  


  ```
  @PropSync('committee_id', { type: String }) syncedCommitteeId!: string


  /*
   * 这里给传入的值 赋值， 同时父组件的也会改变
   */
  select(e) {
    this.active = e.target.dataset.index
    this.syncedCommitteeId = e.target.dataset.id
  }
  ```

@PropSync原理

这个装饰器增加了emit ，相当于我们在子组件改变了值，再通过emit传给父组件

而我们不用额外的多写代码，就增加了额外功能

   ```
   export default {
       props: {
         name: {
           type: String
         }
       },
       computed: {
         syncedName: {
           get() {
             return this.name
           },
           set(value) {
             this.$emit('update:name', value)
           }
         }
       }
     }
   ```

注意点

@PropSync需要配合父组件的.sync修饰符使用

@Watch

深度监听

    ```
    @Watch(···, { deep: true })
    ```

直接写在某个方法上，不用特意定义新的方法

例

      ```
      created() {
        this.handleFilter()
      }

      /**
       * @description 列表过滤方法
       */
      @Watch('formFilter', { deep: true })
      public handleFilter() {
        ···
      }
      ```

@Debounce

防抖