問(wèn)題：彈出框添加內(nèi)容后隱藏，然后再次點(diǎn)擊打開的時(shí)候內(nèi)容還在，此時(shí)需要刷新組件來(lái)操作。或者有些時(shí)候我們需要強(qiáng)制觸發(fā)組件的刷新，又或者數(shù)據(jù)明明改變了，但是確沒(méi)有刷新視圖。

一：$forceupdate() (僅針對(duì)當(dāng)前組件以及其插槽相關(guān)子組件)

例如：當(dāng)data中的某個(gè)內(nèi)容進(jìn)行了改變，但是頁(yè)面沒(méi)有進(jìn)行實(shí)時(shí)的刷新，而我又通過(guò)打印能確定數(shù)據(jù)確實(shí)改變了，因此可以使用$ forceupdate()來(lái)迫使當(dāng)前組件刷新

// 代碼執(zhí)行完畢數(shù)據(jù)確實(shí)改變了，但是頁(yè)面沒(méi)刷新的情況，需要下面的內(nèi)容
this.$forceupdate();

this.$forceupdate()迫使vue組件重新渲染，實(shí)際上指的是強(qiáng)制重啟render函數(shù)。即調(diào)用該方法后只會(huì)觸發(fā)beforeUpdate、updated這兩個(gè)生命周期，而且只會(huì)影響當(dāng)前組件以及其插槽內(nèi)容

最常見(jiàn)的問(wèn)題：就是在v-for循環(huán)或者某個(gè)操作中對(duì)data中的內(nèi)容進(jìn)行增加、修改、或者刪除操作，data中的數(shù)據(jù)確實(shí)改變了，而且打印的內(nèi)容也改變了，但是頁(yè)面卻沒(méi)有刷新達(dá)到理想效果，這里則可以使用this.$ forceupdate()。
問(wèn)題誕生的本質(zhì)是vue雖然是響應(yīng)式的.但受到j(luò)avascript的限制，Vue不能檢測(cè)到對(duì)象屬性的添加或刪除，因?yàn)関ue在初始化實(shí)列時(shí)將屬性轉(zhuǎn)為getter/setter，所以屬性必須在data對(duì)象上才能讓vue轉(zhuǎn)換它
調(diào)用$ forceupdate()就能夠讓頁(yè)面重啟render函數(shù)，即將數(shù)據(jù)的改變重新進(jìn)行渲染，就感覺(jué)手動(dòng)刷新頁(yè)面一樣，但是只會(huì)觸發(fā)兩個(gè)生命周期beforeUpdate和updated
該問(wèn)題的另一種解決方式可以使用Vue.$set()

二：

v-if通過(guò)變量控制的形式，可以觸發(fā) 被控制的組件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 這6個(gè)生命周期，但是由于v-if指令的原因，會(huì)導(dǎo)致其控制的內(nèi)容會(huì)發(fā)生顯示與隱藏操作

使用v-if加上變量的形式來(lái)控制組件的加載與銷毀，好處在于能夠直接觸發(fā)組件的完整生命周期
使用v-if的好處在于可以在父組件中通過(guò)某個(gè)變量來(lái)控制子組件的渲染，打開的時(shí)候子組件會(huì)觸發(fā)beforeCreate、created、beforeMount、mounted四個(gè)生命周期，關(guān)閉的時(shí)候子組件會(huì)觸發(fā)beforeDestroy、destroyed兩個(gè)生命周期，因此在某些操作中如果需要通過(guò)某個(gè)變量的內(nèi)容來(lái)對(duì)子組件進(jìn)行生命周期的刷新，即可用v-if來(lái)進(jìn)行顯隱操作

三：通過(guò)key屬性來(lái)進(jìn)行刷新操作，在web中的效果是最理想的，因?yàn)轫?yè)面根本感覺(jué)不到組件的銷毀與創(chuàng)建過(guò)程，但是確實(shí)滿足了組件的刷新功能。
操作方式：在data中定義某個(gè)變量，然后將該變量放置在組件的key屬性中，要實(shí)現(xiàn)該組件刷新時(shí)，只需改變變量的值即可

<template>
    <child ref="child1" :key='value'></child>
</template>
<script>
import child from "./child";
export default {
 components: { child },
 data() {
    return {
      value: '0'// 只需要通過(guò)操作如改變這個(gè)值，child子組件就會(huì)刷新，而且視覺(jué)上不會(huì)有變化,當(dāng)key值改變的時(shí)候，child子組件實(shí)際上經(jīng)歷了新的child的創(chuàng)建過(guò)程以及舊的child的銷毀過(guò)程
    };
  },
 }
</script>

總結(jié)

以上是生活随笔為你收集整理的vue强制刷新组件更新数据的方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。