[Vue] 現在のページの更新を実現する 4 つの方法

序文

過去 2 週間、私はバックグラウンド管理を書いています.追加、削除、変更、およびチェックのためにインターフェイスを呼び出すたびに、現在のページを更新するか、データを更新する必要があります。ブラウザーの小さな円を手動でクリックすると、面倒なだけでなく、ユーザー エクスペリエンスが非常に悪くなり、実際にユーザーに手動で更新するよう求める人はいません。. . この問題は、フロントエンドのバグと呼ぶことができます。次に、この質問に従って、検索後、現在のページを更新するいくつかの方法を次のように整理しました。

方法 1: location.reload

JS を学習する過程で、誰もがBrowser オブジェクトを知っているはずであり、Location オブジェクトはwindow オブジェクトの一部です。Location オブジェクトにはメソッドがあり、reload()ブラウザのページの更新ボタンと同様に、現在のドキュメントを更新するために使用されます。

コード テスト:

<template>
  <div class="hello">
    <img src="../imgs/01.jpg" alt="" />
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
    
    
  name: "HelloWorld",
  methods: {
    
    
    refresh() {
    
    
      location.reload();
    },
  },
};
</script>

<style scoped>
.hello img {
    
    
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

結果を示す：

短所：誰もがそれを見ることができると思います、きらめきときらめき〜

方法 2: $router.go(0)

この方法は誰にとっても馴染み深いものであり、vue ルーティング ジャンプを学んだ人なら誰でも$router.go()その機能を知っています。

> this.$router.go(-1)：后退+刷新；
> this.$router.go(0)：刷新；
> this.$router.go(n) ：前进n个页面

この方法は上記と同等でlocation.reload、ブラウザの更新機能を利用してF5を無茶苦茶に押して更新します。. .

コード テスト:

<template>
  <div class="hello">
    <img src="../imgs/02.jpg" alt="" />
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
    
    
  name: "HelloWorld",
  methods: {
    
    
    refresh() {
    
    
      this.$router.go(0);
    },
  },
};
</script>

<style scoped>
.hello img {
    
    
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

結果を示す：

短所：肉眼で見える！一瞬空白のページが表示され、ユーザー エクスペリエンスは良くありません。

方法 3: 提供、注入、および $nextTick

まず、一連のオプションについて理解しましょう。

provide オプションは、オブジェクトまたはオブジェクトを返す関数でなければなりません。
inject オプションは、文字列の配列、または [キー] がローカル バインディング名であるオブジェクトである必要があります。

Vue の親子コンポーネント通信を学習するときは、親コンポーネントがprovide子コンポーネントにデータを渡し、子コンポーネントがinjectデータを取得するという、これが何のためにあるのかを誰もが知っているはずです。
それで、$nextTickまたどうしたの？
$nextTickこれは Vue のもう 1 つのライフサイクル機能でもあります。データを変更した後 (データが更新される)、Vue は DOM の操作を支援し、実際の DOM をページに配置し (Dom 更新レンダリング)、Vue がそれを呼び出します。この関数 (変更されている DOM 要素をリッスンし、この関数で実行するロジックを記述できます)。
次に、アイデアを組み合わせましょう。ページのリロードを制御するために、子コンポーネントを親コンポーネントに追加することで、子コンポーネントが破棄および再構築される方法を制御します
。次に、現在のページを更新する必要があるページに依存関係、を介して直接更新を呼び出します。<router-view></router-view>v-ifreloadthis.reload

コード テスト:

アプリのコンポーネント:

<template>
  <div id="app">
    <HelloWorld v-if="isReload" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
    
    
  name: "App",
  data() {
    
    
    return {
    
    
      isReload: true,
    };
  },
  components: {
    
    
    HelloWorld,
  },
  provide() {
    
    
    return {
    
    
      msg: "未刷新",
      reload: this.reload,
    };
  },
  methods: {
    
    
    async reload() {
    
    
      this.isReload = false;
      await this.$nextTick();
      this.isReload = true;
    },
  },
};
</script>

サブアセンブリ:

<template>
  <div class="hello">
    <img src="../imgs/03.jpg" alt="" />
    <p>{
    
    {
    
     msg }}</p>
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
    
    
  inject: ["reload", "msg"],
  name: "HelloWorld",
  methods: {
    
    
    refresh() {
    
    
      this.msg = "我刷新啦！";
      this.reload;
    },
  },
};
</script>

<style scoped>
.hello img {
    
    
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

結果を示す：

短所:ページが白くならないことがわかりますが、この方法にも多くの短所があります。Vue がデータを変更した後、ビューがすぐに更新されないことは誰もが知っていますが、同じイベント ループ内のすべてのデータ変更が完了すると、ビューは一様に更新されます。これはイベント ループを引き起こしやすく、使用するのが少し面倒でありprovide、injectコンポーネントのマルチレベル通信も必要です。

方法 4: 白紙のページを作成する

この方法は…今まで使ったことがありませんが、ルーティングを使って空白ページにジャンプし、$router.replace空白ページですぐに$router.replace元のページに切り替えるというものです。$router.replace履歴に新しいレコードが追加されることはなく、ルーティングがより速くジャンプする場合、一時的な空白ページはありません。

コード テスト:

空白ページ：

<template>
  <div class="hello"></div>
</template>

<script>
export default {
    
    
  name: "HelloTest",
  created() {
    
    
    this.$router.replace(this.$route.query.redirect);
  },
};
</script>


<style scoped>
</style>

更新が必要なページ:

<template>
  <div class="hello">
    <img src="../imgs/04.jpg" alt="" />
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
    
    
  name: "HelloWorld",
  methods: {
    
    
    refresh() {
    
    
      this.$router.replace(`/blank?redirect=${
      
      this.$route.fullPath}`);
    },
  },
};
</script>

<style scoped>
.hello img {
    
    
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

ルーティング：

const router = new VueRouter({
    
    
  mode: 'history',
  routes: [{
    
    
    path: "/",
    component: () => import('../components/HelloWorld.vue'),
    meta: {
    
    
      keepAlive: true,
    }
  },
  {
    
    
    path: "/blank",
    component: () => import('../components/HelloTest.vue'),
    meta: {
    
    
      keepAlive: true,
    }
  }]
})

結果を示す：

短所:誰でもアドレス バーの変更を確認できる必要があります。. .

上記は、より一般的な現在のページ更新方法であり、それぞれに長所と短所があり、アプリケーション シナリオに従って使用されます。
間違っている場合は、私を修正してください！