vue 에 keep-alive 내 장 된 구성 요소 캐 시 인 스 턴 스 코드

필요:
홈 구성 요소 에 name 의 data 데이터 가 있 습 니 다.이 데 이 터 를 수정 한 후에 다른 구성 요소 로 전환 합 니 다.홈 구성 요소 로 전환 합 니 다.홈 에서 name 이 값 이 이전에 수 정 된 값 이 기 를 바 랍 니 다.구성 요소 에 캐 시가 있 기 를 바 랍 니 다.
keep-alive 의 사용법:
캐 시 할 구성 요 소 를 keep-alive 로 감 싸 면 됩 니 다.
keep-alive 장점 소개:
1.구성 요 소 를 전환 할 때 현재 구성 요 소 는 삭 제 된 수명 주기 갈 고 리 를 촉발 하지 않 습 니 다.그 러 니까 없 애 지 않 겠 다 는 거 야.
2.되 돌 릴 때 도 다시 만 들 지 않 습 니 다.(폐 기 된 것 도 아 닌 데 재 창 조 는 어디서 났 을 까)
3.두 개의 라 이 프 사이클 의 갈고리 함수 가 더 나 옵 니 다.
a.activated 캐 시 활성화 첫 번 째 트리거,구성 요소 볼 수 있 습 니 다.
일반 루트 created 는 같은 일 을 합 니 다:데이터 요청
b.deactivated 캐 시 활성 화 된 구성 요 소 를 볼 수 없습니다.
일반 루트 beforeDestroy 는 같은 일 을 합 니 다:타이머 제거,전역 이벤트 감청 제거
4.vue devtools 에서 구성 요소 의 캐 시 상 태 를 볼 수 있 습 니 다.
**keep-alive 의 더 많은 속성 설정**
1.include 포함
a.include="구성 요소 1,구성 요소 2"쉼표 앞 뒤에 빈 칸 이 없 도록 주의 하 십시오.
b.:include="[구성 요소 1,구성 요소 2]"
c. :include="/^hello/"
2.배제
a.exclude="구성 요소 1,구성 요소 2"쉼표 앞 뒤에 빈 칸 이 없 도록 주의 하 십시오.
b.:exclude="[구성 요소 1,구성 요소 2]"
c. :exclude="/^hello/"
3.max 는 최대 캐 시 가능 한 구성 요소 의 수 를 규정 합 니 다.기본 값 은 제한 이 없습니다\\
캐 시 대기 열 이[home,list]라 고 가정 합 니 다.
현재 about 에 들 어 갈 때 about 도 캐 시 됩 니 다.이 때 는 이전 첫 번 째 것 을[home,list,about]=>[list,about]먼저 원칙 을 내 놓 습 니 다.
개념 은 이 정도 코드 입 니 다.
1.vue 링크:https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
2.구성 요 소 를 만 듭 니 다.(세 개의 구성 요소)

//   
   Vue.component("home", {
    data() {
     return {
      name: "  ",
     };
    },

    template: `
     <div>
      <h1>home</h1>
      <p>{{ name }}</p>
      <button @click="name = '  '">  name    </button>
     </div>
    `,
    //           
    created() {
     console.log("home created");
    },
    //        
    beforeDestroy() {
     console.log("home beforeDestroy");
    },
    //               
    activated() {
     console.log("home activated");
    },
    //               
    deactivated() {
     console.log("home deactivated");
    },
   });
   //   
      Vue.component("list", {
    template: `
     <div>
      <h1>list</h1>
     </div>
    `,
		//               
    created() {
     console.log("list created");
    },
		//               
    beforeDestroy() {
     console.log("list beforeDestroy");
    },
   });
	//   
		Vue.component("about", {
    template: `
     <div>
      <h1>about</h1>
     </div>
    `,
		//               
    created() {
     console.log("about created");
    },
		//               
    beforeDestroy() {
     console.log("about beforeDestroy");
    },
   });

3.인 스 턴 스 를 만 듭 니 다.

Vue.component("home", {
    data() {
     return {
      name: "  ",
     };
    },

신체 부분

<div id="app">
  //active        v-bind   
  //@click              home
  //        component       home
   <button :class="{ active: curPage === 'home' }" @click="curPage = 'home'">
    home
   </button>
   <button :class="{ active: curPage === 'list' }" @click="curPage = 'list'">
    list
   </button>
   <button
    :class="{ active: curPage === 'about' }"
    @click="curPage = 'about'"
   >
    about
   </button>

   <hr />
   // keep-alive      componet    v-bind  max         
   <keep-alive :max="2">
    <component :is="curPage"></component>
   </keep-alive>
   //   
   //      about  home list    
   //<keep-alive exclude="about">
   // <component :is="curPage"></component>
   //</keep-alive> 
   //   
   //       home list     
   //keep-alive include="home,list">
    //<component :is="curPage"></component>
   //</keep-alive>
  </div>

세 가지 방법의 구체 적 인 용법 은 문장의 시작 부분 에 소개 되 어 있다.
총결산
vue 에 있 는 keep-alive 내 장 된 구성 요소 캐 시 에 대한 인 스 턴 스 코드 에 관 한 글 은 여기까지 입 니 다.더 많은 vue keep-alive 내 장 된 구성 요소 캐 시 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!