在代码中使用到了v-if,在这里插入图片描述
并且在mounted中引用函数,判断并渲染这个v-if下面的元素了。
在mounted
经过查阅后得知:
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 钩子。

得出 在钩子函数运行过程中,我操作了v-if中未渲染的dom元素
最后将v-if改成v-show解决问题

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐