Vue 学院 #3：v-show VS v-if

欢迎来到全新的 Vue 学院！这里会有很多关于 Vue 的文章！我在这方面有两年半的经验，可以教一些这方面的知识！

使用 vue 您可以使用一些指令，今天我们将检查v-show 和 v-if之间的区别！

基本的

这两个指令都用于根据给定的条件显示或隐藏组件。

但有什么区别呢？

主要的区别是生活行为！

v-if

该元素将从DOM 中移除，因此它将具有一个新的生命周期钩子！🔂

您还可以使用v-else-if和v-else

视频秀

该元素将保留在 DOM 中，v-show只会display对该元素使用 CSS 属性！🎨

因此元素没有被破坏，所以它不会有新的生命周期钩子！

例子

以此代码为例👇

父级.vue

<template>
<div>
    <button @click="changeState">
        Switch state
    </button>

    <child v-show="isShowed" name="v-show" />
    <child v-if="isLiving" name="v-if" />
</div>
</template>

<script>
import Vue from "vue"
import Child from "../child"

export default Vue.extend({
    components: {
        Child,
    },
    data() {
        return {
            isShowed: false,
            isLiving: true,
        }
    },
    methods: {
        changeState() {
            this.isShowed = !this.isShowed
            this.isLiving = !this.isLiving
        },
    }
})
</script>

Child.vue

<template>
<div>
    Hello from {{ name }}
</div>
</template>

<script>
import Vue from "vue"

export default Vue.extend({
    props: {
        name: String,
    },
    created() {
        console.log(`Element named ${ this.name } is created`)
    },
    destroyed() {
        console.log(`Element named ${ this.name } is destroyed`)
    },
})
</script>

在初始化时我们有这个控制台日志：

Element named v-show is created
Element named v-if is created

当我们改变状态以激活指令时：

Element named v-if is destroyed
Element named v-if is created
Element named v-if is destroyed
Element named v-if is created

仅v-if组件重新加载并有一个新的 cyclehook！

如上所述，我们可以检查display property组件v-show component何时隐藏

<div style="display: none;">
    Hello from v-show
</div>

结论

两者都是用来隐藏组件的，但是区别在于隐藏该组件的方式！

v-if

元素从 DOM 中移除
Element 将有一个新的生命周期钩子
v-else-if可与和一起使用v-else
初始化加载组件很便宜
切换元素很昂贵

视频秀

元素仍然在 DOM 中
元素不会有新的生命周期钩子
display: none设置为 false 时元素将具有
初始化加载组件很昂贵
Toggle 元素非常便宜

我希望你喜欢这篇文章！

🎁 如果您在TwitterUnderrated skills in javascript, make the difference上关注我并给我点赞，即可免费获得我的新书😁

或者在这里获取

🎁我的新闻通讯

☕️ 你可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 推特：https://twitter.com/code__oz

👨‍💻 Github：https://github.com/Code-Oz

你也可以标记🔖这篇文章！

鏂囩珷鏉ユ簮锛�https://dev.to/codeoz/vue-academy-3-v-show-vs-v-if-iaa