探索 Vue 生命周期：v-if 与 v-show 的深度剖析
一、引言
在 Vue 开发中，指令可是非常重要的一部分哦。今天咱们就来重点讲讲 v-if 和 v-show 这两个指令，为啥呢？因为理解它们对于掌握 Vue 组件的生命周期有着很大的帮助。只有把它们搞清楚了，咱们才能更好地优化 Vue 项目，让项目跑得更顺溜。
二、Vue 生命周期概述
（一）生命周期的八个阶段
- beforeCreate：这个阶段呀，Vue 实例刚被创建，但是数据观测和事件配置还没开始呢。就好比你刚打算盖房子，还没开始打地基，也没准备好各种工具。
- created：这时候数据观测和事件配置都完成了，但是 DOM 还没挂载。就像房子的框架搭好了，但是还没装修，也没把家具搬进去。
- beforeMount：模板编译好了，准备挂载到页面上，不过页面上还看不到真实的 DOM 元素。就像是你把家具都搬到房子门口了，就等着往屋里摆了。
- mounted：实例挂载到 DOM 上了，页面上能看到组件渲染出来的样子了，并且可以进行一些 DOM 操作。这就好比房子装修好了，你可以开开心心地住进去了。
- beforeUpdate：数据更新了，但是 DOM 还没更新。就好像你决定给房子换个颜色，买好了涂料，但是还没开始刷呢。
- updated：DOM 更新完成，数据和页面显示一致了。就像你把房子刷好了新颜色，看起来焕然一新。
- beforeDestroy：实例即将被销毁，这时候可以做一些清理工作，比如取消定时器之类的。就像你要搬家了，得把房子里的垃圾清理干净。
- destroyed：Vue 实例完全销毁了，所有的事件监听器、子组件都被移除了。房子都拆了，啥都没了。
（二）各阶段钩子函数的应用场景
- mounted：这个阶段很适合做一些异步请求，比如获取数据来填充页面。因为这时候 DOM 已经加载好了，你可以准确地把数据放到对应的位置。
- beforeDestroy：在这个阶段进行清理操作就很合适。比如说你之前设置了定时器，在组件销毁之前就得把它关掉，不然可能会造成内存泄漏。
三、v-if 指令详解
（一）基本使用与特性
v-if 指令是用来进行条件渲染的。比如说，你可以根据一个表达式的值来决定某个元素要不要加载到页面上。就像你有一个开关，如果开关打开（表达式为真），就把某个东西显示出来；如果开关关闭（表达式为假），就不显示。而且 v-if 还有个特点，就是它是惰性加载的。只有当条件为真的时候，它才会去创建这个元素对应的 DOM 节点。
（二）对组件生命周期的影响
- 当 v-if 的条件从 false 变成 true 的时候，会重新创建组件实例。这就意味着会依次触发 beforeCreate、created、beforeMount、mounted 这些生命周期钩子函数。就好像你重新盖了一座房子，从打地基开始，一步步到装修好住进去。
- 当 v-if 的条件从 true 变成 false 的时候，组件会被销毁。这时候就会触发 beforeDestroy 和 destroyed 钩子函数。就像你把房子拆了，啥都没了。
（三）使用场景与注意事项
- v-if 比较适合用在条件变化不那么频繁的地方。比如说，根据用户权限来决定要不要显示某个功能模块。如果权限够，就显示这个模块；如果权限不够，就不显示。
- 要注意哦，尽量不要把 v-if 和 v-for 同时用在同一个元素上。因为这样会增加额外的计算量，影响性能。就像你本来就很忙了，还同时做两件很复杂的事情，肯定会更累，效率更低。
四、v-show 指令剖析
（一）原理与基本特性
v-show 指令是通过改变元素的 CSS 样式，也就是 display:none 来切换元素的显示和隐藏的。不管初始条件是啥，这个元素在页面加载的时候都会被渲染出来，只是根据条件决定要不要显示而已。就像你有一个东西，它一直放在那里，只是有时候你把它藏起来，有时候又让它露出来。
（二）生命周期中的表现
因为 v-show 只是切换 CSS 样式，所以组件的生命周期不会因为它的显示隐藏而重新触发。也就是说，组件只会在初始化的时候走一遍生命周期，之后不管是显示还是隐藏，都不会再创建或者销毁组件实例。就像你有一个房子，不管你是把窗帘拉上（隐藏）还是拉开（显示），房子本身还是那个房子，不会重新盖也不会拆。
（三）适用场景
v-show 适合用在需要频繁切换显示隐藏的元素上。比如说，一个导航栏的下拉菜单，用户可能会经常点击来显示或者隐藏菜单，这时候用 v-show 就很合适，因为它切换速度快，不会频繁创建和销毁元素。
五、v-if 与 v-show 对比
（一）显示隐藏方式差异
v-if 是通过直接增删 DOM 节点来实现显示隐藏的。条件为真就创建节点，条件为假就删除节点。而 v-show 只是通过改变 CSS 的 display:none 属性来切换显示隐藏，DOM 节点一直都在。
（二）性能消耗对比
- v-if 在切换的时候消耗比较大，因为它涉及到组件的重新创建和销毁。就像你每次都重新盖房子或者拆房子，肯定很费力气。
- v-show 在初始渲染的时候消耗比较大，因为不管条件如何，它都会先把元素渲染出来。但是之后切换的时候就比较快了，就像你只需要拉一下窗帘（改变 CSS 样式），而不是重新盖房子。
（三）编译过程不同
v-if 是惰性编译的，只有在条件为真的时候才会编译对应的模板。而且当条件从 true 变成 false 的时候，会把对应的 DOM 节点卸载掉。v-show 则不管条件如何，在初始渲染的时候就会编译模板，并且之后会一直缓存起来，切换的时候直接改变样式就好了。
六、实战案例分析
（一）案例展示
咱们来看一个简单的例子。有一个 Vue 组件，里面有一个按钮和一个 div。当按钮被点击的时候，根据一个变量的值来决定 div 是用 v-if 还是 v-show 来显示隐藏。
<template>
<div>
<button @click="toggle">Toggle</button>
<div v-if="showWithVIf">{{ message }}</div>
<div v-show="showWithVShow">{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
showWithVIf: false,
showWithVShow: false,
message: 'Hello, Vue!'
};
},
methods: {
toggle() {
this.showWithVIf =!this.showWithVIf;
this.showWithVShow =!this.showWithVShow;
}
}
};
</script>
（二）结合生命周期分析优劣
- 当点击按钮切换 v-if 的显示隐藏时，我们可以看到组件会重新创建和销毁。如果这个组件比较复杂，里面有很多数据和操作，那么每次重新创建和销毁都会消耗一定的性能。但是在某些情况下，比如我们确定这个组件很长时间才会切换一次显示隐藏，而且每次显示的时候数据可能都有变化，那么用 v-if 就可以保证每次显示的时候都是最新的数据。
- 对于 v-show 来说，不管怎么点击按钮，组件的生命周期都不会重新触发。这就使得切换速度非常快，对于频繁切换的场景非常友好。但是如果这个组件一开始就不需要显示，用 v-show 也会先把它渲染出来，这就造成了一定的性能浪费。
如果您觉得这篇文章对您有帮助，欢迎点赞和收藏，这样可以方便您随时查阅，也能让更多的人看到这篇有价值的内容。同时，您的支持也是我继续创作优质内容的动力🌹🌹🌹也希望您能在😉😉😉我的主页 😉😉😉找到更多对您有帮助的内容，一起在技术的海洋里畅游。如果您有任何想法，随时在评论区告诉我，让我们携手共进💪💪💪
