Vue keep-alive 실천 요약

3137 단어
는 Vue의 내장 어셈블리로, 어셈블리를 전환하는 동안 상태를 메모리에 저장하여 DOM의 중복 렌더링을 방지합니다. 동적 구성 요소를 패키지할 때, 비활성 구성 요소의 실례를 캐시하는 것이지 삭제하는 것이 아니다.와 비슷하게 는 추상적인 구성 요소이다. 그 자체는 DOM 요소를 렌더링하지 않고 부모 구성 요소 체인에 나타나지 않는다.
prop: 
- include:          。           。
- exclude:          。             。

1. 일반적인 사용법:
//   
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

2.router와 결합하여 캐시 부분 페이지
$route를 사용합니다.meta의 keepAlive 속성:
router에서router의 메타 정보 meta를 설정해야 합니다.
//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false //      
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true //      
      }
    }
  ]
})

ps: 물론 동적 설정으로route를 설정할 수도 있습니다.기타 요구 사항을 충족하는 meta의 keepAlive 속성
  • 첫 페이지는 A 페이지
  • B 페이지에서 A 로 건너뛰고 A 페이지에 캐시 필요
  • C 페이지에서 A 로 건너뛰고 A 페이지에 캐시가 필요하지 않음
    • 사고방식은 모든 루트beforeRouteLeave(to, from, next)의 갈고리에 설정to.meta.keepAliveA의 루트이다.
    {
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true //      
    }
}

    export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         //          meta
        to.meta.keepAlive = true;  // B     A  ，  A   ，    
        next();
    }
};

    export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        //          meta
        to.meta.keepAlive = false; // C     A    A    ，   
        next();
    }
};

    keep-alive 생명주기 갈고리 함수:activated, deactivated
    사용은 데이터를 메모리에 저장합니다. 페이지에 들어갈 때마다 최신 데이터를 얻으려면 activated 단계에서 데이터를 가져와야 합니다. 원래created 갈고리에서 데이터를 얻는 작업을 맡아야 합니다.
    결어
    이상은 블로그원 Hanyif에서 발췌한 글로 자신이 편리하게 조회하고 사용할 수 있도록 합니다. 만약에 권리 침해 사항이 있으면 저에게 사신을 주십시오.
    keepalived 의 설치 와 설정
    apahce header 설정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage