Чӣ гуна навсозии маҷбурии компонент дар 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'га компонентни қайтадан рендер қилишни мажбур қилади, лекин реактив маълумотлардаги ўзгаришларни ҳисобга олмайди.

   // Компонентнинг içида ва ёки ҳаёт цикллари хукида
   this.$forceUpdate();
   

   $forceUpdateдан фойдаланишни олдини олиш керак, агар муаммони реактив воситалар билан ҳал қилиш мумкин бўлса. У виртуал бўлмаган фарзанд компонентларни янгиламайди.

Асосий тавсия — мажбурий янгилашга мурожаат қилмаслик ва компонент нега ўзгаришларга реакция бермаётганини тушуниш. Бу кўпинча реактив хусусиятлар билан нотўғри ишлаш (масалан, Vue.set ёки реактив массивлар методларисиз янги хусусиятлар қўшиш) билан боғлиқ бўлади.