vue中的父組件及子組件生命周期的執行順序


 

一、沒有任何任何顯示與隱藏限制條件的情況下:

1.運行的順序依次是:

父組件created→父組件beforeMounted→子組件created→子組件beforeMounted→子組件mounted→父組件mounted;

二、當用v-show來控制子組件顯示與隱藏的時候:

1.當用v-show='show',當show的默認值為true,執行順序同上;

2.當用v-if='show',當show的默認值為true,執行順序依然同上;

3.當用v-show='show',當show的默認值為false,無論在父組的生命周期(created,beforeMount)將show 變為true,執行的順序依然如上;

5.當用v-show='show',當show的默認值為false,當在父組件的(mounted)生命周期將show變為true,執行順序將會變為:父組件created→父組件beforeMounted→子組件created→子組件beforeMounted→子組件mounted→→父組件mounted→父組件beforeUpdated→父組件updated;;

4.當用v-if='show',當show的默認值為false,當在父組件的(created,beforeMount)生命周期將show變為true,執行順序依然如上;

5.當用v-if='show',當show的默認值為false,當在父組件的(mounted)生命周期將show變為true,執行順序將會變為:父組件created→父組件beforeMounted→父組件mounted→父組件beforeUpdated→子組件created→子組件beforeMounted→子組件mounted→父組件updated;

綜上:1.vue項目里面在mounted以前的周期內的變化是不會觸發updated的,只有在mounted才可以;

   2.希望當觸發某個條件的時候再進行子組件渲染的時候,那就采用v-if吧,這也是v-if,v-show的區別之一吧;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM