A. vue 不是路由跳轉的頁面怎麼緩存
vue緩存主要四種方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中
B. vue 想要返回頁面停留在離開頁面時的位置，無論用什麼方法，是必須要用keep-alive嗎
最近項目中由於列表居多且都做了下拉刷新上拉載入，所以就使用了keep-alive組件來緩存頁面數據，但是當在其他頁面做一些操作改變了列表數據，當來到列表的時候每次都要下拉刷新一下，體驗不好，所以就使用到了EventBus，在需要更新的時候就用EventBus來刷新列表。
1.keep-alive組件
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能，由於是一個抽象組件，所以在頁面渲染完畢後不會被渲染成一個DOM元素。但是對於展示型頁面比較好用，表單類頁面也會將所填數據保存起來，對於那種表單沒提交又需要保存所填數據的場景非常實用。
keep-alive所緩存的頁面只會執行一次created和mounted，也就是在第一次進入才會執行。但是又會多兩個生命周期，分別是activated、deactivated，activated在每次進入執行而deactivated在每次離開前執行。 當然有些頁面不需要緩存，就要進行一些處理，這里就不多講了，因為估計大家都知道(不知道網路去...)。
2.EventBus(事件匯流排)
EventBus用於實現組件之間的數據通訊，使用起來非常之簡單。只需要在main.js中加入以下代碼：
Vue.prototype.$eventBus = new Vue();
上面代碼就創建了一個全局EventBus，其實就是一個vue實例。
這樣我們就可以在各個頁面中使用了。
在頁面中使用 $emit 方法就可以觸發事件,然後組件中使用 $on 方法就可以監聽對應事件,這個和組件之間傳值是一樣的。不過這個可以在非父子組件中傳遞狀態,和vuex差不多。當然這種方法在簡單應用中可以使用，復雜的應用應該使用 vuex ，這樣方便管理和維護。
this.$eventBus.$emit('msg',data);// 觸發事件 this.$eventBus.$on('msg',(data)=>{}) // 監聽事件
3.組合使用
這兩個我感覺很配，當我們使用keep-alive緩存了頁面組件，我們需要在A面來觸發B頁面的列表刷新或其他方法時，這時候使用EventBus就非常方便，其他方法也可以，比如說使用vuex，但是此時就沒有直接使用EventBus方便快捷了。 當我們在頁面中使用了 this.$eventBus.$on 去監聽一個事件，只要頁面被緩存，就可以監聽到其他頁面觸發的事件。這樣我們就可以減少一些不必要的請求，而且在需要更新的時候去更新，也可以做一些其他的操作，簡直美滋滋。
總結
以上所述是小編給大家介紹的vue的keep-alive中使用EventBus的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！
您可能感興趣的文章:基於vue中keep-alive緩存問題的解決方法詳解Vue的鉤子函數(路由導航守衛、keep-alive、生命周期鉤子)vue中keep-alive的用法及問題描述解決vue單頁使用keep-alive頁面返回不刷新的問題vue2中的keep-alive使用總結及注意事項vue項目優化之通過keep-alive數據緩存的方法vue使用keep-alive實現數據緩存不刷新Vue keep-alive實踐總結（推薦）深入理解vue-router之keep-alive
C. vue.js怎麼在頁面一開始載入數據
載入和顯示新數據在vue里最簡單了，往你的數據中添加新的值就可以了：methods:{loadMore:function(){yourAjaxMethod(function(moreData){this.items.push(moreData);}.bind(this));}}另外一個問題就是如何觸發loadMore，這里像你說的，滾動。所以你需要監聽下scroll事件或者使用其他滾動插件比如iscroll，在對應的回調里調用loadMore
D. vue寫的頁面發送請求後為什麼需要刷新才顯示
工具/原料
vue.js
webstorm
/步驟
、原理
圖所示我需要要刷新頁面A編寫自跳空頁面用戶操作A頁面A頁面先跳轉空頁面空頁面馬跳A頁面候vue重新載入A頁面種變相實現自我刷新缺點需要刷新頁面較空頁面隨變
二、前頁面事件監聽
圖所示我定義refreshPage特定事件調處理業務邏輯使用vuerouter跳轉空頁面空頁面路由路徑/user/back路徑隨便取家選擇自路徑
三、空頁面編寫
步驟閱讀
6
圖所示空頁面立即執行路由跳原頁面候原頁面進行重新載入實現刷新/user/index跳原頁面路由路徑家需要根據自項目情況寫
7
四、注意事項
本經驗所使用其實種hack極端情況比網路極端惡劣能現跳空頁面跳或者乾脆跳空頁面情況家需要根據自項目情況酌情選擇
E. vue用了vuex和路由的緩存，出問題了一個頁面添加按鈕進去後一直都有上一次添加的數據參數在上面如何修改
建議在路由鉤子裡面做判斷,beforeRouterEnter
F. vue-router跳轉頁面，URL變化但頁面里的數據沒變化，什麼情況
localhost:8080/xname/1
localhost:8080/xname/2
xname.vue只created一次
怎樣才能讓1和2頁面顯示的數據不一樣呢，
嘗試了下watch $route，我的xname.vue代碼如下：
created(){
this.fetchdata();
},
watch:{
'$route':'fetchdata'
},
methods:{
fetchdata(){
console.log("created")
}
}
但是這種方式會存在下面的問題頁面進入的時候執行了一次fetchdata，頁面離開的時候又執行了一次fetchdata，每次進入頁面都得刷新數據，沒有緩存
G. vue.js有局部緩存嗎
是沒有的，可以自己寫一個vuex的實現,小型的做緩存數據用,或者直接上vuex看你應用大小
H. 怎麼用vue封裝第一次請求過來的數據成一個對象，留作備份，與最終要保存的時候的數據作對比
給你提供一個緩存方案：
你可以用indexDB做一個備份，簡單點的就用localStorage做個數據保存。在介面層寫一個緩存處理就好了。每次介面請求前，都去緩存（localStorage/indexDB）裡面去查找是否有對應的key(可以直接用介面的urlTag做key)，如果有，直接取數據先顯示出來，之後請求介面後更新數據。
如果你只是比較檔次會話的介面數據，可以使用sessionStorage，不會永久佔用資源。
I. 解決vue2.x中數據渲染以及vuex緩存的問題
最近在學習Vue.js，把自己遇到的問題做個記錄，所以，今天添加一點小筆記。
在項目中遇到兩個問題，簡單的做個筆記來記錄自己解決的問題，可能不是很好的處理辦法，歡迎提出，自己還在不斷優化中...
第一個是vue在載入頁面的時候，會先載入靜態資源，這個時候數據還沒有請求回來，用戶會先看到靜態的內容（就是頁面固定寫死的），過一會才會有數據回來渲染，這體驗是很差的，其實解決辦法也很簡單，就是用vue里的
v-if
來判斷請求的數據是否返回...
<div
class="container"
id="app"
v-cloak>
<div
v-if='moneyInMsg.uuid'>
<in-account-msg
:money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
這里的
v-if
=
'moneyInMsg.uuid'
就是來判斷數據有沒有請求回來，如果請求回來就讓他顯示，沒有請求到數據，就讓他loading，這樣體驗就會好很多。在這里還需要注意的是，v-if判斷的數據源，是數據返回的欄位，如果兩個欄位只能存在其一的話，可以v-if
='a
||
b'
來判斷數據是否成功的返回；還要注意的一點是，不能直接在組件里用v-if判斷，也不能直接在根標簽里判斷，直接嵌套一個div就可以解決，並不影響樣式，只做數據是否正常返回的顯示作用；
第二個就是在使用vuex時，有數據緩存；我遇到的情況是，在列表頁點擊進入詳情頁，返回到列表頁，在進入另一個詳情頁的時候，數據會顯示之前的數據，同時頁面還在loading（介面返回的數據比較慢），過一會數據返回的時候，才重新渲染頁面。可能是自己對vuex理解的不夠深入，沒有在vuex基礎上解決這個問題。雖然曲折的解決了這個問題，但是不夠zhuang,但是解決了問題，後期再做優化。
在之前解決的方案中，是進入頁面的時候，重新刷新頁面，重新請求數據，代碼如下：
export
const
refresh
=
(title)
=>
{
document.title
=
title;
let
iframe
=
document.createElement('iframe');
iframe.src
=
require('./mm.jpg');
iframe.setAttribute('style',
'display:none;');
let
loadFn
=
function
()
{
iframe.removeEventListener('load',
loadFn);
document.body.removeChild(iframe);
console.info('Page
Title
IS
'
+
title);
iframe
=
null;
loadFn
=
null;
}
document.body.appendChild(iframe)
iframe.addEventListener('load',
loadFn);
}
但是沒有達到預期的效果，依然會出現上面的情況...
丫的,抓狂了...（被別人催的感覺真的不爽...）
網路啊，google啊，都沒有遇到這種情況的？找到一個，還是提問的，沒有回答的，好吧，還是靠自己。自己動手，豐衣足食啊...
思路是，定義一個參數status為false，當數據沒有請求回來，就不顯示，也是用上面的方式來判斷，一直loading（請求失敗，去掉loading），當數據返回的時候，讓status為true；使用$nextTick來更新數據...
貼上自己部分的代碼作為參考:
<template>
<div
v-if='status
&&
order.name'>
//頁面展示的數據
</div>
</template>
<script>
export
default{
data(){
return
{
status：false
}
},
created(){
var
_this
=
this;
this.setDd({res
=>{
_this.$nextTick(function(){
_this.status=
true
});
}})
},
computed:{
...mapGetters({//getter獲取的數據})
},
methods:{
...mapActions(['setDd'])
//獲取數據的方法
}
}
</script>
處理的方式比較醜陋...,但是實現了想要的效果；這里注意一點就是v-if的判斷問題。（v-if='status
&&
order.name'）這個用了並且，目的是有數據返回，才能讓他顯示，如果沒有數據，會顯示靜態的值，數據都為underfind...
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。