对v-show和v-if的错误理解：

之前以为v-show是有点类似与visibility的显示方式，就是元素即使隐藏了，但是还是保留空间的，类似于visibility，而且它在dom树的节点也还是存在，而v-if就是类似display:none,不保留空间，且当条件为假的时候，dom树上该节点不存在。

v-show和v-if较正确的理解：

其实上面看起来确实有点像是，但是v-show和v-if不能用display和visibility作类比。v-show源码中是通过切换css的display属性来隐藏元素的，不管怎么样在dom树都是存在，但它不占据空间。而v-if是直接移除dom树上的该结点，并且解绑节点上的事件和子组件。会引起生命周期函数调用，相比于v-show的话性能消耗比较大。

迷惑的点：

其实一开始理解display和visibility的区别时，总是看到display是不占据空间的，不会给渲染的，而visibility就是会占据空间，即使为假的话还是渲染出来，奈何当时不懂浏览器渲染的过程，其实如果稍微懂一些的话，蛮好区分的，display和visibility都是dom树上仍旧存在，但是区别在于会不会渲染出来。

扩展下visibility和display的区别:

visibility最主要的特点就是不管怎么样，在页面都是占据空间的，会挤压到其他盒子，而且会被子元素继承，然后在用动画的时候，display会有点卡顿不自然，但是visibility就会很流畅。而display的话就是在于不占据空间，且动画上使用会有点不自然。

这也是我第一次写技术文章，希望有什么不对的地方能指点出来。谢谢