vue切换元素报错 Error in nextTick: "No

问题描述：

 在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。

错误告警如下：

[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."

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.

 问题分析： 

  vue框架中提供了v-if 和 v-show两个指令，用于控制页面不DOM结构的显隐性。 这个问题的出现是因为使用了v-if 来切换元素导致的。我们来分析下v-if 是怎么实现的，v-if 是通过元素的删除添加来进行切换元素。然而我们的vue是通过diff算法进行元素的插入，如果没有添加key会导致元素的混乱等问题，所以我们在使用的元素上添加key即可

解决方案：

方案一：在用于v-if的元素上添加key （推荐）

方案二：在把v-if使用v-show代替