vue + ts 装饰器的合理使用

装饰器

什么是 装饰器？

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

vue项目

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

• @PropSync

1. 补充.sync 修饰符

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

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

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

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

2. 实例代码

   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
  }
  ```

3. @PropSync原理

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

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

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

4. 注意点

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

• @Watch

1. 深度监听

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

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

   例

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

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

• @Debounce

  防抖