keep-alive사용하기

VUE에서 페이지를 이동하였을때 이전페이지의 데이터를 유지 하고 싶다면 VUE의 < keep-alive >를 사용할 수가 있다.

예로 게시판과 같은 페이지에서 사용한다면 동일 메뉴상의 이동간에는 keep-alive를 사용하여 이전 컴포넌트의 데이터를 유지시켜 페이지 이동시에 이전 검색 필터나 페이징을 유지하여 효율적으로 게시판을 사용할 수가 있게된다.

<template>
      <keep-alive>
          <component v-bind:is="컴포넌트명"/>
      </keep-alive>
</template>

<script>

import keep from '@/components/keep'

export default {
  name: 'AppMain',
  
  data() {
    return {
    }
  },

keep-alive 로 둘러싼 컴포넌트는 컴포넌트가 최초 생성되는 시점에서 데이터를 캐싱한다.

keep-alive의 hook

VUE의 라이프사이클 훅에서는 흔히 알고있는 created beforeMount mounted destroyed외에도 ,keep-alive와 함께 사용할 수있는 훅이 존재한다.

export default {
  data() {
    return {
      isCaching: false
    }
  },
  activated() { // keep-alive 컴포넌트가 활성화될 때 호출된다.
    console.log('activated: keep-alive 활성화')
  },
  deactivated() { // keep-alive 컴포넌트가 비활성화될 때 호출된다.
    console.log('deactivated: keep-alive 비활성화')
  },

A. keep-alive가 적용된 컴포넌트 페이지에서 다른 페이지로 이동했을 경우 네트워크의 VUE로 확인해보면 하단의 이미지와 같이 컴포넌트가 캐싱되어 있는 것을 확인 할 수가 있다.⬇️⬇️⬇️

이때 deactivated() 훅이 실행된다.

B. 다시 뒤로가기 또는 라우터 이동을 통해 keep-alive가 적용된 컴포넌트 페이지로 이동하게 되면 다음과 같이 캐싱데이터가 유지되는 것을 확인 할 수가 있다. ⬇️⬇️⬇️

이때 keep-alive가 다시 활성화됨으로 activated() 훅이 실행된다.