同一个页面中引用同一个组件多次，只有一个正常显示

 

如下图，用不同的组件名称引入同一个组件，会导致浏览器只渲染一次组件

原因：vue渲染机制不是每次都会创建组件的，为了提高它得一个渲染效率，vue采用一个复用机制，如何判断组件是否相同，在vue源码中，是通过tag 和 key 来判断

 

 

 

 

解决方法，给组件标签加key值 

原因：key值的作用是为每一个vnode指定唯一标签，加入不同的key值可以避免vue为了高效加载而没有重复渲染

 

 

引用自：

点击跳转