keep-alive
keep-alive是Vue提供的一個抽象組件姻僧，用來對組件進(jìn)行緩存是掰，從而節(jié)省性能胃珍，由于是一個抽象組件甸昏，所以在v頁面渲染完畢后不會被渲染成一個DOM元素
<keep-alive>
<loading></loading>
</keep-laive>
當(dāng)組件在keep-alive內(nèi)被切換時組件的activated耐薯、deactivated這兩個生命周期鉤子函數(shù)會被執(zhí)行
被包裹在keep-alive中的組件的狀態(tài)將會被保留馆里，例如我們將某個列表類組件內(nèi)容滑動到第100條位置，那么我們在切換到一個組件后再次切換回到該組件可柿，該組件的位置狀態(tài)依舊會保持在第100條列表處
關(guān)于這一點也是仁者見仁鸠踪，有的產(chǎn)品可能會要求在每一次進(jìn)入一個組件時頁面的初始位置都是保持在頂部的，這里可以利用Vue中的滾動行為复斥，但是前提是你是HTML5 history模式
我們在創(chuàng)建一個router實例的時候营密，可以提供一個scrollBehavior方法，該方法會在用戶切換路由時觸發(fā)
const router=new VueRouter({
routes:[
{
path:"/",
component:Home
}
],
scrollBehavior(to,form,savedPosition){
//scrollBehavior方法接收to目锭，form路由對象
//第三個參數(shù)savedPosition當(dāng)且僅當(dāng)在瀏覽器前進(jìn)后退按鈕觸發(fā)時才可用
//該方法會返回滾動位置的對象信息评汰，如果返回false纷捞，或者是一個空的對象，那么不會發(fā)生滾動
//我們可以在該方法中設(shè)置返回值來指定頁面的滾動位置被去，例如：
return {x:0,y:0}
//表示在用戶切換路由時讓是所有頁面都返回到頂部位置
//如果返回savedPosition,那么在點擊后退按鈕時就會表現(xiàn)的像原生瀏覽器一樣主儡，返回的頁面會滾動過到之前按鈕點擊跳轉(zhuǎn)的位置，大概寫法如下：
if(savedPosition){
return savedPosition
}else{
return {x:0,y:0}
}
//如果想要模擬滾動到錨點的行為:
if(to.hash){
return {
selector:to.hash
}
}
}
})
還有一個方法就是利用我們上面說過的惨缆，在keep-alive激活會觸發(fā)activated鉤子函數(shù)糜值，那么在該函數(shù)內(nèi)設(shè)置scrollTop為0
被keep-alive包裹的動態(tài)組件或router-view會緩存不活動的實例，再次被調(diào)用這些被緩存的實例會被再次復(fù)用坯墨，對于我們的某些不是需要實時更新的頁面來說大大減少了性能上的消耗寂汇，不需要再次發(fā)送HTTP請求，但是同樣也存在一個問題就是被keep-alive包裹的組件我們請求獲取的數(shù)據(jù)不會再重新渲染頁面捣染，這也就出現(xiàn)了例如我們使用動態(tài)路由做匹配的話頁面只會保持第一次請求數(shù)據(jù)的渲染結(jié)果骄瓣，所以需要我們在特定的情況下強制刷新某些組件
1.利用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的組件不會被緩存蕾各，其它組件都會被緩存
2.利用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>
<!--這里是不會被緩存的組件-->
3 官方提出的解決方案響應(yīng)路由參數(shù)的變化
4 利用berforeRouteEnter實現(xiàn)前進(jìn)刷新臼膏，后退緩存資料
5 利用第三方插件實現(xiàn)前進(jìn)刷新，后退不緩存
轉(zhuǎn)載自http://www.reibang.com/p/4b55d312d297
