지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Vue 종합 업그레이드 가이드: Composition API에 대한 심층 탐구

Vue 종합 업그레이드 가이드: Composition API에 대한 심층 탐구

Susan Sarandon
풀어 주다： 2024-12-06 07:55:12
원래의
461명이 탐색했습니다.

Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

  • Composition API의 핵심 개념과 기능
    • setup() 함수:
    • 참조 및 반응성:
    • 계산된 속성 및 리스너:
    • 구성 기능
    • 수명주기 후크:
  • Composition API 작성 구성요소
  • Options API에서 Composition API로 마이그레이션
    • 구성요소 구조
    • 의존성 주입
    • 템플릿 리팩토링

Vue 3.x의 포괄적인 업그레이드에는 Vue 2.x의 기존 옵션 API에 비해 크게 개선된 Composition API가 도입되었습니다. 코드를 구성하는 보다 유연하고 모듈화된 방식을 제공합니다.

Composition API의 핵심 개념과 기능

설정() 함수:

Vue 3의 핵심 진입점은 beforeCreate 후크 이후와 create 후크 이전에 실행되는 구성 요소의 상태와 논리를 설정하는 데 사용됩니다. 데이터, 메소드 등 옵션에 원래 정의된 내용을 대체합니다.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
로그인 후 복사
로그인 후 복사

참조 및 반응성:

반응형 데이터를 생성하는 데 사용되는 ref는 기본 유형의 반응형 데이터를 생성하는 데 사용되며, 반응형은 객체 및 배열의 ​​반응형 프록시에 사용됩니다.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
로그인 후 복사
로그인 후 복사

계산된 속성 및 리스너:

computed는 종속성이 변경될 때만 다시 계산되는 계산된 속성을 생성하는 데 사용됩니다.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
로그인 후 복사
로그인 후 복사

watch는 반응형 데이터의 변화를 관찰하고 변화가 발생할 때 콜백을 실행하는 데 사용됩니다.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
로그인 후 복사
로그인 후 복사

구성 기능

Composition API는 재사용 가능한 구성 함수 생성을 권장합니다.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
로그인 후 복사
로그인 후 복사

수명주기 후크:

Vue 3의 수명 주기 후크는 더 이상 setup() 내에서 직접 사용되지 않고 onBeforeMount 및 onMounted와 같은 새로운 수명 주기 후크 기능을 통해 사용됩니다.

1. onBeforeMount: 이 후크는 구성 요소가 DOM에 마운트되기 전에 호출됩니다. 이는 Vue 2.x의 beforeMount 수명주기 후크와 유사합니다.

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
로그인 후 복사
로그인 후 복사

2. onMounted: 컴포넌트가 DOM에 마운트된 직후 호출됩니다. Vue 2.x에 탑재된 것과 동일합니다.

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
로그인 후 복사
로그인 후 복사

3. onBeforeUpdate: 구성 요소 데이터가 업데이트되기 전, DOM 업데이트가 시작되기 전에 호출됩니다. Vue 2.x의 beforeUpdate와 유사합니다.

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
로그인 후 복사
로그인 후 복사

4. onUpdated: 컴포넌트 데이터 변경으로 인한 DOM 업데이트가 완료된 후 호출됩니다. Vue 2.x의 업데이트와 동일합니다.

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
로그인 후 복사
로그인 후 복사

5. onBeforeUnmount: 구성 요소가 제거되기 전에 호출됩니다. Vue 2.x의 beforeDestroy와 유사합니다.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
로그인 후 복사
로그인 후 복사

6. onUnmounted: 구성 요소가 제거된 후 호출됩니다. Vue 2.x에서 소멸되는 것과 동일합니다.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
로그인 후 복사
로그인 후 복사

7. onActivated: 구성 요소가 로 래핑된 경우에만 호출됩니다. 활성화되었습니다.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
로그인 후 복사
로그인 후 복사

8. onDeactivated: 구성 요소가 로 래핑된 경우에만 호출됩니다. 비활성화되었습니다.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
로그인 후 복사
로그인 후 복사

Composition API 작성 구성 요소

  • 반응형 데이터 생성: ref 및 반응형을 사용하여 반응형 변수를 생성합니다.
  • 계산된 속성: 계산된 속성을 생성하려면 계산된 함수를 사용하세요.
  • 반응형 함수: toRefs() 및 toRef()를 사용하여 객체 속성을 반응형으로 변환합니다.
  • 리스너: watch 또는 watchEffect를 사용하여 데이터 변경 사항을 모니터링합니다. 
// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
로그인 후 복사
로그인 후 복사

  • 반응형 데이터 생성: 반응형을 사용하여 cityInput, 도시 및 날씨가 포함된 반응형 객체를 생성합니다. ref는 기본 유형의 반응형 데이터에도 사용할 수 있지만 이 시나리오에서는 여러 상태를 관리하는 데 반응형이 더 적합합니다.

  • 계산 속성: currentCity 계산 속성은 state.cityInput 값을 직접 반환합니다. 이 예에서는 v-model="cityInput"을 직접 사용하는 것이 더 직관적일 수 있지만 계산된 속성을 정의하는 방법을 보여줍니다.

  • 반응형 함수: toRefs를 사용하여 상태 개체의 속성을 템플릿의 직접 바인딩을 위한 독립적인 반응형 참조로 변환합니다. 이는 템플릿에서 직접 구조 분해 할당(예: const { cityInput } = state;)으로 충분하기 때문에 변환 함수 자체보다는 반응형 데이터의 사용을 주로 보여줍니다.

  • 청취자: watch를 사용하여 cityInput의 변경 사항을 듣고 입력이 변경될 때마다 날씨 상태를 지워 다음에 쿼리할 수 있도록 합니다.

Options API에서 Composition API로 마이그레이션

구성 요소 구조

상태, 메소드, 로직을 별도의 함수로 분리합니다. 옵션 API에서는 일반적으로 구성 요소 옵션에 데이터, 메서드, 계산 등을 정의합니다. Composition API에서 이러한 논리는 별도의 함수로 구분됩니다. 예:

옵션 API:

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
로그인 후 복사
로그인 후 복사

컴포지션 API:

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
로그인 후 복사
로그인 후 복사

의존성 주입

제공 및 주입을 사용하세요. 옵션 API에서는 데이터 전달을 위해 제공 및 주입을 사용합니다. Composition API에서 이 프로세스는 동일하게 유지됩니다.

옵션 API:

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
로그인 후 복사
로그인 후 복사

컴포지션 API:

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
로그인 후 복사
로그인 후 복사

템플릿 리팩토링

여기에서 바인딩된 속성과 메서드를 직접 참조로 변환합니다.

위 내용은 Vue 종합 업그레이드 가이드: Composition API에 대한 심층 탐구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：Await Promise.all() 대 Multiple Await: 언제 어느 것을 사용해야 합니까? 다음 기사：텍스트 상자에서 JavaScript의 Enter 키를 사용하여 버튼 클릭을 트리거하는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2165
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2313
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1950
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1826
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1879
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿