vue 수명주기의 여러 단계

4개의 주요 단계가 있습니다. 1. beforeCreate(생성 전) 및 생성(생성 후) 두 개의 작은 단계를 포함하는 초기화 단계 2. beforeMount(로드 전) 및 마운트(로드 후)를 포함한 마운트 단계. 3. beforeUpdate(업데이트 전) 및 업데이트(업데이트 후) 두 개의 작은 단계를 포함하는 업데이트 단계 4. 파괴 단계, beforeDestroy(파괴 전) 및 파괴(파괴 후).

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

라이프 사이클은 구성 요소 생성부터 파괴까지의 전체 프로세스입니다. 즉, 생성 시작, 데이터 초기화, 템플릿 컴파일, Dom 마운트 → 렌더링, 업데이트 → 렌더링, 제거 등의 일련의 프로세스를 Vue의 라이프 사이클이라고 부릅니다.

라이프 사이클 후크 기능 특정 시점에 자동으로 실행되는 기능은 특정 시점에 특정 작업을 수행하는 데 사용됩니다.

총 11개의 Vue 라이프 사이클이 있습니다. 일반적으로 일반적으로 사용되는 단계와 일반적으로 사용되지 않는 단계에 대해 이야기하겠습니다.

공식 사진 마을 건물로 먼저 오세요:

우리가 일반적으로 사용하는 것은 크게 4가지 단계와 8가지 방법으로 나눌 수 있습니다.

1. 초기화 단계

1 beforeCreate (before 생성) )

                                                                                                                                                                                          이벤트 전/참관자 구성이 호출됩니다. ㅋㅋ                                                                                    vue(컴포넌트) 객체를 생성할 수 있지만 데이터 속성과 같은 vue 객체의 속성이 아직 바인딩되지 않았거나 계산된 속성이 바인딩되지 않았습니다. 즉, 값이 없습니다.

2.

created

(생성 후) vue 객체의 속성에는 값이 있지만 DOM이 아직 생성되지 않았으며

$el

속성이 아직 존재하지 않습니다. 이때 데이터가 있는데, 보통 이 Hook 함수에서 데이터를 얻습니다. 그러나 이때는 dom 구조가 파싱되지 않아 dom을 동작시킬 수 없습니다.

2. 마운팅 단계

3.

beforeMount (beforeload)

전화: 관련 렌더링 함수가 처음으로 호출되었습니다. 부르다. 이 단계에서는 vue 인스턴스의 $el과 data가 모두 초기화됩니다. 이때 this.$el에는 값이 있지만 이전 가상 DOM 노드에는 여전히 마운트되어 있고 data.message는 교체되지 않았습니다. 데이터가 아직 페이지에 로드되지 않았습니다. 4.

mounted

(로딩 후) mounted

단계에서는 vue 인스턴스가 마운트되고 data.message가 성공적으로 렌더링됩니다. 즉, 현재 페이지에 데이터 기반이 탑재되었으므로 페이지에서 올바른 데이터를 볼 수 있습니다. 일반적으로 우리는 서버에서 데이터를 가져와 DOM에 표시하기 위해 여기로 비동기 요청(ajax, fetch, axios 등)을 보냅니다.

3. 업데이트 단계

5.

beforeUpdate

(업데이트 전) 데이터가 업데이트될 때 호출되며,

vue(컴포넌트) 개체에 해당하는 DOM의 내부(innerHTML) 아직 변경되지 않았으며, 추가된 이벤트 리스너를 수동으로 제거하는 등 업데이트하기 전에 기존 DOM에 액세스하는 데 적합합니다. 서버측에서는 초기 렌더링만 발생하므로 서버측 렌더링 중에는 이 후크가 호출되지 않습니다. D6.

Updated (업데이트 후)

데이터 변경으로 인해 가상 DOM이 다시 렌더링되고 패치되며 이후 Hook이 호출됩니다.

4. 파괴 단계

7. beforeDestroy (파괴 전)

호출됩니다. 이 단계에서는 인스턴스를 여전히 완전히 사용할 수 있습니다. 이 후크는 서버 측에서 렌더링됩니다

동안에는 호출되지 않았습니다.

8. destroyed(파괴 후)

     Vue 인스턴스가 파기된 후 호출됩니다. 호출 후 Vue 인스턴스가 가리키는 모든 것이 바인딩 해제되고 모든

이벤트 리스너가 제거되고 모든 하위 인스턴스가 삭제됩니다. 이 후크

는 서버 측 렌더링 중에는 호출되지 않습니다.

5. 일반적으로 사용하지 않는 나머지 Hook 기능

나머지 세 가지 Hook 기능은 거의 사용되지 않으니 그냥 이해해 주세요. T9.

Activated

(구성요소 활성화 시)

활성화되면 Keep-alive 구성요소가 호출됩니다. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다. E10. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다.

11. errorCaptured(2.5.0+의 새로운 기능) (오류가 캡처될 때)

하위 구성 요소에서 오류가 캡처될 때 호출됩니다. 이 후크는 오류 개체, 오류가 발생한 구성 요소 인스턴스, 오류 소스에 대한 정보가 포함된 문자열 등 세 가지 매개 변수를 받습니다. 이 후크는 오류가 더 위쪽으로 전파되는 것을 방지하기 위해 false를 반환할 수 있습니다.

【관련 추천: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발】

위 내용은 vue 수명주기의 여러 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!