v-if 和 v-show

前言

最近在看一本vue.js的书，名为《vue.js从入门到项目实战》，有空的同学可以去刷一下，都是一些vue的基础，对新手或不熟悉vue的人很有帮助。言归正传，看到了一篇v-if 和 v-show 的区别，虽然以前了解过，但没那么精细。

什么是v-if

v-if是会根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom元素。

v-if用法

只需要为元素挂上v-if 指令即可，与之配套的还有v-else-if 和 v-else，不过它们只能与v-if配合使用。例：

	<div id="app">
        <h2 v-if="order === 0">站在前排的 v-if</h2>
        <h2 v-else-if="order === 1">不上不下的 v-else-if</h2>
        <h2 v-else>负责垫后的 v-else</h2>
        <button @click="toggleTitle">切换标题</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.
    js"></script>
    <script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data () {
            return {
            	order: 0
            }
        },
        methods: {
            toggleTitle () {
	            this.order = ++this.order % 3
	            console.log('order的值为：', this.order)
            }
        }
    })
    </script>  

结论：当order的值被修改时，视图将渲染满足条件的元素。这就是 v-if 的基本用法。

什么是v-show

v-show通过css样式中的dispaly：none；控制元素显示、隐藏。
实践是检验真理的唯一方法，咋们也来试一下代码是如何实现的。

	<div id="app">
        <h2 v-show="visible">v-show, visible = true</h2>
        <h2 v-show="!visible">v-show, visible = false</h2>
        <h2 v-if="visible">v-if, visible = true</h2>
        <h2 v-else>v-if, visible = false</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data () {
                return {
                visible: false
                }
            }
        })
    </script>

结论：v-show判定为假的元素的display属性被赋值为none，不过仍保留在DOM中，而v-if判定为假的元素则根本没有在DOM中出现。

总结： ●v-if会在切换中将组件上的事件监听器和子组件销毁和重建。当组件被销毁时，它将无法被任何方式获取，因为它已不存在于DOM中。
●在创建父组件时，如果子组件的v-if被判定为假，Vue不会对子组件做任何事情，直到第一次判定为真时。这在使用Vue生命周期钩子函数时要尤为注意，如果生命周期已走过组件创建的阶段，却仍无法获取组件对象，想一想，是不是v-if在作怪。
●v-show有更高的初始渲染开销，而v-if有更高的切换开销，这与它们的实现制有关，在使用时要多加考虑具体的应用场景。
●v-show不支持template元素。