[javascript] Vue.js에서 생성 된 이벤트와 탑재 된 이벤트의 차이점

Program / 글쓴이

Vue.js 문서는 다음과 같이 created및 mounted이벤트를 설명합니다 .

created

인스턴스가 생성 된 후 동 기적으로 호출됩니다. 이 단계에서 인스턴스는 옵션 처리를 완료했습니다. 즉, 데이터 관찰, 계산 된 속성, 메서드, 감시 / 이벤트 콜백이 설정되었습니다. 그러나 탑재 단계가 시작되지 않았으며 $ el 속성을 아직 사용할 수 없습니다.

mounted

el이 새로 작성된 vm. $ el로 대체 된 인스턴스가 방금 마운트 된 후 호출됩니다. 루트 인스턴스가 문서 내 요소에 마운트 된 경우 마운트가 호출 될 때 vm. $ el도 문서 내에 있습니다.

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

나는 이론을 이해하지만 연습에 관한 두 가지 질문 이 있습니다.

  1. created과도하게 사용되는 경우가 mounted있습니까?
  2. created실제 (실제 코드) 상황에서 이벤트를 사용할 수 있습니까?

답변

created(): 옵션 처리가 완료되었으므로 반응 data특성에 액세스 하고 원하는 경우 변경할 수 있습니다. 이 단계에서 DOM은 아직 마운트 또는 추가되지 않았습니다. 따라서 여기에서 DOM 조작을 할 수 없습니다

mounted(): DOM이 마운트되거나 렌더링 된 후 호출됩니다. 여기에서 DOM 요소에 액세스 할 수 있으며 innerHTML과 같은 DOM 조작을 수행 할 수 있습니다.

console.log(element.innerHTML)

그래서 당신의 질문 :

  1. Is there any case where created would be used over mounted?

작성은 일반적으로 백엔드 API에서 데이터를 가져 와서 데이터 특성으로 설정하는 데 사용됩니다. 그러나 SSR mounted()후크가 없으면 작성된 후크에서만 데이터 가져 오기와 같은 작업을 수행해야합니다.

  1. What can I use the created event for, in real-life (real-code) situation?

외부 API에서 JSON과 같이 렌더링 될 초기 필수 데이터를 가져 와서이를 반응성 데이터 특성에 지정 

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}

답변