即使没有通过v-if加载组件，也会调用安装的vuejs

Question

我正在将vuejs用于我的应用程序

app.vue

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

CustomElem.vue

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

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

Answer 1

我认为您要使用的是 created（），而不是使用 Mounted（）。如果您在console.log()中使用created()，则不会调用它。

Answer 2

根据文档here，它显示为

  

在实例挂载后调用，其中el替换为   新创建的虚拟机$ el。如果根实例已安装到   文档内元素，vm。$ el在挂载时也将在文档内   叫。

请注意，它表示安装实例的位置，而不是呈现模板的时间，这基本上意味着在调用组件时，将加载组件类并调用已挂接的hook。这是有道理的，因为当您的v-if变为true时，仅会添加其模板，而不会加载实际的组件类

Answer 3

那是不正确的，某处一定有一个错误。

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

如果v-if始终是虚假的，则不会触发任何事件（beforeCreate，create，mounted ...）。

您确定您的情况是百达falsy？ 从父组件的开头开始就必须是这种情况，请谨慎更改值，如果在您的条件内传递的任何数据在某个时间点都不为假，则将实例化组件并引发事件。

致谢

Answer 4

我可以确认这一点，即使您将其外包给门户网站。你在组件的挂接钩中所做的一切，实际上都是在“做他的工作”。在呈现模板之前，您根本看不到它。解决此问题的一种方法是将您运行的函数放在 if() 条件本身内的挂载钩子中。

例如，我在mousemove事件上有调用e.preventDefault的函数，即使组件在v-if中并且没有被渲染，它仍然把我的输入范围滑块搞砸了，我无法拖动它正如预期的那样。