Vue关于 v-if 和 v-show 的区别和使用

算是浅浅的踩了一些坑，记录一下我对这两个使用的理解哈。

这两个都是用来控制dom元素的显示隐藏的，两者之间的区别在于，v-show的节点元素都是存在的，只是css属性为display:none，而v-if在开始时如果是false时，是不会被加载的，节点是不存在的。所以，v-if在切换过程中会有更大的开销，而v-show在页面初次加载渲染时开销更大。

在实际开发中，可根据具体情况进行使用。

我主要记录一下自己的在使用过程中遇到的小坑吧。

需求：写一个如下的弹窗，有几个步骤条，每个步骤都有对应的内容。而且其中一些内容会因为某选项不同，而显示不同的需要填写的内容。

我最开始的写法都是用v-if，因为我考虑的是，不带上一步返回的，只有一次机会，选择哪个就加载哪个，不需要的就不加载。而且这个form表单，我直接在data里面定义成了空对象{}。后来需求变动需要增加返回上一步这个环节，那就涉及返回到上一步进行修改的问题和一些内容回显问题，切换不同的选项后，根据选项的不同加载的内容也不太相同，相应的绑定的值也是之前没有的，这样会导致后来加载的内容绑定的值不再是响应式的，无论是输入框还是选择框，输入内容或者选择的内容无法直接显示出来，但实际上选择和填写的内容是已经赋给了绑定的值，只是在页面上是看不出来的，只有点击下一步，再回来或者是局部刷新一下是可以看见的。

为了解决这个问题，我将v-if改成了v-show，然后对form绑定的data对象中预设了那些值。这样，我来回上下一步的切换，更改选项，填不同的内容，都不会有问题。

另外，弹窗中还涉及了图片和文件上传，要显示已上传的文件或者图片列表，会因为选项的不同，对上传文件绑定的值都是不一样的。这边用的是el-upload，都定义了对应的ref，如果v-if可能在使用this.$refs['对应定义的名字']会提示你找不到的。

好像表达的也不是很清楚，总结下来是：如果遇到因为显示隐藏，导致绑定的值不再是响应式的，可以写成v-show，然后在绑定的对象中进行预先定义。