비동기 HTTP 요구를 호출해야 하는 VueJ 라이프 사이클 훅은 무엇입니까?

비동기 HTTP 요구를 호출해야 하는 VueJ 라이프 사이클 훅은 무엇입니까?

페이지를 렌더링하기 전에 서버에 비동기 GET 요청을 전송하여 데이터를 가져오고 데이터에 속성을 채우는 방법을 알고 싶습니다.이를 위한 최선의 방법은 DOM이 렌더링되기 전에 Vue js가 제공하는 3가지 라이프 사이클 훅 중 하나로 이 요청을 보내는 함수를 호출하는 것이라고 들었습니다.셋은beforeCreate(),created(),beforeMount()이 요청은 어떤 것을 호출해야 합니까?그리고 왜?

TL;DR(일반적이고 안전한 경우), 사용created().

Vue의 초기화 코드가 동기적으로 실행됩니다.

엄밀히 말하면 실행 중인 모든 비동기 코드beforeCreate(),created(),beforeMount()모든 후크가 종료된 후에만 응답합니다.데모 참조:

new Vue({
  el: '#app',
  beforeCreate() {
    setTimeout(() => { console.log('fastest asynchronous code ever') }, 0);
    console.log('beforeCreate hook done');
  },
  created() {
    console.log('created hook done');
  },
  beforeMount() {
    console.log('beforeMount hook done');
  },
  mounted() {
    console.log('mounted hook done');
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  Check the console.
</div>

즉, Ajax에 전화를 걸면beforeCreate()API가 아무리 빠르게 응답하더라도 응답은 훨씬 늦게 처리되며, 이는 다음 시간 이후에 이루어집니다.created()가 실행되었습니다.

그렇다면 어떤 것이 당신의 결정을 이끌어야 할까요?

• 가능한 한 빨리 전화를 걸어야 합니까?
  • 사용하다beforeCreate()
  • 왜요?
    • 그 어떤 갈고리보다도 빨리 달립니다만...
• 바로 읽거나 수정해야 합니까?
  • 사용하다created()
  • 왜요?
    • 상태는 와 사이에서만 초기화되므로 이전에 일부 데이터를 할당하면 손실됩니다.
• 다음에 생성되는 모든 것이 필요함created()?
  • 사용하다beforeMount()
  • 왜요?
    • 에서 구할 수 없는 것은 아무것도 모릅니다.created()다음 사이트에서 입수할 수 있습니다.beforeMount() 컴파일된 렌더 함수(소스 참조) 이외의 경우이기 때문에 이 경우는 매우 드문 경우일 것입니다.

vue-router 문서에는 컴포넌트 렌더링에 필요한 데이터를 서버에서 가져올 때 사용하는 패턴에 대한 몇 가지 조언이 있습니다(링크에 대해서는 아래쪽 참조).

GET 요구를 실행할 위치를 결정하기 위해 먼저 비동기 GET 요구가 시작되기 전에 루트로 이동할지 또는 그 후에 이동할지 여부를 묻습니다.

데이터를 취득한 후 (네비게이션 전) 루트로 네비게이트 할 경우 docs는 에서 비동기 요구를 실행할 것을 권장합니다.beforeRouteEnter()착신 컴포넌트를 감시하여 반드시 콜을 실시합니다.next()에beforeRouteEnter()비동기 데이터 요구가 충족되면.이 패턴을 선택하면 데이터를 가져올 때까지 컴포넌트의 루트/렌더링에 대한 네비게이션이 발생하지 않기 때문에 로드 인디케이터가 표시됩니다.

루트에 네비게이트하여 (네비게이션 후) 요구를 개시할 경우 docs는 에서 요구를 실행할 것을 권장합니다.created() 및 v-if컴포넌트가 로드 중인지, 오류가 발생했는지 또는 데이터가 도착하면 보기를 조건부로 표시합니다.

문서에는 코드 예가 있고 잘 쓰여져 있으므로 문서를 확인해 볼 것을 강력히 권장합니다.https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

위에서 설명한 바와 같이 Vue와 React 모두에 존재하는 주요 문제는 네트워크 요청을 했을 때 컴포넌트가 생성되기 전에 데이터가 도착하면 데이터를 설정할 인스턴스가 없다는 것입니다.

beforeCreated React와 .componentWillMount컴포넌트가 존재하기 전에 데이터가 반환될 수 있기 때문에 일반적으로 여기서 네트워크 요청을 실행하고 싶지 않습니다. 같은 랑 똑같아요this.data = data 컴포넌트가 때문에 '컴포넌트'는this아직 존재하지 않습니다.

에서 더 장소는 React입니다.componentDidMount에서 더좋은 는 Vue입니다.created되어 있기 에, 「이러한 컴포넌트는 작성되어 .this재한한다

다음은 예를 제시하겠습니다.

<template>
  <div>
    <span v-if="error">{{ error }}</span><br>
    I like:<br>
    {{ data }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      error: undefined,
    }
  },

  async created() {
    try {
      const response = await axios.get('/endpoint/stuff')
      this.data = response
    } catch (err) {
      this.error = err
    }
  },
}
</script>

사정에 따라 다르겠지.

이것은, 유저 익스피리언스에 대해서, 무엇을 원하는지에 따라서 다릅니다.경로를 즉시 표시하지만 이 경로의 내용을 로드하는 스피너를 표시하시겠습니까?

또는 데이터를 가져올 때까지 기다렸다가 경로를 표시하시겠습니까?(지연성이 있는 어플리케이션의 착각을 일으킬 수 있습니다)

앞서 말한 대로라면 컴포넌트의 생성된 후크에서 실행할 수 있습니다.

https://forum.vuejs.org/t/what-is-the-best-hook-to-call-api-to-load-initialisation-data-for-a-component/15167/2

언급URL : https://stackoverflow.com/questions/49577394/which-vuejs-lifecycle-hook-must-asynchronous-http-requests-be-called-in