Vue.js - 데이터를 가져오는 데 사용해야 하는 구성 요소 수명 주기를 선택하십시오.

Vue.js - 데이터를 가져오는 데 사용해야 하는 구성 요소 수명 주기를 선택하십시오.

Alligator.io 중 하나를 읽은 후, 마운트된 라이프사이클은 http get을 사용하기에 좋지 않은 장소라고 말하고 있던 Vue에 대해 글을 올렸다.Vue.js에서 API에서 데이터를 어떻게 적절하게 얻을 수 있는지 가이드라인이 있는지 궁금하다.

"call API in created hook을 선호한다.악어로부터 인용하다.io:

생성된 후크에서 반응형 데이터에 액세스할 수 있으며 이벤트가 활성 상태임.템플릿과 가상 DOM은 아직 마운트되거나 렌더링되지 않았다.

따라서 필요에 따라 데이터를 쉽게 액세스하여 서버의 응답을 구문 분석하고 저장할 수 있다.

안부 전해요

그created()라이프사이클 후크는 API 데이터를 가져오고 처리하기 위한 모든 요구사항을 충족한다.

그러나 공식 Vue 문서에서는mounted()https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html을 사용한 통합 API 호출을 위한 라이프사이클 후크 예제 코드

양쪽 라이프사이클 후크mounted()그리고created()API 데이터를 가져오는 데 널리 사용되며 모범 사례로 간주된다.

답은 타당하지만, DOM이 렌더링되었다고 가정할 때 탑재된() 후크를 사용하여 API를 호출하는 경우.여기에 탑재된()의 상태를 업데이트하면 다른 렌더링을 트리거할 것인가?

생성된 후크에 DOM이 아직 장착되지 않았다고 확신한다.그래서 나는 창조()를 가지고 갈지도 모른다.

답

이것의 가장 좋은 훅은mounted그리고beforeMounted어느 정도 예리한 경우를 예상하다.

왜?

1. Vue는 구성 요소를 캐시할 수 있으며created훅은 부에가 다음 마운트에 적용할 것이라는 보장이 없다.때때로 당신은 당신의 구성요소가 상태를 저장했다는 것을 발견할 수 있다.따라서 구성요소가 보이지 않는다면 그것이 만들어지지 않았다는 뜻은 아니다.
2. SSR: 범용 구성 요소를 가져오려면 다음 위치에 가져오기 방법을 배치하는 것이 유효하지 않음created후크. ssr 렌더링 중 오류가 발생할 것이다.그리고 장착된 후크는 클라이언트 쪽에서만 작동한다.

공연과 시간에 신경 쓴다면 제발 하지 마.가져오기 작업은 다음 이후에 수행됨created그리고mounted어쨌든 후크는 동기식이고 팔리는 것은 아니기 때문이다.또한 시간 간격created그리고beforeMounted매우 짧다.

당신은 그것을 배치할 수 있다.created만약 당신이 ssr을 계획하지 않고, 만약 당신이 Vue가 어떻게 작동하는지 알고 있다면, 그리고 당신은 정말로 그것을 할 필요가 있다.created낚싯바늘을 달다

참조URL: https://stackoverflow.com/questions/51554083/vue-js-which-component-lifecycle-should-be-used-for-fetching-data