VUE里v-if与v-show该如何用

新手v-show,有经验的会使用v-if，我们一会说一下他们各自的使用场景与不足，为什么说新手用v-show比较顺手，有经验的会使用v-if呢？这就与Vue里的组件有着密不可分的关系了。

关于新手：

其实新手的定义并不是新人，实习生，这和个人在项目上积累的经验有关系，虽然很多时候你不会表达，但你的思想不会欺骗自己，曾经刚入门时对Vue虽然谈不上抗拒，但也是很烦里面的东西，这都写的什么啊，一会突然冒出看不懂的地方，等对vue接触的时间一久，会发现完全回不到原生JS的语法，真的，代码原来可以如此简单。

对于新人可能接触vue里的组件会很烦躁，我曾经也一样，看着一堆组件就会烦躁，写这么多这东西有什么用？为什么写的这么麻烦？但现在的想法恰恰相反，没有组件的代码，真的看不懂，当然组件要用的恰当，否则也会适得其反。

对于v-show的解释：

如果是组件，v-show只会在页面打开时走一次生命周期，便不会在触发生命周期，会大量浪费资源，并且还有很多不可预知的问题。 
新人不爱用组件，比如我们页面上有各种弹框，并且弹框都在当前页面显示，宝宝们便用v-show来控制弹框的显示与隐藏，为什么不用v-if呢，我......真不知道，反正大部分人都是这么过来的。

优点：？？？

没有......优点，只有合适的场景。

缺点：

麻烦，怎么麻烦？我不管你是使用v-show来控制组件还是控制当前页面的代码，你会出现各种不可预知的bug，那我们先谈谈可预知的，首先控制组件时（组件是有独立生命周期的，可以直接在组件内调用接口，如果需要参数可以在父页面向组件传值，如果你坚持在父页面请求完整数据传给组件，那我就呵呵了，你的组件白写，真的......）组件是不走生命周期的，需要回显的组件内数据并不是点击这一刻的最新数据，而是页面加载时就已经渲染，如果组件弹框是关于新增等需要输入的，你会发现你每次打开弹框时弹框内都会显示上一次输入过的内容，有的宝宝就是聪明，他会在组件内点击保存时或页面上点击按钮时（按钮代表打开弹框的点击事件内）清空一下里面的数据，我就问你，累不累......?，为了保持最新数据展示，每次打开弹框把完整数据传递过去，有编辑时你就去清空上一次的值，结果是自己累，别人还看不懂。

对于v-if的解释：

用v-if就是妙啊，如果组件上使用v-if时，每显示一次就会走一次组件独立的生命周期。

优点：

不用人为干预，v-show的缺点反过来便是v-if的优点，每次打开都会走生命周期，关于回显的话直接走自身生命周期调用最新数据，保证每次打开都是当前时刻的最新数据，因为v-if每次都是重新加载，所以有关输入时不会出现上一次输入过的内容，不用人为干预清空，保证了代码的简洁性，因为逻辑和交互等完全可以写在组件自身内，减少了各个页面逻辑代码的量，非常简洁易懂，关闭时会直接销毁当前组件，不会浪费各种资源。

缺点：

没有缺点，只有不同的使用场景。


那v-show真的是一无是处嘛？不，他有自己的使用场景

有时会出一些个别需求，比如页面上有10个tab切换页，也可以是10个编辑不同内容的弹框，此时10个弹框或tab页写在页面上会出现大量代码，没有可读性，所以这次又要写10个组件，可是你突然发现，弹框内没有保存，真的没有保存，需求要你在页面上提交时给后台传递10个组件内输入的内容，此时便可用v-show，因为组件关闭后输入过的内容并没有消失。

获取子组件中数据的方法（这种方法千千万，给你一种行不行......）

Vue中父组件直接调用子组件中函数的方法,点击可查看哦，这是给你个思路，既然你能调到组建中的函数当然也能得到其他的东西，   好吧......，最笨的方法告诉你，调用子组件函数时，将子组件中的数据在函数中return出来，完美。