まず、トリガーおよび問題解決
彼の最近の書き込みVUEの練習では、コンテンツは、主に見つかった習熟VUE及び関連する問題のために、比較的単純である、と彼らは言うことがあります。単に運動の下でプロジェクトの内容と問題点を生成します。
練習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トリガ場合、2つのフックのVUEが作成および破棄のように理解することができるので、キャンセルするコードを変更する必要が場合、活性化と同時に非活性化リッスン回復モニター、またはロールバック効果がリスニングされることはありません時にカット。
//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）条件付きキャッシュ
提供キープアライブとしては、最初の2つの条件は、文字列、規則的な配列形式を受け入れることができるどちらもアセンブリキャッシュは、許可、最大3つのパラメータを除外し、maxは番号を受け入れることができるキャッシュコンポーネントの最大数を表します。タイプ。
<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）フック関数
二つのフック関数が有効と無効化されて、私はすでに言った、アセンブリが復元され、活性成分がアクティブ失ったときにトリガされ、あなたが作成した同様の役割を果たし、フックを破壊することができます。
補正不足も見れば、これらは、キープアライブの個人的な使用と理解のためのものです〜