사용 VUE 연결 유지 구성 요소

첫째, 트리거 및 문제 해결

그의 최근 쓰기 VUE 연습에서, 내용은 주로 익숙해 VUE 발견 관련 문제는, 그들이 말하는 5 월, 비교적 간단하다. 간단하게 운동에서 프로젝트 내용과 문제를 생성합니다

연습 VUE-CLI 2.0 비계를 사용하여, 내용이 단순히 하나의 페이지는 일반적으로 각 앨범 목록 라우터 스위치입니다, 음악 플레이어 응용 프로그램은, 기능은 비교적 간단 모방되고, 일시 정지, 재생할 수있는 노래의 이름을 클릭, 앨범 목차 페이지로 클릭 함수 미만.

당신이 싱글 앨범 목록 페이지로 이동을 클릭하면, 다음, 전체 노래 목록 노래 목록 페이지에서 페이지를 반환하려면 뒤로 단추를 클릭하기 전에 위치를 저장 한 페이지를 검색하지만, 인터페이스 재 요청 : 간단한 배경 소개가 끝난, 질문에 따라 발생하는 상황이 말했다 데이터 키 값은 제어의 결과를 반복하고 있기 때문에, 악곡리스트 페이지 롤링 효과 때문에,리스트를 다시로드 요청 된 데이터를 리턴 선도 vuex 년 어레이 CONCAT 법에 의해 취득 된 데이터, 및 순환 V-위한로드 때문에 대만 오류, 몇 가지 기본적인 코드 섹션에, 이해하기 더 어려울 수 있습니다 말 :

vuex里获取列表数据：
GET_COLLECTION_LIST(state, val) {  state.collectionList = state.collectionList.concat(val)}

歌曲列表里created获取数据，mounted监听滚动事件滚动加载，destroyed取消监听：
created(){  this.collectionListMethod({limit: this.limit, offset: this.offset})},
mounted(){  window.addEventListener('scroll', this.isScrollBot)}
destroyed(){  window.removeEventListener('scroll', this.isScrollBot)}

专辑列表页返回使用的是  this.$router.go(-1)复制代码

우리는 문제를 해결해야 문제가 있습니다, 연결 유지 스위치를 라우팅 할 때 다시 트리거 버퍼 인터페이스를 요청하지 않고 사용될 수 있다는 것을 알게 조회하여 데이터를 캐시 할 수 있습니다, 문제가 완벽하게 해결 할 수있을 것 같다, 연습이 완벽을 만들지 코드를 추가 :

首先在歌曲列表路由里添加meta:{keepAlive: true}为后面的router-view是否需要缓存提供标识
{  path: '/songLis',  component: SongLis,  meta: { keepAlive: true  }}
然后在router-view外层添加keep-alive，并根据meta参数判断是否所有路由都需要缓存
<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>复制代码

추가가 완료되면 결과를 볼 수있는 페이지로 돌아가! 콘솔을 만족하는 것은 ~ ~ ~, 연결 유지 기능을 나타내는 일러스트 sahua 축하 제공되지하지만 우리는 다른 경로로 앨범 목록에서 절단 할 때 일이 듣고 부하 롤링 것을 발견 할 것이다 마우스를 롤, 그렇게 간단하지됩니다 이벤트는 아, 분명히들을 때 파괴 취소 구성 요소를 취소되지! 그리고 ~ 다시 페이지가로드하지만 실행되지 스크롤 앨범 목록에 절단, 무지한 모습을 나타냅니다

본 후 VUE 문서하는 문서를 발견, 그것은 읽

<keep-alive> 소포 동적 구성 요소는 구성 요소 인스턴스는 그들을 파괴하기보다는, 비활성 캐시됩니다.

즉, 연결 유지 소거 모니터 실패의 원인이되는 유발하지 않는 파괴 후크 방식의 부품을 사용. 동시에 활성화되었을 때 문서에 따르면, 비활성화 게 수신 상시 스위치들은 activeted 및 deactiveted 두 훅 기능을 트리거 할 때 두 개의 고리가 생성되고 파괴 뷰로서, 이해 될 수있는 설명하므로 필요 취소 할 수있는 코드를 수정 복구 모니터, 또는 롤백 효과가 수신되지 않습니다 때 잘라 :

//keep-alive钩子函数，组件恢复时触发
activated(){  window.addEventListener('scroll', this.isScrollBot)},
//keep-alive钩子函数，组件变为不可用时触发
deactivated(){  window.removeEventListener('scroll', this.isScrollBot)}复制代码

개정 결과는 완전히 기대와 일치, 위치 요청 인터페이스를 반복하지 않으며 외부 부품로드 앨범의 스크롤 목록을 트리거하지 않을 경우 예약 페이지를 라우팅 스위치.

둘째,에 연결 유지

그것은 관련 사용에 따라 문서의 간단한 요약하여 연결 유지, 다음 사용하기 때문에 :

난 이미 구성 요소의 연결 유지 소포, 다시 활성화 비활성 캐시 구성 요소가 파괴되지 않습니다 구성 요소 인스턴스를, 때, 캐시의 내용을 읽고 구성 요소의 상태를 저장하여 요청 인터페이스를 반복하지 않습니다 말했다 데이터를 얻을.

(1) 가장 기본적인 사용

基本用法：
<keep-alive>
  <component :is="view"></component>
</keep-alive>

也可以根据条件判断：
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
这个时候触发两个组件切换时，组件内的数据和状态都会得到保存，如果有input输入框，输入框内容会保留复制代码

(2) 캐시 조건부

제공 연결 유지로는, 처음 두 조건이 문자열, 규칙적인 배열 형식을 받아 들일 수 둘 어셈블리 캐시를 허용, 최대 세 개의 매개 변수를 제외하려면, 최대 숫자를 받아 들일 수 캐시 구성 요소의 최대 수를 나타냅니다 입력합니다.

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
此时只有a、b两个组件会触发keep-alive，此处的名字是组件内部name对应名字，如果name不存在，会查找父组件里components里注册的名字，如果也不存在则不会匹配。
正则和数组方法同上，但是需要用v-bind:include=''方式。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
复制代码

(3) 후크 함수

두 후크 기능이 활성화 및 비활성화, 이미 말했듯이, 어셈블리가 복원되고 활성 성분이 활성화 잃을 때 트리거, 당신이 만든 유사한 역할을하고 후크를 파괴 할 수 있습니다.

보정 부족도를 보면 다음은 ~, 개인 사용과 연결 유지의 이해입니다