即使组件没有通过 v-if 加载，vuejs Mounted 也会被调用

Question

我的应用程序使用 vuejs 看起来像这样

应用程序.vue

<template>
<div>
 <custom-elem v-if="somefalseCondition"> </custom-elem>
</div>
</template>

自定义Elem.vue

<template>
  some code
 </template>
<script> 
export default {
 mounted(){
  console.log('demo')
}
}
</script>

我期望当元素实际渲染在屏幕上时应该调用此 Mounted ，但即使 v-if 内的条件为 false 后它也会执行，我在这里缺少什么？

Answer 1

这是不正确的，一定有什么地方出错了。

v-if="false" 避免创建组件实例。

如果 v-if 始终为假，则不会触发任何事件（beforeCreate、created、mounted...）。

你确定你的条件总是假的吗？自父组件开始以来就必须是这种情况，请小心更改值，如果条件内传递的任何数据在某个时间点不是错误的，组件将被实例化并引发事件。

问候

Answer 2

那么根据这里的文档，它写着

在实例挂载后调用，其中 el 被新创建的 vm.$el 替换。如果根实例被挂载到文档内元素，则调用 Mounted 时 vm.$el 也将在文档内。

请注意，它说的是实例安装的位置，而不是渲染模板的时间，这基本上意味着当您的组件被调用时，组件类将被加载，并且安装的挂钩将被调用。这是有道理的，因为当你的v-if变为 true 时，只会添加它的模板，而不会加载实际的组件类