Vue 3의 메소드를 적용하고 라이프사이클 원리를 이해하는 방법

원칙 개요

Vue 3의 라이프사이클은 구성 요소가 생성부터 소멸까지 거치는 일련의 이벤트를 의미합니다. 이러한 이벤트 중에 데이터 초기화, 뷰 렌더링, 비동기 데이터 로드 등과 같은 일부 작업이 수행될 수 있습니다. . Vue 3에서는 구성 요소의 수명 주기가 setup() 함수를 통해 정의됩니다.

인스턴스 분석

Vue 3의 라이프 사이클에는 다음 단계가 포함됩니다.

1. beforeCreate

는 인스턴스가 생성되기 전, 즉 초기화 전에 호출됩니다. 이때는 컴포넌트 인스턴스가 초기화되지 않은 상태로 데이터, 메소드, 계산 등의 속성에 접근할 수 없으며, 컴포넌트 상태가 초기화되기 전에 일부 작업이 수행됩니다.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2.created

는 인스턴스가 생성된 후, 즉 초기화 후에 호출됩니다. 이 시점에서 데이터 관찰 등의 구성은 완료되었지만 아직 DOM이 마운트되지 않았으며 데이터, 메서드, 계산 등의 속성에 접근할 수 있습니다. 생성된 Hook 기능을 이용하여 데이터 초기화, 이벤트 모니터링 등의 작업을 수행할 수 있습니다.

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

는 마운트가 시작되기 전에 호출됩니다. 이 단계에서는 실제 DOM 노드가 아직 렌더링되지 않았습니다. beforeMount 후크 함수를 사용하면 구성 요소가 마운트되기 전에 애니메이션 로드와 같은 일부 비동기 작업을 수행할 수 있습니다.

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4.mounted

는 마운팅이 완료된 후 호출됩니다. 이 시점에서 구성 요소는 실제 DOM을 렌더링했습니다. 마운트된 후크 기능은 참조를 통해 DOM 노드를 획득하고 이벤트 리스너를 등록하는 등 서버와 상호 작용한 후 DOM 작업을 초기화하고 구성 요소 데이터를 채우는 데 자주 사용됩니다.

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

는 데이터가 업데이트되기 전에 호출됩니다. 이 시점에서 업데이트하기 전에 이전 데이터 상태에 액세스할 수 있습니다. beforeUpdate 후크 함수를 사용하면 구성 요소 데이터가 업데이트되기 전에 클래스 및 스타일의 동적 바인딩 등과 같은 일부 작업을 수행할 수 있습니다.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6.update

는 데이터가 업데이트된 후 호출됩니다. 이 시점에서 구성 요소는 DOM을 업데이트했으며 최신 데이터 상태에 액세스하여 DOM 작업을 완료할 수 있습니다. 업데이트된 후크 기능을 사용하면 구성 요소 데이터가 업데이트된 후 애니메이션 효과 트리거 등과 같은 일부 작업을 수행할 수 있습니다.

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

는 구성 요소가 마운트 해제되기 전에 호출됩니다. 이 시점에서 구성 요소 인스턴스는 여전히 완전히 사용 가능하지만 해당 뷰는 삭제되어 더 이상 업데이트되지 않습니다. beforeUnmount 후크 함수를 사용하면 구성 요소가 마운트 해제되기 전에 이벤트 리스너, 타이머 및 비동기 요청 취소와 같은 일부 정리 작업을 수행할 수 있습니다.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8.unmounted

는 구성 요소가 마운트 해제된 후에 호출됩니다. 이 시점에서 구성 요소 인스턴스 및 관련 DOM 요소가 모두 삭제되었으며 구성 요소의 내부 데이터 및 메서드에 더 이상 액세스할 수 없습니다. 마운트 해제된 후크 기능을 사용하여 구성 요소가 마운트 해제된 후 일부 최종 정리 작업을 수행할 수 있습니다.

export default {
  unmounted() {
    console.log('unmounted');
  }
}

활성화, 비활성화, errorCaptured 등과 같은 일부 수명 주기 기능이 Vue 3에서 제거되었으며 새 Composition API를 통해 구현할 수 있습니다.

위 내용은 Vue 3의 메소드를 적용하고 라이프사이클 원리를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!