Vue 2.5.2中v-if与自定义指令同时使用导致样式冲突问题

问题根因 #

你遇到的问题是Vue 2.x的虚拟DOM复用机制导致的：两个结构一致、使用v-if切换的同级元素，Vue默认会复用同一个真实DOM节点，不会触发新元素的inserted生命周期钩子，旧节点上已经设置的行内背景色样式也会被保留，因此第二个弹出层不会执行你在inserted里写的样式判断逻辑，直接继承了前一个节点的红色背景。

解决方案 #

方案1（推荐）：给元素添加唯一key标识 #

给两个v-if控制的popup元素添加不同的key属性，明确告诉Vue这是两个独立元素，不要复用DOM节点，切换时会销毁旧节点、创建新节点，自动触发新节点的inserted钩子。
修改后的模板代码如下：

<div class="popup popup1" v-if="showPopup1" v-wide key="popup1">
  <div class="btn-container">
    <div class="btn" @click="showPopup1 = false;showPopup2 = true;"></div>
  </div>
</div>
<div class="popup popup2" v-if="showPopup2" v-wide key="popup2">
  <div class="btn-container">
    <div class="btn" @click="showPopup2 = false"></div>
  </div>
</div>

方案2：补充自定义指令的update钩子 #

如果不想修改模板，也可以在自定义指令中补充update钩子，确保元素更新时也会执行样式判断逻辑：

const wide = Vue.directive("wide", {
  inserted: handleStyle,
  update: handleStyle
});

function handleStyle(e, binding, vnode) {
  const style = window.getComputedStyle(e);
  console.log(style.backgroundColor);
  if (style.backgroundColor == "rgb(0, 0, 0)") {
    e.style.backgroundColor = "red";
  }
}

内容的提问来源于stack exchange，提问作者kid-joker