vue學習筆記二：v-if和v-show的區別

v-if vs v-show

v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下， v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

<template>
    <div id="app">
        <div v-if="isIf">
            if
        </div>
        <div v-show="ifShow">
            show
        </div>
        <button @click="toggleShow">toggle</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                isIf : true,
                ifShow : true,
                loginType : "username"
            }
        },
        methods: {
            toggleShow : function(){
                this.ifShow = this.ifShow ? false : true;
                this.isIf = this.isIf ? false : true;
            }
        }
    }
</script>

看chrom控制台能更明顯的看出來

對比可以看出v-if直接從代碼中刪除了，v-show只是通過display來切換狀態，因此建議頻繁切換的話用v-show比較好