目錄

• 重新整理頁面時會出現變數閃爍問題
• 解決辦法是: v-cloak
• 重新整理當前頁面，且頁面不閃爍
• 場景：
• 重新整理當前頁的方法
• provide/inject 組合介紹
• provide/inject 組合如何實現頁面不閃爍重新整理

重新整理頁面時會出現變數閃爍問題

在使用vue繫結資料的時候，重新整理頁面時會出現變數閃爍，

解決辦法是: v-cloak

將程式碼修改如下：

<div class="#app" v-cloak>
  <p>{{value.name}}</p>
</div>

vue重新整理當前頁面，且頁面不閃爍

場景：

• 在處理列表時，常常有刪除一條資料或者新增資料之後需要重新重新整理當gFEVxYG
  前頁面的需求。
• 需要切換中英文的，
• 大體概念就是頁面資料發生改變需要重新獲取資料或重新整理當前頁時

重新整理當前頁的方法

• 使用window.reload()，或者router.go(0)重新整理時，整個瀏覽器進行了重新載入，閃爍，使用者體驗不好
• provide/inject 組合

provide/inject 組合介紹

作用：允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深

• provide：是一個物件，或者是一個返回物件的函式。裡面呢就包含要給子孫後代的東西，也就是屬性和屬性值。(注意：子孫層的provide會掩蓋祖父層provide中相同key的屬性值)
• inject：一個字串陣列，或者是一個物件。屬性值可以是一個物件，包含from和default預設值，from是在可用的注入內容中搜索用gFEVxYG
  的 key (字串或 Symbol)，意思就是祖父多層provide提供了很多資料，from屬性指定取哪一個key;default指定預設值。

provide/inject 組合如何實現頁面不閃爍重新整理

在 App.vue 內宣告 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
      }www.cppcns.com)
    }
  }
}

在頁面注入App.vue元件提供（provide）的 reload 依賴，在邏輯完成之後（刪除或新增…）,在子元件內引入（inject）然後直接this.reload()呼叫，即可重新整理當前頁面。

export default {
 inject: ['reload'],methods: {
  login() {
   this.reload()
  }
 }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。