VueJS 라이프사이클 및 Hook 기능 적용에 대한 자세한 설명

이 글에서는 VueJS의 라이프 사이클과 Hook functions 적용에 대해 설명합니다. VueJS의 라이프 사이클과 Hook 기능 적용에 대해 잘 모른다면 이 글을 함께 살펴보세요. 알았어 헛소리는 그만하고 본론으로 들어가자

안녕 친구들! 다행스럽게도 내 기사를 볼 수 있으므로 지금은 vuejs의 수명주기에 대해 더 대중적으로 이해하고 실제 개발에서 일부 후크 기능의 적용 시나리오를 알고 싶을 것입니다. 바로 아래에 그려보세요.

1. vue의 라이프 사이클

간단히 말해서, 라이프 사이클은 사물의 생성부터 소멸까지의 시간 과정입니다. 그런 다음 vue의 수명 주기는 생성 시작, 데이터 초기화, 템플릿 컴파일, DOM 마운트(렌더링), 렌더링->업데이트->렌더링, 파괴(제거) 등을 포함하는 생성부터 파괴까지의 프로세스입니다. 프로세스.

그러면 후크 함수는 자체 책임을 집니다. 더 일반적으로 사용되는 함수는 관련 비즈니스 로직을 함수에 작성할 수 있는 것입니다.

2. 후크 함수

beforeCreate

은 인스턴스 초기화, 데이터 관찰 및 event 이후, 수명 주기 초기화 구성 이전에 호출됩니다.

created

은 인스턴스가 생성된 후에 호출됩니다. 이 단계에서 인스턴스는 데이터 관찰, 속성 및 메서드에 대한 작업, 이벤트 콜백 구성을 완료했습니다. 그러나 마운팅 단계가 아직 시작되지 않았으며 $el 속성은 현재 표시되지 않습니다.

beforeMount

은 마운트가 시작되기 전에 호출됩니다. 관련 렌더 함수가 처음으로 호출되고, 가상 DOM이 있습니다.

mounted

el은 새로 생성된 vm.$el로 대체되고 인스턴스에 마운트됩니다. 이 후크를 호출한 후 실제 DOM으로 렌더링됩니다.

beforeUpdate

은 데이터가 업데이트되기 전에 호출됩니다. 이는 가상 DOM이 다시 렌더링되고 패치되기 전에 발생합니다. 추가로 다시 렌더링 프로세스를 트리거하지 않는 이 후크에서 상태를 추가로 변경할 수 있습니다.

업데이트

이 후크는 데이터 변경으로 인해 가상 DOM을 다시 렌더링하고 패치한 후에 호출됩니다.

이 Hook이 호출되면 컴포넌트 DOM이 업데이트되었으므로 이제 DOM에 의존하는 작업을 수행할 수 있습니다. 그러나 대부분의 경우 이 기간 동안 상태를 변경하면 업데이트가 무한 루프될 수 있으므로 피해야 합니다.

참고: 이 후크는 서버 측 렌더링 중에는 호출되지 않습니다.

beforeDestroy

인스턴스가 삭제되기 전에 호출됩니다. 이 시점에서는 인스턴스를 계속 사용할 수 있습니다.

destroyed

vue는 인스턴스가 삭제된 후에 호출됩니다. 호출 후에는 vue 인스턴스에 표시된 모든 것이 바인딩 해제되고, 모든 이벤트 리스너가 제거되고, 모든 하위 인스턴스가 삭제됩니다.

참고: 이 후크는 서버 측 렌더링 중에는 호출되지 않습니다.

관련 추천:

Vuejs 검색 매칭 기능 예시 상세 설명

위 내용은 VueJS 라이프사이클 및 Hook 기능 적용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!