1. 程式人生 > >[Vuejs] 組件 v-if 和 v-show 切換時生命周期鉤子的執行

[Vuejs] 組件 v-if 和 v-show 切換時生命周期鉤子的執行

保持 mount 周期 false div 渲染 create before creat

v-if

初始渲染

初始值為 false 組件不會渲染,生命周期鉤子不會執行,v-if 的渲染是惰性的。
初始值為 true 時,組件會進行渲染,並依次執行 beforeCreate,created,beforeMount,mounted 鉤子。

切換

false => true
依次執行 beforeCreate,created,beforeMount,mounted 鉤子。
true => false
依次執行 beforeDestroy,destroyed 鉤子。

v-show

渲染

無論初始狀態,組件都會渲染,依次執行 beforeCreate,created,beforeMount,mounted 鉤子,v-show

的渲染是非惰性的。

切換

對生命周期鉤子無影響,切換時組件始終保持在 mounted 鉤子。

[Vuejs] 組件 v-if 和 v-show 切換時生命周期鉤子的執行