vue解決刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍的問題
更新時(shí)間：2022年01月24日 14:44:08 作者：YOYO__2018
這篇文章主要介紹了vue解決刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍問題
在使用vue綁定數(shù)據(jù)的時(shí)候，刷新頁面時(shí)會(huì)出現(xiàn)變量閃爍，
解決辦法是: v-cloak
將代碼修改如下：
<div class="#app" v-cloak>
? ? <p>{{value.name}}</p>
</div>vue刷新當(dāng)前頁面，且頁面不閃爍
場(chǎng)景：
- 在處理列表時(shí)，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁面的需求。
- 需要切換中英文的網(wǎng)站，
- 大體概念就是頁面數(shù)據(jù)發(fā)生改變需要重新獲取數(shù)據(jù)或刷新當(dāng)前頁時(shí)
刷新當(dāng)前頁的方法
- 使用window.reload()，或者router.go(0)刷新時(shí)，整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，用戶體驗(yàn)不好
- provide/inject 組合
provide/inject 組合介紹
作用：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深
provide：是一個(gè)對(duì)象，或者是一個(gè)返回對(duì)象的函數(shù)。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。(注意：子孫層的provide會(huì)掩蓋祖父層provide中相同key的屬性值)inject：一個(gè)字符串?dāng)?shù)組，或者是一個(gè)對(duì)象。屬性值可以是一個(gè)對(duì)象，包含from和default默認(rèn)值，from是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個(gè)key;default指定默認(rèn)值。
provide/inject 組合如何實(shí)現(xiàn)頁面不閃爍刷新
在 App.vue 內(nèi)聲明 reload 方法，控制 router-view 的顯示或隱藏，從而控制頁面的再次加載
<template>
<div id="app" v-if="isRouterAlive">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加…）,在子組件內(nèi)引入（inject）然后直接this.reload()調(diào)用，即可刷新當(dāng)前頁面。
export default {
? inject: ['reload'],
? methods: {
? ? login() {
? ? ? this.reload()
? ? }
? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件間通信-Vuex,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析
這篇文章主要為大家介紹了簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue2項(xiàng)目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
使用Vue.js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
在Vue.js中，雙向數(shù)據(jù)綁定是一項(xiàng)非常強(qiáng)大的功能，它能夠使數(shù)據(jù)和視圖之間保持同步，讓開發(fā)者更加方便地操作數(shù)據(jù)，在本文中，我們將介紹如何用Vue.js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)小球滑動(dòng)交叉效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)小球滑動(dòng)交叉，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue3中的hook簡(jiǎn)單封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js計(jì)算屬性computed用法實(shí)例分析
這篇文章主要介紹了vue.js計(jì)算屬性computed用法,結(jié)合實(shí)例形式分析了vue.js使用computed方式進(jìn)行屬性計(jì)算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
手把手帶你安裝vue-cli并創(chuàng)建第一個(gè)vue-cli應(yīng)用程序
vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度,支持熱更新,有webpack-dev-server的支持,相當(dāng)于啟動(dòng)了一個(gè)請(qǐng)求服務(wù)器,給你搭建了一個(gè)測(cè)試環(huán)境,下面這篇文章主要給大家介紹了關(guān)于安裝vue-cli并創(chuàng)建第一個(gè)vue-cli應(yīng)用程序的相關(guān)資料,需要的朋友可以參考下2022-08-08