Vue의 연결 유지 구성 요소가 사용자 페이지 전환 부드러움을 향상시키는 방법

Vue의 연결 유지 구성 요소가 사용자 페이지 전환의 부드러움을 향상시키는 방법

최신 웹 애플리케이션에서는 사용자 작업으로 인해 사용자가 페이지를 자주 전환하는 것이 매우 일반적입니다. 이러한 빈번한 페이지 전환으로 인해 페이지 다시 렌더링 및 구성 요소 다시 로드와 같은 성능 문제가 발생하여 페이지 전환 경험이 덜 원활해질 수 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue.js는 연결 유지라는 구성 요소를 제공하여 사용자 페이지 전환의 부드러움을 향상시키는 데 도움이 됩니다.

keep-alive 구성 요소의 기능은 구성 요소의 반복 렌더링을 방지하기 위해 구성 요소의 상태를 캐시하는 것입니다. 구성 요소가 연결 유지 구성 요소에 래핑되면 해당 구성 요소는 삭제되지 않고 캐시됩니다. 이러한 방식으로 동일한 구성 요소로 전환할 때마다 Vue는 캐시에서 구성 요소의 상태를 직접 읽어 구성 요소를 다시 렌더링하는 시간을 절약합니다.

아래에서는 연결 유지 구성 요소가 사용자 페이지 전환의 부드러움을 향상시키는 방법을 설명하기 위해 간단한 예를 사용합니다.

ComponentA와 ComponentB라는 두 가지 구성 요소가 있다고 가정합니다. ComponentA는 일부 데이터를 표시하는 데 사용되는 목록 구성 요소이고, ComponentB는 목록에 있는 항목의 세부 정보를 표시하는 데 사용되는 세부 구성 요소입니다. 사용자가 목록의 항목을 클릭하여 세부정보 페이지로 전환할 때 목록 페이지의 스크롤 위치를 변경하지 않고 유지하려고 합니다.

먼저 App.vue에 keep-alive 구성 요소를 도입하고 해당 경로에 name 속성을 설정하여 캐시된 구성 요소의 식별자를 지정합니다.

<template>
  <div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

그런 다음 목록 구성 요소 ComponentA에서 템플릿의 내용을 수정하고 루프 순회를 통해 목록 항목을 표시해야 합니다.

<template>
  <ul>
    <li v-for="item in list" :key="item.id" @click="showDetail(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  methods: {
    showDetail(item) {
      // 切换到详情页，并传递选中项的数据
      this.$router.push({
        name: 'Detail',
        params: { item }
      })
    }
  }
}
</script>

디테일 컴포넌트 ComponentB에서는 페이지 로딩시 스크롤 위치를 마운트된 후크 기능에 저장하고 활성화된 후크 기능에 위치를 복원합니다.

<template>
  <div>
    <h2>{{ selectedItem.name }}</h2>
    <p>Details: {{ selectedItem.details }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: {}
    }
  },
  mounted() {
    // 保存页面加载时的滚动位置
    this.$store.commit('saveScrollPosition', window.pageYOffset)
  },
  activated() {
    // 恢复页面切换时的滚动位置
    window.scrollTo(0, this.$store.state.scrollPosition)
  },
  created() {
    // 获取传递过来的选中项数据
    this.selectedItem = this.$route.params.item
  }
}
</script>

마지막으로 라우팅 구성에 ComponentB의 경로를 추가하고 이름 속성을 지정합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import ComponentA from '@/components/ComponentA.vue'
import ComponentB from '@/components/ComponentB.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'ComponentA',
    component: ComponentA
  },
  {
    path: '/detail',
    name: 'Detail',
    component: ComponentB
  }
]

const router = new VueRouter({
  routes
})

export default router

keep-alive 구성 요소를 사용하면 사용자가 페이지를 전환할 때 목록 페이지의 스크롤 위치를 유지할 수 있으므로 더 나은 사용자 경험을 제공할 수 있습니다. 이는 목록 구성 요소가 다시 렌더링되지 않고 캐시되기 때문입니다. 다시 목록 페이지로 전환하면 데이터를 다시 로드하고 컴포넌트를 표시하지 않고 컴포넌트의 상태가 직접 복원됩니다.

요약하자면, Vue의 연결 유지 구성 요소는 사용자 페이지 전환의 부드러움을 향상시킬 수 있습니다. 구성 요소의 상태를 캐시함으로써 구성 요소의 다시 렌더링을 줄여 사용자 경험을 향상시킬 수 있습니다. 페이지 전환 성능을 개선해야 하는 시나리오에서는 연결 유지 구성 요소를 합리적으로 사용하는 것이 좋습니다.

위 내용은 Vue의 연결 유지 구성 요소가 사용자 페이지 전환 부드러움을 향상시키는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!