¡Ey! Soy Hossein Mousavi , ingeniero front-end en Alibaba Travels , y en esta historia mediana, refactorizaremos un componente Vue paso a paso y lo mejoraremos. ¡¿Así que empezamos?!

¿Qué es la configuración de secuencias de comandos?

<script setup>es un azúcar sintáctico en tiempo de compilación para usar la API de composición dentro de los componentes de un solo archivo ( SFC ). Es la sintaxis recomendada para usar tanto SFC como API de composición. Todo lo que necesita hacer es agregar setupcomo un atributo de script. Para evitar confusiones, solo está disponible para los componentes SFC y no puede usarlo con el srcatributo para archivos .js o .ts externos . Proporciona una base de código más eficiente y un mejor rendimiento en tiempo de ejecución. Discutiremos sus beneficios en un segundo, pero primero, profundicemos en su implementación. Tomamos un componente simple con la opción API y luego lo refactorizamos en un componente de secuencia de comandos de configuración con API de composición. ¡Pongámonos manos a la obra entonces!

Implementación

Primero, echemos un vistazo a un componente estándar de Vue con la API de opciones. Puede encontrar este tipo de componentes en las aplicaciones de Vue 2 fácilmente.

<template>
  <input v-model="name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1> {{ computedVariable }} </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "Hossein",
      age: 26,
    };
  },

  computed: {
    computedVariable() {
      return `My name is ${this.name} and I'm ${this.age} years old`;
    },
  },

  methods: {
    incrementAge() {
      this.age += 1;
    },
  },
};
</script>

Este es un componente simple con un enfoque en conceptos de enlace de datos bidireccional y queremos refactorizar este componente en varios pasos.

Paso 1 de refactorización: uso de la API de composición

Para usar la API de composición, necesitamos usar un gancho especial llamado: la función de configuración . Pero necesitamos manejar algunas cosas para que nuestro componente funcione correctamente.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const user = reactive({ name: "Hossein", age: 26 });

    function incrementAge() {
      user.age++;
    }

    const computedVariable = computed(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
};
</script>

• Hemos importado computedy reactivede vue. Estoy escribiendo otra historia de Medium para cubrir la reactividad de Vue 3 en profundidad.
• Como puede ver, tenemos una setupfunción en la que se han almacenado todas nuestras variables y funciones. Si desea utilizar sus variables o funciones dentro de su plantilla, debe exponerlas devolviéndolas al final de la función.
• Como computedVariablepuede ver, está utilizando Vue calculado como una función de flecha.
• La razón por la que todas las variables reactivey computedestán usando consty no letes que tienen un getter y un setter dentro de ellas y están usando el Proxy de JavaScript para cambiar los datos dentro de su referencia. Por lo tanto, no necesitamos volver a instanciarlos.

Paso 2 de refactorización: uso de defineComponent

Personalmente, creo que siempre debe usar TypeScript para todos sus proyectos, especialmente si no es el único mantenedor/desarrollador del proyecto. Al usar TypeScript, su código se volvería predecible tanto para máquinas como para humanos y sigo practicando fuertemente la escritura de código predecible en mi proyecto. defineComponent es un ayudante de tipos para definir un componente Vue con inferencia de tipos. Vamos a ver:

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script lang="ts">
import { 
   defineComponent,
   computed,
   reactive,
   type Computed,
   type Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

interface ComponentOutput {
  computedVariable: Computed<string>;
  incrementAge: () => void;
  user: Reactive<User>;
}

export default defineComponent({
  setup(): ComponentOutput {
    const user = reactive<User>({ name: "Hossein", age: 26 });

    function incrementAge(): void {
      user.age++;
    }

    const computedVariable = computed<string>(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
});
</script>

• Primero, debemos declarar explícitamente que el lenguaje que queremos usar es TypeScript agregando un atributo llamado langy establecido tscomo su valor.
• Entonces, como puede ver, defineComponentes una función que toma la función de configuración como argumento. Si nuestro componente necesita accesorios, emitir u otras opciones, también podemos pasarlas como argumento. Echaremos un vistazo a un componente más complicado más adelante.
• Hemos creado dos interfaces para el usuario y el resultado del componente. Aunque escribir el tipo de retorno para la función de configuración no es tan común, lo he escrito con fines educativos .
• Hemos importado dos tipos de vue. Ambos comienzan con una letra mayúscula: Computedy Reactive. Estos dos tipos tienen un genérico como puedes ver. Necesitamos declarar explícitamente su tipo genérico.

Paso 3 de refactorización: uso de la configuración de secuencias de comandos

Ahora es el momento de que usemos el setupscript. Echemos un vistazo al código de abajo primero y luego lo analizaremos.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()">Increment Age</button>
  <h1>{{ computedVariable }}</h1>
</template>

<script setup lang="ts">
import { computed, reactive, Computed, Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

const user = reactive<User>({ name: "Hossein", age: 26 });

function incrementAge(): void {
  user.age++;
}

const computedVariable = computed<string>(
  () => `My name is ${user.name} and I'm ${user.age} years old`
);
</script>

• Una vez que lo escribe, no hay necesidad de usar ningún setup()método o defineComponentdentro de su código. El Vue los maneja a ambos por nosotros.
• Tenga en cuenta que no es necesario devolver los valores o funciones que desea utilizar dentro de su plantilla. Cada función y variable que se usa dentro de su plantilla automáticamente regresará de su sección de script.

Estoy usando la configuración del script en gran medida de forma regular. Lo he encontrado extremadamente útil y fácil de leer y conduce a un código mucho más ligero.

¡Compartir con tus amigos! Aplauda como máximo 50 veces.

Por favor, no dude en compartir sus pensamientos e ideas conmigo. Puede ponerse en contacto conmigo en Twitter o encontrar otra forma visitando mi cartera .

Leer más de mí: