여기요! 저는 Alibaba Travels 의 프론트엔드 엔지니어인 Hossein Mousavi 입니다 . 이 매체 스토리에서는 Vue 구성 요소를 단계별로 리팩토링하고 향상시킬 것입니다. 그럼 시작할까요?!

스크립트 설정이란 무엇입니까?

<script setup>SFC (Single-File Components) 내에서 Composition API를 사용하기 위한 컴파일 타임 구문 설탕입니다 . SFC와 Composition API를 모두 사용하기 위한 권장 구문입니다. 의 속성으로 추가하기만 하면 됩니다 . 오해의 소지가 없도록 SFC 구성 요소에만 사용할 수 있으며 외부 .js 또는 .ts 파일에 대한 속성과 함께 사용할 수 없습니다. 더 간결한 코드 기반과 더 나은 런타임 성능을 제공합니다. 그 이점에 대해서는 잠시 후에 논의하겠지만 먼저 구현에 대해 자세히 살펴보겠습니다. 옵션 API를 사용하여 간단한 구성 요소를 가져온 다음 구성 API를 사용하여 설정 스크립트 구성 요소로 리팩터링합니다.setupscriptsrc. 그럼 사업을 시작합시다!

구현

먼저 Option API를 사용하여 표준 Vue 구성 요소를 살펴보겠습니다. Vue 2 애플리케이션에서 이러한 종류의 구성 요소를 쉽게 찾을 수 있습니다.

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

이것은 양방향 데이터 바인딩 개념에 중점을 둔 간단한 구성 요소이며 이 구성 요소를 여러 단계로 리팩터링하려고 합니다.

리팩터링 1단계: Composition API 사용

컴포지션 API를 사용하려면 설정 함수 라는 특수 후크를 사용해야 합니다 . 그러나 구성 요소가 제대로 작동하려면 몇 가지 사항을 처리해야 합니다.

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

• computed우리는 vue에서 가져 왔습니다 reactive. 저는 Vue 3 반응성을 깊이 있게 다루기 위해 또 다른 미디엄 스토리를 작성하고 있습니다.
• 보시 setup다시피 모든 변수와 함수가 저장되어 있는 함수가 있습니다. 템플릿 내에서 변수나 함수를 사용하려면 함수 끝에서 반환하여 노출해야 합니다.
• 보시 computedVariable다시피 화살표 함수로 계산된 Vue를 사용하고 있습니다.
• 모든 reactive및 computed변수가 사용 const하고 사용하지 않는 이유 let는 내부에 getter 및 setter가 있고 JavaScript의 프록시를 사용하여 참조 내에서 데이터를 변경하기 때문입니다. 따라서 다시 인스턴스화할 필요가 없습니다.

리팩터링 2단계: defineComponent 사용

나는 개인적으로 특히 당신이 프로젝트의 유일한 관리자/개발자가 아닌 경우 모든 프로젝트에 항상 TypeScript를 사용해야 한다고 생각합니다. TypeScript를 사용하면 기계와 인간 모두가 코드를 예측할 수 있으며 저는 제 프로젝트에서 예측 가능한 코드를 작성하는 방법을 강력하게 따릅니다. defineComponent 는 유형 유추로 Vue 구성 요소를 정의하기 위한 유형 헬퍼입니다. 확인 해보자:

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

• 먼저, 라는 속성을 추가하고 해당 값으로 lang설정하여 사용하려는 언어가 TypeScript임을 명시적으로 선언해야 합니다 .ts
• 그런 다음 보시 defineComponent다시피 설정 함수를 인수로 취하는 함수입니다. 구성 요소에 props, emit 또는 몇 가지 다른 옵션이 필요한 경우 인수로도 전달할 수 있습니다. 나중에 더 복잡한 구성 요소를 살펴보겠습니다.
• 우리는 사용자와 구성 요소의 결과에 대한 두 가지 인터페이스를 만들었습니다 . setup함수에 리턴타입을 쓰는 일이 그리 흔한 일은 아니지만 교육적인 목적으로 작성했습니다 .
• 에서 두 가지 유형을 가져왔습니다 vue. 둘 다 대문자로 시작합니다: Computed및 Reactive. 이 두 가지 유형에는 보시다시피 제네릭이 있습니다. 제네릭 형식을 명시적으로 선언해야 합니다.

리팩터링 3단계: 스크립트 설정 사용

이제 스크립트를 사용할 차례입니다 setup. 먼저 아래 코드를 살펴보고 분석해 보겠습니다.

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

• 일단 적어두면 setup()방법이나 defineComponent코드 내부를 사용할 필요가 없습니다. Vue는 우리를 위해 둘 다 처리합니다.
• 템플릿 내에서 사용하려는 값이나 함수를 반환 할 필요가 없습니다 . 템플릿 내에서 사용되는 모든 함수와 변수는 스크립트 섹션에서 자동으로 반환됩니다.

나는 정기적으로 스크립트 설정을 많이 사용하고 있습니다. 나는 그것이 매우 유용하고 읽기 쉽고 훨씬 더 간결한 코드로 이어진다는 것을 알았습니다.

친구들과 공유하세요! 박수 최대 50회.

주저하지 마시고 여러분의 생각과 아이디어를 저와 공유해 주십시오. Twitter 에서 저에게 연락하거나 제 포트폴리오를 방문하여 다른 방법을 찾을 수 있습니다 .

나에게서 더 읽어보기:

JavaScript 프로젝트용 Husky 6 Lint(prettier + eslint) 및 commitlint JavaScript에서 필터, 매핑 및 축소 자세히 살펴보기