v-if和v-show的区别

从页面的效果来看，都是差不多的，都是显示或者隐藏标签。

v-show

它在程序运行的时候会先执行一次，不管条件成立还是不成立。它的隐藏效果只是修改css样式(display)的显示和隐藏。虽然我们在页面里看不到这个标签，但它是真是存在的。它可以帮助我们丰富页面，让页面拥有更多的功能，比如说新闻页面的导航栏提供给我们更多的选项。

v-if

单从v-if来说，在条件成立时，才会加载这个标签(标签时html内部提供的封装组件)，如果条件不成立就不会加载这个标签。在频繁切换隐藏和显示的标签，用v-if会每一次创建这个标签和销毁这个标签，这样会非常消耗性能。所以我们在不经常切换显示和隐藏的地方使用v-if。

v-if在vue中是个非常繁杂的结构

vue中不光有v-if，还有v-else、v-else if。v-if是作用在标签内的，标签又分为单标签和双标签。v-if作用在单标签内就没有v-else的关联。多个单标签的显示和隐藏要用多个v-if。双标签有开始标签和结束标签，这就业意味着双标签在程序中有作用域，v-if作用在双标签内也是有作用域的。作用域内标签的显示和隐藏可以用v-else来关联父级标签的v-if。v-else if也是相同的道理。 v-if的v-else不能关联到作用域之外的标签。

标准流

标签默认都是在标准流内的，我们也可以手动修改成脱离标准流。v-show往往都是作用在脱离标准流的标签上，不然在隐藏的时候，页面会空出一大块。 v-if因为是条件满足的情况下才会被渲染。如果我们是满足某个条件，添加一个结构。那么v-if作用的标签也要是标准流的。其他情况大部分也是脱离标准流的标签。

生命周期

在vue开发的过充中，v-if和v-show往往作用在封装组件上。每一个组件都有一个生命周期的。

1.v-show：是页面一加载的时候就渲染的组件，这个时候我们父组件有一个生命周期，然后再嵌套一个子组件的生命周。这个子组件虽然隐藏了，但他的生命周期还是存在，在子组件生命周期内的异步函数，监听机制，数据运算都是真是存在的。我们要时刻关注里面的数据操作，避免不必要的性能消耗。

2.v-if：它是组件的创建与销毁。只有在被创建使用的时候生命周期才会生效，在被销毁的时候，vue有一个垃圾回收机制，会自动清除v-if组件里的所有监听，延时函数等。