这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
大佬们好，我是江湖不渡i，前端菜鸡，react初学者。
老规矩总结放前面：
v-if:通过设置true/false来删除和创建目标dom节点从而实现显示隐藏。
v-show:通过设置css属性display控制目标元素是否脱离文档流来实现显示隐藏。
在排除初始渲染之后操作一次的情况下v-if的性能损耗会比v-show要高
前言 最近在看面试题的时候看到这个问题，毕竟不是刚入行的时候了，知道了区别也想看看为什么会有这样的区别，这样的区别怎样合理的运用才能更好地发挥着两个指令该有特长。
用途 v-if和v-show都是vue内置指令，常用于操纵目标元素的显示隐藏。（和opacity，visibility不同的是这两个属性使目标元素隐藏之后，目标元素还会占用之前在文档流占用的位置）
原理 v-if：通过设置true/false来删除和创建目标dom节点从而实现显示隐藏。 v-show： 通过设置css属性display来控制目标元素是否脱离文档流来实现显示隐藏。
补充
我们都知道，元素的样式发生变化，根据不同的样式变化会导致页面发生回流或者重绘，这样不可避免就要从性能上面去讨论这两个指令的不同之处。
首先v-if和v-show都会改变页面的布局，v-if是删除和添加dom节点，v-show是将元素脱离或者回归文档流，所以v-if和v-show都会导致页面进行回流和重绘。
为什么会说在排除初始渲染之后操作一次的情况下v-if的性能损耗会比v-show要高呐？ 我们要知道浏览器在渲染过程中，要先构建dom树，然后在dom树的基础上结合节点的属性生成render树(渲染树)，v-if是操作dom节点，构建dom树的时候不会构建设置v-if:false的节点，v-show是操作css属性，所以v-if在回流和重绘之前还要进行一次dom节点操作，所以说性能损耗会比v-show高。
v-if指令的优点
惰性加载(初始构建dom树的时候不会构建设置为false的元素，直到使用的时候再构建)，利用这样的特点可以实现在页面内部组件的按需加载和对组件的销毁。
v-show指令的优点：频换切换的损耗低于v-if(不进行dom节点操作，只改变css)，而且利用可以试元素脱离文档(脱离文档流的元素不会导致页面发生回流和重绘)来减少改变元素属性导致页面频繁发生回流和重绘。
v-if切换触发的相关生命周期
父组件：beforeUpdate和update。
子组件：除了更新都会涉及。
v-show切换触发的相关生命周期
父组件：beforeUpdate和update。
结语
作为年轻人一定要自律不要在轻松的氛围中迷失，勇于打破自己的舒适圈，勇于去挑战未知的领域。在平常工作中要多思考多总结，毕竟在大部分公司日常工作都是搬砖写一些业务代码，要多学习新的技术拓展自己的知识面并用于自己的工作中，毕竟学的再多不能落地也是白搭。
最后祝各位大佬学习进步，事业有成！🎆🎆🎆
