v-if指令和v-show指令的区别

v-if 是动态的向DOM树内添加或者删除DOM元素

v-show 是向标签添加display:none或者去除来控制显示与否

v-if=”false” 在dom中取不到该标签

v-show=”false” 在dom中可以取到该标签

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show`性能更好一点(就单个标签而言)

如果是多个标签，用v-show的话，会在网页打开时就一次渲染全部资源，造成资源浪费

display：none和visibility：hidden的区别

  • 相同点：都是隐藏标签，对应的标签仍存在DOM结构中
  • 不同点：
    标签设置display: none后，不会占据该标签原来所在的位置，会触发重流。
    标签设置visibility: hidden后，仍占据原来的位置，会触发重绘。

　重流（Reflow）是指布局引擎为frame计算图形的过程。 frame是一个矩形，拥有宽高和相对父容器的偏移。frame用来显示盒模型（content model）， 但一个content model可能会显示为多个frame，比如换行的文本每行都会显示为一个frame。

　重绘（Repaint）发生在元素的可见性发生变化时，比如背景色、前景色等。 因此重流必然会引起重绘。