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>