博客

前两天前端项目出现了一个bug，折腾了好久才弄明白。

出错的场景是：当列表第一次渲染没有报错，但翻页时报下面的错。

浏览器控制台报错：vue.runtime.esm.js:619 [Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

报完上面的错后，再点击翻页就不起作用了。

下面是我找出来导致出错的代码：

<el-table-column
  label="操作"
  align="center"
  class-name="small-padding fixed-width"
  width="270"
>
  <template slot-scope="scope">
    <div>
      <div v-if="show" v-hasPermi="[x:x:x]">...</div>
    </div>
  </template>
</el-table-column>

为什么报错，我的猜测是：

第一次渲染时，元素是显示的，由于vue的特性，它会复用该元素，在翻页后该元素原本是显示的，但此时v-if条件为false，隐藏了该元素，v-if的隐藏其实是把元素从dom中移除。

于此同时在v-hasPermi指令内正在操作这个移除的元素，所以就报了上面的错。

总结来说就是当我们操作那些不存在的dom元素就可能报上面的错。

我们来画两个图解释一下：

这是正常DOM元素的执行过程，没什么问题。

这是复用DOM元素的执行过程，图中说明为什么会报错。

解决方案：添加key不让其复用。

<el-table-column
  label="操作"
  align="center"
  class-name="small-padding fixed-width"
  width="270"
>
  <template slot-scope="scope">
    <div :key="Math.random()">
      <div v-if="show" v-hasPermi="[x:x:x]">...</div>
    </div>
  </template>
</el-table-column>