vue 強制刷新組件

使用vue進行開發時，如果要刷新當前路由，則調用router.go(0)方法即可。但是某些情況下，我們可能要求僅僅刷新某個組件，而不是路由，那么我們應該怎么做呢？

1.使用this.$forceUpdate強制重新渲染

如果要在組件內部中進行強制刷新，則可以調用this.$forceUpdate()強制重新渲染組件，從而達到更新目的。

<template> <button @click="reload()">刷新當前組件</button> </template> <script> export default { name: 'comp', methods: { reload() { this.$forceUpdate() } } } </script> 

2.使用v-if指令

如果是刷新某個子組件，則可以通過v-if指令實現。我們知道，當v-if的值發生變化時，組件都會被重新渲染一遍。因此，利用v-if指令的特性，可以達到強制刷新組件的目的。

<template> <comp v-if="update"></comp> <button @click="reload()">刷新comp組件</button> </template> <script> import comp from '@/views/comp.vue' export default { name: 'parentComp', data() { return { update: true } }, methods: { reload() { // 移除組件 this.update = false // 在組件移除后，重新渲染組件 // this.$nextTick可實現在DOM 狀態更新后，執行傳入的方法。 this.$nextTick(() => { this.update = true }) } } } </script>