연결 유지의 사용 VUE

연결 유지 : VUE는이 내장 구성 요소, 구성 요소가 포함될 수 있습니다 보류 또는 피할 재 렌더링에 . 활성화, deachtivated :이 수명주기 기능이 있습니다. 포함 및 제외 : VUE 후 2.1.0 버전은 두 가지 속성을 추가합니다.

라이프 사이클 기능 (서비스 측 렌더링시, 두 개의 후크 함수가 호출되지 않을 것이다)

　　활성화 : 연결 유지 구성 요소를 호출 활성화합니다. 때마다 최신 데이터에 대한 페이지를 입력하면, 우리는 작업 데이터를 얻기 위해 처음에 만들 후크 기능을 활성화 단계에서 데이터를 얻을 수행 할 필요가

　　deachitivated : 연결 유지 구성 요소가 중단 될 때 호출됩니다.

재산

　　포함:

　　　　"("= 포함 V-바인드 사용) 또는 식 : 유형 문자열 ( "= 포함)"

　　　　역할 : 만 구성 요소 이름 일치가 캐시됩니다

　　제외 ( 우선 순위>를 포함 ) :

　　　　"("= 제외 V-바인드 사용) 또는 식 : 유형 문자열 ( "= 제외)"

　　　　역할 : 모든 구성 요소에 일치하는 이름이 캐시되지 않습니다

　　최대 :

　　　　입력 : 번호

　　　　역할 : 얼마나 많은 캔까지 마을 구성 요소 인스턴스의 영혼

어셈블리 캐시 인스턴스

: // 구성 요소 추가 
내보내기 기본 { 
  : 이름을 '얼라이브 테스트 유지' , 
  데이터를 () { 
    반환 { 
        : includedComponents을 "연결 유지 - 테스트" 
    } 
  } 
} 


// 예 :
 <=에는 "ABC-연결 유지 "> 
    <! - 컴포넌트 이름 = ABC 캐시 컴포넌트 -> 
    <구성> </ 성분> 
</ 연결 유지를> 

<연결 유지가이 = 포함하는"A, B "> 
   <! - 동적 바인딩 요소를 이름 버퍼 또는 성분 (B) -> 
    <성분 :은 = "A"> </ 성분> 
</ 연결 유지> 


<! - 바인드-V를 사용할 정규식을 사용 -> 
<보관할 -alive는 "| B / / A">는이 = 포함 
  <구성 요소 :입니다 = "보기"> </ 컴포넌트> 
</ 연결 유지>
 
<! -动态判断->
<연결 유지는 : = "includedComponents"를 포함> 
  <라우터보기> </ 라우터보기> 
</ 유지 (keep-alive)> 

<연결 유지 제외 = "테스트 연결 유지"> 
  <-将不缓存이름!为테스트 연결 유지的组件-> 
  <구성 요소> </ 컴포넌트> 
</ 연결 유지>

페이지 버퍼의 예 (VUE 라우터 결합)

<연결 유지> 
    <라우터보기 V- 경우 = "$ route.meta.keepAlive"> </ 라우터보기> 
</ 유지 (keep-alive)> 
<라우터보기 V- 경우 = "! $ route.meta.keepAlive "> </ 라우터보기> //   在라우터的하는 index.js中配置메타元信息 
수출 기본적 새로운 라우터 ({ 
  경로 : [ 
    { 
      경로 : '/' , 
      이름 : '안녕하세요' , 
      구성 요소 : 안녕하세요, 
      메타 : { 
        킵 얼라이브 : 거짓 // 不需要缓存      } 
    }, 
    { 
      경로 : '/ PAGE1' ,
      이름:


  
'이 페이지 1' , 
      구성 요소 다음 페이지 1, 
      메타 : { 
        킵 얼라이브 : 사실에  //가 캐시 될 
      } 
    } 
  ] 
})

최악의 고난

연결 유지의 사용 VUE

추천