keep-alive
keep-alive是Vue提供的一個(gè)抽象組件，用來對組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件抑进，所以在v頁面渲染完畢后不會被渲染成一個(gè)DOM元素
<keep-alive>
<loading></loading>
</keep-laive>
當(dāng)組件在keep-alive內(nèi)被切換時(shí)組件的activated、deactivated這兩個(gè)生命周期鉤子函數(shù)會被執(zhí)行
被包裹在keep-alive中的組件的狀態(tài)將會被保留睡陪，例如我們將某個(gè)列表類組件內(nèi)容滑動(dòng)到第100條位置寺渗，那么我們在切換到一個(gè)組件后再次切換回到該組件，該組件的位置狀態(tài)依舊會保持在第100條列表處
關(guān)于這一點(diǎn)也是仁者見仁兰迫，有的產(chǎn)品可能會要求在每一次進(jìn)入一個(gè)組件時(shí)頁面的初始位置都是保持在頂部的信殊，這里可以利用Vue中的滾動(dòng)行為，但是前提是你是HTML5 history模式
我們在創(chuàng)建一個(gè)router實(shí)例的時(shí)候汁果，可以提供一個(gè)scrollBehavior方法涡拘，該方法會在用戶切換路由時(shí)觸發(fā)
const router=new VueRouter({
routes:[
{
path:"/",
component:Home
}
],
scrollBehavior(to,form,savedPosition){
//scrollBehavior方法接收to，form路由對象
//第三個(gè)參數(shù)savedPosition當(dāng)且僅當(dāng)在瀏覽器前進(jìn)后退按鈕觸發(fā)時(shí)才可用
//該方法會返回滾動(dòng)位置的對象信息据德，如果返回false鳄乏，或者是一個(gè)空的對象，那么不會發(fā)生滾動(dòng)
//我們可以在該方法中設(shè)置返回值來指定頁面的滾動(dòng)位置晋控，例如：
return {x:0,y:0}
//表示在用戶切換路由時(shí)讓是所有頁面都返回到頂部位置
//如果返回savedPosition,那么在點(diǎn)擊后退按鈕時(shí)就會表現(xiàn)的像原生瀏覽器一樣汞窗，返回的頁面會滾動(dòng)過到之前按鈕點(diǎn)擊跳轉(zhuǎn)的位置，大概寫法如下：
if(savedPosition){
return savedPosition
}else{
return {x:0,y:0}
}
//如果想要模擬滾動(dòng)到錨點(diǎn)的行為:
if(to.hash){
return {
selector:to.hash
}
}
}
})
還有一個(gè)方法就是利用我們上面說過的赡译，在keep-alive激活會觸發(fā)activated鉤子函數(shù)仲吏，那么在該函數(shù)內(nèi)設(shè)置scrollTop為0
被keep-alive包裹的動(dòng)態(tài)組件或router-view會緩存不活動(dòng)的實(shí)例，再次被調(diào)用這些被緩存的實(shí)例會被再次復(fù)用蝌焚，對于我們的某些不是需要實(shí)時(shí)更新的頁面來說大大減少了性能上的消耗裹唆，不需要再次發(fā)送HTTP請求，但是同樣也存在一個(gè)問題就是被keep-alive包裹的組件我們請求獲取的數(shù)據(jù)不會再重新渲染頁面只洒，這也就出現(xiàn)了例如我們使用動(dòng)態(tài)路由做匹配的話頁面只會保持第一次請求數(shù)據(jù)的渲染結(jié)果许帐，所以需要我們在特定的情況下強(qiáng)制刷新某些組件
-
利用include、exclude屬性
<keep-alive include="bookLists,bookLists"> <router-view></router-view> </keep-alive> <keep-alive exclude="indexLists"> <router-view></router-view> </keep-alive>include屬性表示只有name屬性為bookLists毕谴，bookLists的組件會被緩存成畦，（注意是組件的名字，不是路由的名字）其它組件不會被緩存exclude屬性表示除了name屬性為indexLists的組件不會被緩存涝开，其它組件都會被緩存
-
利用meta屬性
export default[ { path:'/', name:'home', components:Home, meta:{ keepAlive:true //需要被緩存的組件 }, { path:'/book', name:'book', components:Book, meta:{ keepAlive:false //不需要被緩存的組件 } ]<keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> <!--這里是會被緩存的組件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--這里是不會被緩存的組件--> 官方提出的解決方案響應(yīng)路由參數(shù)的變化
利用berforeRouteEnter實(shí)現(xiàn)前進(jìn)刷新循帐，后退緩存資料
利用第三方插件實(shí)現(xiàn)前進(jìn)刷新，后退不緩存
作者：羊烊羴
鏈接：http://www.reibang.com/p/4b55d312d297
來源：簡書
簡書著作權(quán)歸作者所有舀武，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處拄养。
