decorador ts

Decorador: Decorador es un tipo de gramática relacionada con las clases, que se utiliza para anotar o modificar los atributos de las clases y métodos de clase. Los decoradores generalmente están relacionados con las clases de clase. No utilice funciones ordinarias.

La esencia del decorador es una función, puede agregar algunas otras cosas a la clase, atributo o método para extender la función.

El modificador cambia el comportamiento de la clase cuando se compila el código (no en la compilación de TypeScript, sino en la etapa de compilación js en la máquina de ejecución), no en tiempo de ejecución. Esto significa que el decorador puede ejecutar el código durante la fase de compilación. En otras palabras, el decorador es esencialmente una función que se ejecuta en tiempo de compilación.
En el entorno Node.js, el módulo se ejecutará tan pronto como se cargue

(1) Ejemplo:

function decorator (target:any, key:any, descriptor:any) {
  console.log(target)
  console.log(key)
  console.log(descriptor)
}


class Test {
  private name:string;
  constructor(name:string) {
    this.name = name
  }
  @decorator
  getName () {
    return this.name
  }
}

Ejecute el archivo: ts-node index.ts

Ejecutará la función decoradora

Salida:

Veamos estos tres parámetros del decorador:

target: Sobre quién actúa, es el constructor de la clase para miembros estáticos y el objeto prototipo de la clase para miembros de instancia;

clave: miembro del rol

descriptor: el descriptor de atributo del miembro, donde valor es el cuerpo del método

Este es el uso más básico del decorador, el contenido del decorador se ejecutará cuando llegue para la inicialización.

(2) Pasar valor a través del decorador

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
function decorator (params:Object) {
  return function (target:any, key:any, descriptor: any) {
    descriptor.value = () => {
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

Al reescribir el cuerpo del método en el decorador, puede agregar operaciones adicionales al método decorado, ejecutar este código y encontrar que solo se ejecuta la reescritura del decorador y que no hay un método de ejecución definido, por lo que debe reescribirse en la función Agregar la operación de función original

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
const decorator = (params:Object) => {
  // 返回的函数是装饰器函数
  return (target:any, key:any, descriptor: any) => {
    var origin = descriptor.value // 保留原来的方法
    descriptor.value = function (...args:any[]) {
      origin.apply(this, ...args)
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

Esto se puede ejecutar juntos

para resumir:

(1) El decorador de la clase: el decorador puede ser llamado antes que la clase, como @Component. Al decorar la clase, generalmente involucra un parámetro objetivo

(2) Decorador de métodos: esta vez implica tres parámetros objetivo, clave, descriptor

(3) Decorador para nombres de variables