Kaip priverstinai atnaujinti komponentą Vue?

Vue komponento priverstinis atnaujinimas paprastai nereikalingas, nes Vue reaguojančiai stebi duomenų pokyčius ir automatiškai atnaujina DOM. Jei susiduriama su situacija, kai komponentas neatsinaujina keičiantis išoriniais veiksniais, tai gali rodyti duomenų reaguojamumo problemą arba komponento logiką.

Retais atvejais, kai reikia priverstinai atnaujinti komponentą, galima naudoti šiuos metodus, nors jie laikomi antipattern'ais:

1. Naudojant v-if arba v-show su raktu (key): Galima naudoti sąlyginį komponento atvaizdavimą keičiant rakto reikšmę, kas privers Vue iš naujo sukurti komponentą.

   <template>
     <my-component :key="componentKey"></my-component>
   </template>
   
   <script>
   export default {
     data() {
       return {
         componentKey: 0,
       };
     },
     methods: {
       forceRerender() {
         this.componentKey += 1;
       }
     }
   }
   </script>
   

   Šis metodas iš esmės naikina ir iš naujo sukuria komponento egzempliorių.

2. Naudojant $forceUpdate: Šis metodas priverčia Vue atlikti pakartotinį komponento atvaizdavimą be pakeitimų jo reaguojamuosiuose duomenyse.

   // Komponento metodo ar gyvenimo ciklo hook viduje
   this.$forceUpdate();
   

   $forceUpdate reikėtų vengti, jei įmanoma išspręsti problemą reaguojamais būdais. Jis nepakeis vaikų, nevirtualių komponentų.

Pagrindinė rekomendacija — nevartoti priverstinio atnaujinimo, o išsiaiškinti priežastis, kodėl komponentas nereaguoja į pokyčius. Dažnai tai susiję su netinkamu reaguojamųjų savybių naudojimu (pavyzdžiui, naujų savybių pridėjimu objektui be Vue.set arba reaguojamųjų masyvų metodų).