v-if与v-show的区别

首先它两都是用作于条件渲染但他们有如下区别

1.初始化渲染：

v-if只有当条件为真的时候，元素才会渲染到页面，只要初始化条件为假的话就不会渲染到页面中去,其实v-if才是真正的条件渲染，因为每次显示与隐藏都会在dom数中新增或删除dom,这样就会导致子组件或元素或事件监听器也跟着重建或销毁，而v-show则不是，它的条件发生改变时其不会触发组件的生命周期的改变。

v-show在初始化的过程中无论真假条件都会被渲染到dom中，只不过他会通过控制css样式的display:none去控制元素的显示与隐藏。

2.响应式

v-if 当条件发生变化的时候会根据条件进行求值判断是否显示与隐藏，但是它的显示与隐藏会重新渲染或者销毁dom.

v-show 当条件发生变化时不会重新渲染或者销毁dom。

3.渲染开销

v-if 当条件为假的时候，元素不会被渲染到dom,也就是说此时相对v-show 无论显示与隐藏与否都会生成dom，只是通过样式去控制，这样来说是v-if节省了许多的开销

4.适用条件

v-if适合运行条件很少改变的情况； v-show适合频繁切换的情况。

 

二。display:none    与visibility：none的区别

"display: none"和"visibility: hidden"都是用于隐藏元素的CSS属性，但它们之间有一些区别。

1. 设置元素的visibility为hidden也是一种常用的隐藏元素的方法从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘

    .hidden{ visibility:hidden}给人的效果是隐藏了，所以他自身的事件不会触发   特点：元素不可见，占据页面空间，无法响应点击事件

   display:none  

   设置元素的display为none是最常用的隐藏元素的方法

    .hide { display:none;}

    将元素设置为display:none后，元素在页面上将彻底消失

    元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘     消失后，自身绑定的事件不会触发，也不会有过渡效果

    特点：元素不可见，不占据空间，无法响应点击事件

   opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的

    opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

   • opacity: N：该属性用来设置元素的透明度；
   • filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。

    不会引发重排，一般情况下也会引发重绘

    如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

    .transparent { opacity:0;}

    由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的

    需要注意的是：其子元素不能设置opacity来达到显示的效果

    特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件