VUE が現在のページを更新する 7 つの方法

location.reload() メソッドを使用してページを更新します。

location.reload()メソッドを使用して現在のページを単純に更新できます。このメソッドは、ユーザーがブラウザの更新ボタンをクリックするのと同じように、現在のページを再読み込みします。

Vue では、このメソッドを Vue インスタンスにバインドできます。たとえば、Vue のメソッドに次のメソッドを追加します。

methods: {
  refresh() {
    location.reload();
  }
}

次に、テンプレート内でこのメソッドを呼び出してページを更新します。

<button @click="refresh">刷新页面</button>

このメソッドはページ全体をリロードすることに注意してください。ページの一部を更新したい場合は、コンポーネントの key 属性を設定してコンポーネントを更新したり、メソッドを呼び出してコンポーネントを更新します$forceUpdate()。

ジャンプをルーティングするときは、$router.go(0) メソッドを使用して現在のページを更新します。

methods: {
  refresh() {
    this.$router.go(0)
  }
}

$router.go(0) メソッドは現在のページを更新できます。現在のルートに対応するコンポーネントが再ロードされます。これは、ページを再レンダリングすることと同じです。現在のページに変更を加えた後、このメソッドを使用してページを更新すると、変更が有効になります。

$router.go(0) メソッドは現在のルートにのみ適用されます。別のルートに対応するページを更新したい場合は、ページのルートへのリダイレクトやアプリケーション全体の更新など、他の方法を使用する必要があります。

コンポーネントで、コンポーネントの key 属性を設定してコンポーネントの再レンダリングをトリガーし、それによってページを更新します。

Vue では、各コンポーネントに一意のキー属性があります。コンポーネントのキー属性が変更されると、Vue は前のコンポーネントを再利用するのではなく、新しいコンポーネントとして扱います。これにより、コンポーネントの再レンダリングがトリガーされ、ページが更新されます。

更新する必要があるコンポーネントに key 属性を設定します。これは、次のように文字列、数値、または変数に設定できます。

<template>
  <my-component :key="refreshKey"></my-component>
</template>
<script>
export default {
  data() {
    return {
      refreshKey: 0 // 初始值为0
    }
  },
  methods: {
    handleRefresh() {
      // 点击刷新按钮，改变 refreshKey 的值触发组件的重新渲染
      this.refreshKey++
    }
  }
}
</script>

コンポーネントで、$emit メソッドまたは $parent 親コンポーネントメソッドを使用して、handleRefresh 関数をトリガーし、refreshKey の値を変更します。

<template>
  <button @click="handleRefresh">刷新</button>
</template>
<script>
export default {
  methods: {
    handleRefresh() {
      this.$emit('refresh') // 触发当前组件的 refresh 事件
      // 或者
      this.$parent.handleRefresh() // 触发父组件的 handleRefresh 方法
    }
  }
}
</script>

ページ更新効果を実現するために、コンポーネントが再レンダリングされます。

注: トリガーされたイベント、または 2 番目のステップで呼び出された親コンポーネントのメソッドは、コンポーネントの親コンポーネントで監視または定義する必要があります。たとえば、親コンポーネントで子コンポーネントの更新イベントをリッスンします。

<template>
  <my-component @refresh="handleRefresh"></my-component>
</template>
<script>
export default {
  methods: {
    handleRefresh() {
      // 刷新操作
    }
  }
}
</script>

現在のページを更新するには、window.location.href = window.location.href を使用します。

window.location.href = window.location.hrefVue を使用して現在のページを更新することもできます。このメソッドは、現在の URL に対応するページを再読み込みして、ページの更新効果を実現します。この操作は、次のような Vue のメソッドで実行できます。

<template>
  <div>
    <button @click="refreshPage">刷新</button>
  </div>
</template>
<script>
export default {
  methods: {
    refreshPage() {
      window.location.href = window.location.href
    }
  }
}
</script>

このメソッドを使用すると、Vue インスタンス、コンポーネント、その他のページ要素を含むページ全体が更新されるため、不必要なオーバーヘッドが発生する可能性があり、最適な解決策ではないことに注意してください。Vue コンポーネントの部分的な更新の場合は、コンポーネントのキー属性または Vuex などの状態管理ツールを管理に使用することを検討できます。

window.location.reload(true) メソッドを使用して現在のページを更新します。 true はキャッシュの更新を強制することを意味します。

window.location.reload(true)このパラメータは実際にはtrue、キャッシュリフレッシュの使用を強制するのではなく、リフレッシュにキャッシュの使用を強制することを意味します。に設定するとtrue、ブラウザはサーバーからリソースを再リクエストするのではなく、キャッシュからページリソースを読み込みます。これは、キャッシュのフラッシュを強制するという逆効果になります。

同様に、パラメータがに設定されているfalseか省略されている場合、ブラウザはキャッシュを無視し、真の更新効果を実現するためにサーバーからリソースを強制的に再リクエストします。

Vue では、次のようなコードを使用してページを更新できます。

<template>
  <div>
    <button @click="refreshPage">刷新</button>
  </div>
</template>
<script>
export default {
  methods: {
    refreshPage() {
      window.location.reload()
    }
  }
}
</script>

注: このメソッドは、Vue インスタンス、コンポーネント、その他のページ要素を含むページ全体を更新します。これにより、不必要なオーバーヘッドが発生する可能性があり、最適な解決策ではありません。Vue コンポーネントの部分的な更新の場合は、コンポーネントのキー属性または Vuex などの状態管理ツールを管理に使用することを検討できます。

ページを自動的に更新するには、メタタグの http-equiv 属性を使用して更新を設定します。

meta>< タグ内でhttp-equiv属性を使用するとcontent、その属性と連動してページを自動的に更新できます。

具体的には、head>HTML ドキュメントの < 領域に次のコードを追加できます。

<meta http-equiv="refresh" content="5">

このうちhttp-equiv属性は、ページの処理にどの HTTP メソッドを使用するかをブラウザーに指示するもので、ここで設定すると、refreshブラウザーは定期的にページを更新する必要があります。contentこの属性は更新間隔を指定します。ここでは 5 秒に設定されています。

ただし、metaタグによって実装された自動更新機能を使用すると、ユーザーは手動で更新を停止したり、更新間隔を変更したりすることができないため、ユーザーエクスペリエンスに一定の影響を与える可能性があります。この機能を使用する場合は、更新頻度とユーザーエクスペリエンスのバランスをよく考慮して使用することをお勧めします。

更新する必要があるコンポーネントでは、$forceUpdate() メソッドを使用してコンポーネントを強制的に更新し、それによってページを更新します。

Vue では、$forceUpdate()このメソッドを使用してコンポーネントの強制更新を実装し、ページを更新できます。

具体的には、コンポーネントのデータが変更されたが、コンポーネントのビューが時間内に更新されず、その結果ページが正しくレンダリングされない場合、更新が必要なコンポーネント内のメソッドを呼び出して更新を強制できます$forceUpdate()。

たとえば、コンポーネントのメソッドでページを更新する必要がある場合は、次のように呼び出すことができます。

methods: {
  refresh() {
    this.$forceUpdate();
  }
}

ただし、$forceUpdate()コンポーネント全体が強制的に更新されるため、コンポーネントのすべてのサブコンポーネントも再レンダリングされ、ページ全体のパフォーマンスに影響を与える可能性があります。したがって、この方法は必要な場合にのみ慎重に使用する必要があります。