Kuidas sundida Vue-s komponenti uuendama?

Vue komponendi jõuga uuendamine tavaliselt ei ole vajalik, kuna Vue jälgib reaktiivselt andmete muutusi ja uuendab DOM-i automaatselt. Kui olukord nõuab, et komponent ei uuendaks väliste tegurite muutmisel, võib see viidata andmete reaktiivsuse probleemile või komponendi loogikale.

Harvadel juhtudel, kui on vaja jõuga uuendada komponenti, saab kasutada järgmisi lähenemisviise, kuigi neid peetakse antipattern'ideks:

1. v-if või v-show kasutamine võtmega (key): Võite kasutada tingimuslikku renderdamist, muutes võtme väärtust, mis sunnib Vue-d uuesti looma komponendi.

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

   See meetod hävitab ja loob komponendi eksemplari uuesti.

2. $forceUpdate kasutamine: See meetod sunnib Vue-d uuesti renderdama komponendi ilma selle reaktiivsete andmete muutmata.

   // Komponendi meetodis või elutsükli hook'is
   this.$forceUpdate();
   

   $forceUpdate-i kasutamist tuleks vältida, kui on võimalik probleemi lahendada reaktiivsete vahenditega. See ei uuenda lapskomponente ega virtuaalseid komponente.

Peamine soovitus — vältida jõuga uuendamist ning uurida, miks komponent ei reageeri muudatustele. See on sageli seotud vale reaktiivsete omaduste kasutamisega (näiteks uute omaduste lisamine objektile ilma Vue.set või reaktiivsete massiivimeetodite kasutamiseta).