v-if和v-show的联合使用

最近做了一个需求，里面有个功能是弹窗里面有步骤一，然后确定，跳到步骤二，然后点击上一步还可以返回步骤一页面，并且保留步骤一之前的的操作

 

 然后我的思路就是：里面两个子组件，步骤一组件，步骤二组件。然后v-if显示隐藏。

 

但实际写好之后发现，步骤二返回上一步的时候，因为使用的是v-if，所以数据全部重置了，没有保留之前的操作，所以不符合需求

但幸好步骤一里面的东西不多。

方法一（有瑕疵）：

一种解决方法是跳到步骤二的时候，先保留步骤一的所有数据，然后传给步骤二，然后步骤二点击上一步的时候再传给步骤一，这种也可以，但确定是要是步骤一里面有很多数据的话，就很繁琐，而且容易忘记传一些数据。

我想了想，可以使用v-show，因为v-show只是css的显示隐藏，不会触发数据重置，可以保留数据

 但又发现v-show并不会触发mounted里的计算，还需要加上v-if，最终是这样的

方法二：v-if和v-show一起使用

 

首先，初始step是0，步骤一和步骤二v-if都是false；

然后当step为1的时候，v-if为true，v-show为true，步骤一显示，且触发mounted里面的运算，获取数据，重置数据；

然后操作之后点击下一步，step为2，步骤一的v-if为true，v-show为false，步骤一的css隐藏，但是数据操作还是保留着，步骤二显示。

然后点击上一步，step为1，步骤二隐藏，步骤一的v-if还是true，v-show也是true，因为v-if一直都是true，所以不会触发mounted里面的运算，只是单纯的dom的显示隐藏，数据也保留着

对比两种方法，还是方法二好一些，简单实用