Nuxt 및 vue에서의 Data() VS asyncData()

Nuxt 및 vue에서의 Data() VS asyncData()

둘다요.data()그리고.async data()같은 결과를 낳는다(그리고 그 결과는 명백하다)asyncData()결과를 덮어쓰다data())

둘 다 소스코드의 HTML 코드(서버측에서 렌더링된 코드)가 됩니다.

또, 양쪽 모두, 「」에 사용할 수 있습니다.await가져올 데이터(예: Axios 사용)

그렇다면 그들의 차이는 무엇일까요?

<template>
    <div>
        <div>test: {{ test }}</div>
        <div>test2: {{ test2 }}</div>
        <div>test2: {{ test3 }}</div>
        <div>test2: {{ test4 }}</div>
    </div>
</template>

<script>
export default {
    asyncData(app) {
        return {
            test: "asyncData",
            test2: "asyncData2",
            test3: "asyncData3"
        };
    },
    data() {
        return {
            test: "data",
            test2: "data2",
            test4: "data4"
        };
    },
};
</script>

결과:

test:  asyncData
test2: asyncData2
test2: asyncData3
test2: data4

가장 간단한 대답은 data()는 클라이언트 측에서 처리되지만 비동기 데이터() 섹션은 Nuxt() 콜에서 서버 측에서 처리되며 클라이언트 측에서 다시 처리됩니다.

nuxt의 가장 큰 장점은 서버 측에서 콘텐츠를 렌더링할 수 있다는 것입니다.클라이언트 측에서 약속을 사용하여 콘텐츠를 로드하는 경우 마운트 섹션에 다음과 같이 입력합니다.

data() {
  return {
    products: []
  }
},

mounted() {
  axios.get('/api/v1/products').then(response => {
    this.products = response.data
  })
}

javascript 코드는 그대로 클라이언트에 전송되며 브라우저는 api에서 데이터를 가져오는 약속을 실행할 책임이 있습니다.단, 비동기 데이터 내에 약속을 삽입하는 경우:

asyncData() {
  return axios.get('/api/v1/products').then(response => {
    // Note that you can't access the `this` instance inside asyncData
    // this.products = response.data
    let products = response.data
    return { products } // equivalent to { products: products }
  })
}

데이터 취득은 서버측에서 이루어지며 결과는 사전 렌더링되고 데이터가 포함된 html(렌더)이 클라이언트에 전송됩니다.따라서 이 경우 클라이언트는 api 호출을 처리하는 Javascript 코드를 수신하지 않고 다음과 같은 것을 수신합니다.

<ul>
  <li>
    <a href="#">Product 1</a>
  </li>
  <li>
    <a href="#">Product 2</a>
  </li>
  <li>
    <a href="#">Product 3</a>
  </li>
</ul>

비동기 데이터에서 반환되는 결과는 데이터 내의 결과와 병합됩니다.교체된 것이 아니라 병합된 것입니다.

데이터를 가져와 서버 측에서 렌더링할 수 있습니다. Nuxt.js를 추가합니다.asyncData구성 요소를 설정하기 전에 비동기 작업을 처리할 수 있는 방법data.

asyncData는 페이지 컴포넌트를 로드하기 전에 매번 호출되며 이러한 컴포넌트에만 사용할 수 있습니다.Nuxt 앱에 대한 첫 번째 요청 시 서버 측으로 한 번 호출되고 이후 경로로 이동할 때 클라이언트 측으로 호출됩니다.이 메서드는context개체를 첫 번째 인수로 사용하여 일부 데이터를 가져오고 구성 요소 데이터를 반환할 수 있습니다.

비동기 데이터 결과는 데이터와 병합됩니다.

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}

Nuxt의 가장 큰 매력은 서버 사이드 렌더링 부분으로 SEO에 도움이 됩니다.따라서 작업을 수행하는 일반적인 "Vue-way"에서 벗어나는 것은 SSR(Vue는 당연히 허용하지 않으므로 Nuxt를 사용함)의 서비스이기 때문일 수 있습니다.이것을 알고 있으면, asyncData()에는, 최초의 페이지 로드시에 송신되는 SEO 포커스 데이터가 포함되어 있다고 말할 수 있습니다.

단답 => 가져온 템플릿 기반 SEO 포커스 콘텐츠에 비동기 데이터()를 사용합니다.

언급URL : https://stackoverflow.com/questions/53569137/data-vs-asyncdata-in-nuxt-vue