Vue.js에서 생성된 이벤트와 마운트된 이벤트 간의 차이

Vue.js에서 생성된 이벤트와 마운트된 이벤트 간의 차이

Vue.js 설명서에서는created그리고mounted다음과 같은 사건:

created

인스턴스가 생성된 후 동시에 호출됨.이 단계에서 인스턴스는 데이터 관찰, 계산된 속성, 방법, 감시/이벤트 콜백 등의 설정이 완료되었음을 의미하는 옵션 처리를 완료했다.그러나 마운트 단계가 시작되지 않아 달러엘 부동산은 아직 구할 수 없을 것이다.

mounted

인스턴스가 방금 마운트된 후 호출되며, 여기서 el이 새로 생성된 VM으로 대체된다.$el. 루트 인스턴스가 문서 내 요소에 마운트된 경우 vm.탑재된 것을 호출할 때 $el도 동봉될 것이다.

서버 측 렌더링 중에는 이 후크를 호출하지 않는다.

이론은 이해하지만 실천에 관한 두 가지 질문이 있다.

1. 에 대한 어떠한 사례라도 있는가?created에 쓰일 것이다.mounted?
2. 무엇을 사용할 수 있는가?created실제 상황(실제 코드)에 대한 이벤트?

created(): 옵션 처리가 완료되었으므로 사후 대응적 액세스 가능data원하는 경우 속성을 변경하십시오.이 단계에서 DOM은 아직 탑재되거나 추가되지 않았다.여기서 DOM 조작을 할 수 없다.

mounted(): DOM을 장착하거나 렌더링한 후 호출.여기서 DOM 요소에 액세스할 수 있으며, 예를 들어 내부를 가져오는 등의 DOM 조작을 수행할 수 있음HTML:

console.log(element.innerHTML)

그래서 당신의 질문은:

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

생성됨은 일반적으로 백엔드 API에서 데이터를 가져와 데이터 속성으로 설정하는 데 사용된다.그러나 SSR에서는mounted()후크가 존재하지 않음 생성된 후크에서만 데이터 가져오기 등의 작업을 수행해야 함

2. 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;
    });
}

생성된 () 후크의 경우, 탑재하기 전에 DOM에 표시되지 않은 브라우저에서 조작 후 데이터.간단히 말해서 그 데이터는 브라우저를 본 DOM을 조작하는 데 시간이 걸린다.

마운트된() 후크는 DOM 요소에 액세스할 수 있고 DOM 조작을 수행할 수 있는 DOM을 마운트하거나 렌더링한 후에 호출된다.장착된 후크의 가장 좋은 용도는 초기 렌더링 직전 또는 직후에 DOM에 액세스해야 하는 경우 입니다.

참조URL: https://stackoverflow.com/questions/45813347/difference-between-the-created-and-mounted-events-in-vue-js