Vue.js中v-if条件为假时mounted仍执行的问题排查

这种情况确实不符合Vue的预期行为——v-if为false时，组件应该不会被创建，自然也不会触发mounted钩子。咱们一步步排查可能的原因：

• 检查somefalseCondition的实际值
  这是最常见的问题！先确认这个变量是不是真的被设置为false：

  • 有没有拼写错误？比如是不是把变量名写成了someFalseCondition（驼峰大小写错误），导致实际引用的是未定义变量（Vue中未定义变量会被判定为false，但如果是你在data里没声明、或者声明后赋值错误，比如不小心写成somefalseCondition: true，就会触发组件渲染）。
  • 可以在App.vue的模板里添加{{ somefalseCondition }}直接在页面查看变量值，或者在App.vue的mounted钩子中执行console.log(this.somefalseCondition)，确认它的真实状态。

• 确认组件没有在其他地方被渲染
  有没有可能你在App.vue的其他部分，或者项目里的其他组件中，也使用了<custom-elem>？如果有的话，那是另一个组件实例的mounted触发了，你误以为是当前v-if下的组件。可以在CustomElem的mounted里补充更详细的日志，比如console.log('CustomElem mounted', this.$vnode)，通过vnode信息判断这个组件实例的渲染来源。

• 检查是否误用了v-show
  虽然你代码里写的是v-if，但有没有可能不小心写成了v-show？v-show只是通过CSS隐藏元素，组件依然会被创建并触发mounted；而v-if是真正的销毁/创建组件逻辑，条件不满足时组件不会被挂载。再仔细核对一下模板里的指令。

• Vue版本的特殊情况（少见）
  如果你使用的是非常早期的Vue 2.x版本，有没有可能存在相关bug？不过这种核心逻辑的bug在正式稳定版本里极少出现，优先排查前面的几个点。

举个典型错误案例：如果App.vue的data里误将变量赋值为true：

data() {
  return {
    somefalseCondition: true // 这里写错了！
  }
}

那组件自然会被挂载，触发mounted钩子。

先从最基础的变量值检查开始，大概率能快速定位问题~

内容的提问来源于stack exchange，提问作者Dhiraj Wakchaure