刷新頁面時會出現(xiàn)變量閃爍問題

在使用vue綁定數(shù)據(jù)的時候，刷新頁面時會出現(xiàn)變量閃爍，

解決辦法是: v-cloak

將代碼修改如下：

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

vue刷新當前頁面，且頁面不閃爍

場景：

• 在處理列表時，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當前頁面的需求。
• 需要切換中英文的網(wǎng)站，
• 大體概念就是頁面數(shù)據(jù)發(fā)生改變需要重新獲取數(shù)據(jù)或刷新當前頁時

刷新當前頁的方法

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

provide/inject 組合介紹

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

• provide：是一個對象，或者是一個返回對象的函數(shù)。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。(注意：子孫層的provide會掩蓋祖父層provide中相同key的屬性值)
• inject：一個字符串數(shù)組，或者是一個對象。屬性值可以是一個對象，包含from和default默認值，from是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個key;default指定默認值。

provide/inject 組合如何實現(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)用，即可刷新當前頁面。

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