Vueда компонентти мажбурий жаңыртуу кандай?

Vue-де компонентті мәжбүрлі жаңарту әдетте қажет емес, себебі Vue мәліметтердің реактивті өзгерістерін қадағалап, автоматты түрде DOM-ды жаңартады. Егер сыртқы факторлардың өзгеруіне байланысты компонент жаңартылмаса, бұл мәліметтердің реактивтілігі немесе компоненттің логикасында мәселе болуы мүмкін.

Аз жағдайларда, егер компонентті мәжбүрлі жаңарту қажет болса, келесі тәсілдерді қолдануға болады, олар антипаттерн ретінде саналады:

1. v-if немесе v-show-мен кілт (key) қолдану: Компонентті шартты түрде қайта құру үшін, кілт мәнін өзгертуге болады, бұл Vue-ға компонентті қайта құруға мәжбүр етеді.

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

   Бұл әдіс компоненттің мысалын жояды және қайта жасайды.

2. $forceUpdate қолдану: Бұл әдіс Vue-ға компонентті қайтадан рендерлеуді мәжбүр етеді, бірақ оның реактивті деректеріндегі өзгерістерді ескермейді.

   // Компоненттің әдісі немесе өмірлік цикл хукінде
   this.$forceUpdate();
   

   $forceUpdate қолданудан аулақ болу керек, егер мәселені реактивті құралдармен шешу мүмкін болса. Ол виртуалды емес балалар компоненттерін жаңартпайды.

Негізгі ұсыныс — мәжбүрлі жаңартуға жүгінбеу, ал компонент неге өзгерістерге реакция бермейтінін түсіну. Бұл көбінесе Vue.set қолданбай объектке жаңа қасиеттер қосу немесе реактивті массив әдістерін қолданбау сияқты дұрыс емес реактивті жұмыс істеуге байланысты.