记录一次bug

今天发现项目中有这样的报错。百度了一下说是项目中v-if使用的过多。 err DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at Object.insertBefore(...

出现问题的代码

// 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding, vnode) {
    ......
    ......
    if(没有权限不需要展示){  
        el.parentNode && el.parentNode.removeChild(el);
      }
  }
});

el.parentNode && el.parentNode.removeChild(el);

排查后发现，在项目中控制权限的js方法中有这样一句代码。目的是将没有展示权限的dom移除。问题就出在这里了。把这行代码注释马上就没报错了。

修改方法

通过$nextTick等待 DOM 更新完毕后再执行 removeChild，这可以避免因 DOM 异步更新而导致的异常。

Vue.nextTick(() => {
  el.parentNode && el.parentNode.removeChild(el);
});

在 Vue 中，insertBefore 或 removeChild 这类 DOM 操作必须在 Vue 的下一个 tick 之后进行，以确保 DOM 已经反映了最新的状态。

在 Vue 的指令中，inserted 钩子在元素被插入到 DOM 中时调用，但在某些情况下，DOM 可能还未完全更新。考虑到这一点，你可以尝试将 removeChild 的操作放入 $nextTick 中，以确保在 DOM 更新后才执行 DOM 操作。