腳本之家服務器常用軟件

快捷導航

軟件下載

android MAC 驅動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

更新時間：2022年01月24日 14:44:08 作者：YOYO__2018

這篇文章主要介紹了vue解決刷新頁面時會出現(xiàn)變量閃爍的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

刷新頁面時會出現(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是在可用的注入內容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個key;default指定默認值。

provide/inject 組合如何實現(xiàn)頁面不閃爍刷新

在 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
      })
    }
  }
}

在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加…）,在子組件內引入（inject）然后直接this.reload()調用，即可刷新當前頁面。

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片