update

21-Vue基础/01-03.Vue的系统指令(二).md

@@ -708,7 +708,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 
 
 
-## v-if：设置元素的显示和隐藏
+## v-if：设置元素的显示和隐藏（添加/删除DOM元素）
 
 **作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
 
@@ -755,7 +755,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 ![](http://img.smyhvae.com/20180329_1920.gif)
 
 
-## v-show：设置元素的显示和隐藏
+## v-show：设置元素的显示和隐藏（在元素上添加/移除`style="display:none"`属性）
 
 **作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
 
@@ -802,7 +802,34 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 
 ![](http://img.smyhvae.com/20180329_2040.gif)
 
-**v-if和v-show的区别**：
+### v-if和v-show的区别
+
+`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。
+
+区别：
+
+- v-if：每次都会重新添加/删除DOM元素
+
+- v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
+
+优缺点：
+
+- v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。
+
+- v-show：**有较高的初始渲染消耗**。也就是说，即使一开始`v-show="false"`，该节点也会被创建，只是隐藏起来了。而`v-if="false"`的节点，根本就不会被创建。
+
+**总结**：
+
+- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
+
+- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
+
+
+
+
+
+
+
+
 
-`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。