vue 에서 keep-alive,activated 에 대한 연구 와 사용 에 대한 상세 한 설명

<template>
 <div class="wrapper">
  <ul class="content"></ul>
  <button class="add" id="add" @click="add">     </button>
 </div>
</template>

<script>
export default {
 data() {
  return {};
 },
 methods: {
  add() {
   let ul = document.getElementsByClassName("content")[0]; 
   let li = document.createElement("li");
   li.innerHTML = "       ";
   ul.appendChild(li);   
  }
 }
};
</script>
<style >
</style>

<template>
 <div id="app">
  <keep-alive>
   <router-view />
  </keep-alive>
</template>

//index.js
{
   path: '/1',
   name: 'components1',
   component: Components1,
   meta: {
    keepAlive: true  //      
   }
  },
  {
   path: '/2',
   name: 'components2',
   component: Components2,
   meta: {
    keepAlive: false
   }
  },

 <div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
</template>

에 패키지 되 지 않 았 다 면 activated 는 작 동 하지 않 습 니 다.우리 가 직접 해 보면 알 수 있 을 거 야.

//components1 
 created() {
  console.log("1  created    ");
 },
 activated() {
  console.log("1  activated    ");
 },
 mounted() {
  console.log("1  mounted    ");
 }

//components2 
 created() {
  console.log("2  created    ");
 },
 activated() {
  console.log("2  activated    ");
 },
 mounted() {
  console.log("2  mounted    ");
 }

우 리 는 두 구성 요소 에서 갈고리 함수 의 실행 상황 을 각각 출력 했다.우 리 는 볼 수 있다.

components 1 을 실행 할 때 activated 갈고리 함 수 를 실 행 했 지만 components 2 는 실 행 했 습 니 다.components 2 는에 패키지 되 지 않 았 기 때문에 이 갈고리 함 수 를 활성화 하지 않 습 니 다.
우리 가 다시 길 을 바 꾸 었 을 때 또 신기 한 곳 을 발견 했다.

구성 요소 1 에 서 는 activated 갈고리 함수 만 실행 하고 구성 요소 2 에 서 는 생 성 및 마 운 트 된 갈고리 함 수 를 모두 실행 합 니 다.
이것 이 캐 시 때 문 입 니 다.components 는 구성 요 소 를 캐 시 했 기 때문에 다시 만 들 거나 마 운 트 하지 않 습 니 다.
간단하게 말하자면 activated()함 수 는 한 페이지 가 활성 화 된 갈고리 함수 로 페이지 에 들 어가 자마자 터치 합 니 다.
따라서 구성 요소 캐 시 를 사용 할 때 전환 할 때마다 요청 을 보 내 려 면 요청 함 수 를 activated 에 써 야 합 니 다.created 나 mounted 에 쓰 면 이 구성 요 소 를 처음 불 러 올 때 만 작 동 합 니 다.
이상 의 vue 에서 keep-alive,activated 의 연구 와 사용 에 대한 상세 한 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.