Vue Intersection Observer API를 사용하여 Vue에서 무한 스크롤

작성자Uma Victor
Vue 웹 응용 프로그램에서는 때때로 성능 문제로 인해 API에서 얻은 데이터가 너무 많아서 웹 사이트에 바로 표시할 수 없습니다. 반대로 우리는 그것들을 블록으로 나누어 표시하기를 원합니다.
전방 응용 프로그램을 구축하는 데 가장 도전적인 부분 중 하나는 응용 프로그램의 이벤트와 속성을 제어하는 능력이다.무한 스크롤 기능을 제대로 수행하지 못하면 응용 프로그램의 성능에 영향을 줄 수 있습니다.
많은 개발자들이 제3자 라이브러리를 사용하여 무한 스크롤을 시도할 때 문제가 발생하지만 성능에 있어서 사용하는 일부 라이브러리나 방법은 보통 최선의 선택이 아니다.
Vue Intersection Observer API는 대상 요소와 선조 요소의 교차 변화를 관찰할 수 있는 또 다른 선택입니다.요소가 뷰포트에 들어갈 때 트리거하는 콜백 함수도 있습니다.

Vue Intersection Observer API의 작동 방식

This API는 이 컴퓨터의 Javascript API 위에 구축된 구성 요소 기반 라이브러리입니다.그것은 이전에 스크롤 이벤트를 통해서만 이루어졌던 유용한 일을 많이 했다.그것은 일련의 사건을 촉발하는 것이 아니라, 사건을 촉발하기 전에 목표가 나타나기를 기다린다.
이러한 이벤트를 사용하여 뷰포트에 들어오거나 나가는 객체를 모니터링할 수 있습니다.그것들은 또한 한 항목의 페이지에 표시되는 양을 변경할 수 있다.

우리의 프로젝트를 세우다

Vue CLI를 사용하여 프로젝트를 파생시키는 대신 여기codesandbox에서 프로젝트를 진행합니다.코드는 그곳에서 사용할 수 있으며, 갈라질 수도 있고, 개선할 수도 있다.

//html
<template>
  <div class="p-3">
    <div class="mx-auto max-w-screen-lg">
      <h1>All Comments</h1>
      <div class="py-4">
        <div v-for="(quote, i) in quotes" :key="quote._id">
          <div :class="`contain-quote ${i % 2 == 0 ? 'bg-gray-100' : ''}`">
            <p class="my-5 text-lg text-center text-gray-500">
              <span>"{{ quote.quoteText }}"</span><br />
              <span class="text-gray-400">- {{ quote.quoteAuthor }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "all",
  data() {
    return {
      quotes: [],
    };
  },
  methods: {
    async getQuotes() {
      try {
        const response = await axios.get(
          `https://quote-garden.herokuapp.com/api/v3/quotes?page=${this.page}`
        );
        // JSON responses are automatically parsed.
        const data = await response.data;
        this.quotes = data.data
        console.log(this.quotes);
      } catch (error) {
        console.log(error);
      }
    },
  },
  mounted() {
    this.getQuotes();
  },
};
</script>

Vue에서 무한 스크롤 기능을 구현하는 데 필요한 시작 코드입니다.위의 코드를 간략하게 소개하겠습니다.이 프로젝트에서 오픈 소스 API를 사용합니다.API는 따옴표 배열을 반환합니다.우리는 우리의 데이터 대상에서 볼 수 있다. 우리는 주석 그룹을 정의해서 API에서 얻은 대상 그룹을 저장할 수 있다.
API에서 따옴표를 가져오고 따옴표 배열을 따옴표로 채우는 비동기적인 방법이 있습니다.페이지를 불러올 때마다 getQuotes 함수는 getQuotes 갈고리에서 호출되었기 때문에 실행됩니다.
우리의 템플릿에서, 우리는 대상 그룹을 반복해서 훑어보고, 인용자와 인용자를 표시합니다.

Vue 관측성 패키지

mounted는 소프트웨어 패키지로 Intersection Observer API를 사용하여 사이트의 무한 스크롤 등 기능을 더욱 쉽게 실현할 수 있다.우리는 운행을 통과하기 위해 우리 프로젝트에 그것을 설치해야 한다

npm install --save vue-observe-visibility

지금 우리는 이미 설치를 다 했으니, 우리는 그것을 설치하고 싶다.이를 위해 우리는 vue 프로젝트의 vue-observe-visibility 파일로 이동하여 패키지를 가져오고 vue에게 제3자 라이브러리를 확인하고 사용하도록 요구합니다

import VueObserveVisibility from "vue-observe-visibility";
Vue.use(VueObserveVisibility);

우리는 현재 응용 프로그램에서 main.js 명령을 사용할 수 있다.

오픈 소스 세션 재방송

생산 환경에서 웹 응용 프로그램을 디버깅하는 것은 어렵고 시간도 소모될 수 있다.OpenReplay는 풀스토리, 로그 로켓과 Hotjar의 소스 대체품이다.사용자가 한 모든 것을 감시하고 재방송할 수 있으며, 모든 문제에 대한 응용 프로그램의 표현을 보여 줍니다.
이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.
OpenReplay는 현재 유일하게 사용할 수 있는 오픈 소스 대안입니다.

즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.

페이지로 무한 스크롤 추가

우리의 템플릿에서, 우리가 렌더링하고 있는 것 (즉 인용부호) 아래에 빈 v-observe-visibility 을 만듭니다.div에서 우리는 명령어div를 설정하여 v-observe-visibility라는 방법을 호출할 것이다.

<div v-observe-visibility="handleInfinityScroll">

이 플러그인을 맞춤형으로 만들 수 있는 많은 일을 할 수 있습니다. documentation 계속 볼 수 있습니다.
우리의 스크립트에서, 우리는 우선 handleInfinityScroll 함수가 호출되었는지 확인해야 한다. 그러면 우리는 일부 물건을 컨트롤러에 로그인할 수 있다.

methods: {
      handleInfinityScroll() {
      console.log("fetch more stuff");
    },
  },

현재, 만약 우리가 프로그램을 다시 불러오고 끝까지 굴러가면, 우리는 매번 handleInfinityScroll 콘솔에 로그인하는 것을 볼 수 있다.자주 호출fetch more stuff 페이지 밑에 있을 때만 호출하는 것이 합리적입니다.

handleInfinityScroll(isVisible) {
  if (!isVisible) {
    return;
  }
  console.log("hehe");
},

이 문제를 해결하기 위해서, 우리는 매개 변수 *handleInfinityScroll* 를 전달하고, isVisible 문장을 사용하여 페이지 밑부분의 가시성을 검사하여, 페이지 밑부분이 보이는지 확인합니다.
페이지 아래쪽이 보이지 않으면 함수에서 되돌아오고, 페이지 아래쪽이 보이면 if 함수를 다시 호출합니다.

페이지 무한 스크롤

<script>
import axios from "axios";
export default {
  name: "all",
  data() {
    return {
      quotes: [],
      page: 1,
      totalpage: 7268,
    };
  },
  methods: {
    async getQuotes() {
      try {
        const response = await axios.get(
          `https://quote-garden.herokuapp.com/api/v3/quotes?page=${this.page}`
        );
        // JSON responses are automatically parsed.
        const data = await response.data;
        this.quotes.push(...data.data);
        console.log(this.quotes);
      } catch (error) {
        console.log(error);
      }
    },
    handleInfinityScroll(isVisible) {
      if (!isVisible) {
        return;
      }
      if (this.page >= this.totalpage) {
        return;
      }
      this.page++;
      this.getQuotes();
      console.log("hehe");
    },
  },
  mounted() {
    this.getQuotes();
  },
};
</script>

위에는 많은 일이 있으니, 우리 그것을 분해합시다.우리는 데이터 대상에 getQuotes() 상태를 설정했고 전체 페이지 상태는 page로 설정한 것을 볼 수 있다.현재 페이지는 API 호출에 동적으로 연결되어 있으므로 쿼트를 받기 위해 API7268에 초기 요청을 보내면 페이지https://quote-garden.herokuapp.com/api/v3/quotes?page=${this.page}의 데이터를 가져옵니다.1scroll 방법에서 페이지 밑에 보이는지 확인한 후에 우리는 페이지 계수를 늘리고 handleInfinityScroll 함수를 다시 호출하기를 희망합니다. 이 함수는 페이지getQuote()에 새로운 견적 데이터를 가져옵니다.

this.page++;
this.getQuotes();

우리는 앞에서 한 가지 일을 알아차렸다. 우리는 인용부호 그룹을 직접 그룹으로 설정할 것이다

this.quotes = data.data

현재, 매번 2 함수가 다시 실행될 때마다, 우리는 대상 수조를 데이터에 있는 quotes 수조로 밀어 넣는다.우리는 대상을 분산시키기 때문에 getQuotes() 함수를 호출할 때마다 새 대상을 인용 부호 그룹에 있는 대상에 추가합니다.

언제 멈출지 알아요.

페이지가 API에서 지정한 getQuotes() 에서 끝났기 때문에, 우리가 페이지의 끝에 도착하면, API는 존재하지 않는 페이지에 계속 요청을 할 수 있음을 알 수 있습니다.우리는 7268 함수에서 다른 검사를 실행함으로써 이 점을 개선할 수 있다.현재 페이지가 전체 페이지보다 크거나 같은지 확인하고 handleInfinityScroll 되돌아오면 함수를 되돌려줍니다.

if (this.page >= this.totalpage) {
    return;
  }

결론

예!우리는 마침내 이 강좌를 끝냈다.Vue observer API 패키지를 사용하여 무한 스크롤을 수행하는 방법을 배웠습니다.나는 네가 Vue observer API로 더 많은 멋진 일을 할 수 있기를 바란다.언제든지 연락 주세요.