分析原因: 為什么刷新會(huì)出現(xiàn)閃爍的問(wèn)題?

因?yàn)闉g覽器是html從上到下執(zhí)行，

先執(zhí)行Dom元素

然后執(zhí)行javaScript元素

當(dāng)走到j(luò)avaScript時(shí)，Dom元素已經(jīng)開(kāi)始走動(dòng)，所以如果網(wǎng)慢的話，會(huì)顯示的特別明顯

解決方法: 使用 v-cloak 用法

v-cloak指令 和 css規(guī)則 [v-cloak] {display:none} 一起用時(shí)，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

原理：

帶有v-clock的的元素設(shè)置為display:none，隱藏掉，在等到vue解析到帶有v-clock的節(jié)點(diǎn)時(shí)候，會(huì)把a(bǔ)ttribute和class同時(shí)remove掉，這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。

實(shí)例：

[v-cloak] {
display: none; 
} 
<div v-cloak>
{{ message }}
</div>

圖解：

html 代碼

加在掛載點(diǎn)(#app),可以讓整個(gè)頁(yè)面在未加載完JS時(shí),整個(gè)頁(yè)面都不渲染, 如果不需要,只需要在對(duì)應(yīng)閃爍的標(biāo)簽中加v-cloak即可

css 代碼

關(guān)于Vue刷新頁(yè)面問(wèn)題

Vue 中是單頁(yè)面，當(dāng)然需要刷新數(shù)據(jù)咯

你一定遇到這樣的需求：

比如在刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新或者這個(gè)頁(yè)面有個(gè)組件 ，但是這個(gè)組件里面的點(diǎn)擊事件還是到當(dāng)前頁(yè)面 

如何解決 

1.在使用Vue-router做項(xiàng)目時(shí)，會(huì)遇到如/serviceId/:id這樣只改變id號(hào)的場(chǎng)景。由于router-view是復(fù)用的，單純的改變id號(hào)并不會(huì)刷新router-view，而這并不是我們所期望的結(jié)果。

2.我們可以在點(diǎn)擊事件上  window.reload()，或者router.go(0)刷新時(shí)，強(qiáng)制刷新整個(gè)頁(yè)面。整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，體驗(yàn)不好

3.使用watch的方法，具體的可以看一下官方文檔

watch: {?
'$route': function (to, from) {?
? ? ? ?this.$store.dispatch('updateActiveTemplateId',?
? ? ? ?this.$route.params.templateId) // 通過(guò)更新Vuex中的store的數(shù)據(jù)，讓數(shù)據(jù)發(fā)生變化?
? ? ? ? ? ?this.getTemplateById()?
} }

當(dāng)然我也看過(guò)一些博客，總結(jié)了下 如何更好的解決

provide / inject 組合

作用：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

在你的App.vue頁(yè)面里面

聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載

然后在你的詳情頁(yè)面

tableList.vue:

在頁(yè)面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當(dāng)前頁(yè)面。

解釋下：

• provide：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。
• inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。

當(dāng)然你不能 是在created里調(diào)用getData(), 在getData里又調(diào)用了this.reload().

這樣會(huì)導(dǎo)致死循環(huán)的 ，所以要合理的運(yùn)用就這個(gè)方法

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論