Vue 라이프 사이클이란 무엇입니까?

Vue에서 라이프 사이클은 Vue 인스턴스 객체의 생성부터 소멸까지의 과정을 의미합니다. Vue의 모든 기능은 라이프사이클을 중심으로 구현됩니다. 해당 후크 함수는 컴포넌트 데이터 관리와 DOM 렌더링이라는 두 가지 중요한 기능을 실현하기 위해 라이프사이클의 여러 단계에서 호출됩니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue 수명주기는 무엇인가요?

vue는 데이터 기반 웹 인터페이스를 구축하기 위한 진보적인 프레임워크라는 것을 알고 있습니다. 그러면 vue의 수명주기는 무엇입니까?

vue 라이프 사이클은 vue 인스턴스 객체의 생성부터 소멸까지의 과정을 의미합니다. 모든 vue 함수의 구현은 라이프 사이클의 여러 단계에서 호출됩니다. 컴포넌트 데이터 관리 및 DOM을 구현합니다. 렌더링에는 두 가지 중요한 기능이 있습니다.

공식 웹사이트에서 제공하는 vue 라이프 사이클 다이어그램:

이 다이어그램을 사용하여 vue의 라이프 사이클을 자세히 설명하겠습니다.

vue의 라이프 사이클은 8단계로 나뉩니다:

1. )

이 단계는 인스턴스가 초기화된 후의 시점으로, 데이터 관찰 및 이벤트 메커니즘이 형성되지 않았으며 DOM 노드를 얻을 수 없습니다.

2. 생성(생성) 후

이 단계에서 인스턴스는 데이터 관찰, 속성 및 메소드 작동, 감시/이벤트 이벤트 콜백, 데이터 초기화 완료 등의 구성을 완료했지만 el은 완료하지 않았습니다. 그러나 hang 단계는 아직 시작되지 않았으며 $el 속성은 현재 보이지 않습니다. 이는 메소드에서 메소드를 호출하고 데이터의 데이터를 변경할 수 있으며 수정 사항은 Vue의 반응형을 통해 반영될 수 있기 때문에 일반적으로 사용되는 라이프 사이클입니다. 페이지에서 계산된 속성을 가져옵니다. 일반적으로 여기에서 인스턴스를 사전 처리할 수 있습니다. 일부 어린이는 여기에서 인스턴스를 사전 처리할 방법이 없다는 점에 유의할 가치가 있습니다. 프로세스를 가로채기 때문에 페이지에 진입하기 전에 얻어야 하는 데이터가 있는 경우 이 방법으로 요청을 보내는 것은 적합하지 않습니다.RouteEnter

전에 컴포넌트 라우팅 후크에서 완료하는 것이 좋습니다. (beforeMount)

Hang이 시작되기 전에 호출되고 관련 render 함수가 처음으로 호출됩니다(가상 DOM). 인스턴스는 다음 구성을 완료했습니다. 템플릿을 컴파일하고 데이터의 데이터에서 html을 생성합니다. 템플릿을 작성하고 el 및 데이터의 초기화를 완료합니다. 이때 html은 페이지에 첨부되지 않습니다.

4. 로딩(마운트) 후

마운트가 완료됩니다. 즉, 템플릿의 HTML이 페이지에 렌더링됩니다. 이때 일반적으로 일부 Ajax 작업을 수행할 수 있으며 마운트만 실행됩니다. 한 번.

5. BeforeUpdate(beforeUpdate)

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

6. 업데이트 후(업데이트)

데이터에 정의된 데이터가 변경되면 업데이트된 메서드가 로드됩니다.

7. 파괴 전(beforeDestroy)

이 단계를 사용하여 인스턴스를 가져올 수도 있습니다. , 일반적으로 이 단계에서는 구성 요소의 타이머 및 모니터링되는 DOM 이벤트를 지우는 등 일부 재설정 작업이 수행됩니다.

8. 파괴 후(파괴됨)

은 인스턴스가 파괴된 후 호출됩니다. 호출, 모든 이벤트 리스너가 제거되고 모든 하위 인스턴스가 삭제됩니다. 이 후크는 서버 측 렌더링 중에 호출되지 않습니다.

요약: vue의 라이프 사이클 아이디어는 구성 요소의 전체 개발을 통해 실행됩니다. 라이프사이클 호출에 익숙해지기 다양한 후크 기능을 사용하여 데이터 흐름과 DOM에 미치는 영향을 정확하게 제어할 수 있습니다. vue 라이프사이클의 아이디어는 Vnode 및 MVVM의 생생한 구현이자 상속입니다.

【관련 추천: "vue.js tutorial"】

위 내용은 Vue 라이프 사이클이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!