vue中实现对于keep-alive组件缓存功能，需要的时候有，不需要则没有

vue里面对于组件的缓存可以使用keep-alive实现，如果组件不需要缓存，是否渲染通过v-if就可以了。

现在有一个需要记录用户信息抽屉，如果用户输入了信息，此时将这个抽屉组件缓存起来，即使抽屉关闭了，后面再打开抽屉也还记录有用户输入的信息，这样就实现了抽屉关闭在打开后，用户输入信息的回显问题。

但如果现在不需要保存用户输入的信息，即抽屉关闭之后销毁抽屉组件就好了。

当上面两种情况都需要实现，即我需要缓存用户信息的时候，关闭抽屉，组件是缓存的；当我不需要回显用户信息的时候，组件是不需要缓存的，销毁组件就行了。下面的方法就可以实现这种要求。

在keep-alive组件外面包裹一个div，通过两个变量控制，visible和vis。visible控制aa组件的渲染，同时也是外面div的v-if条件，vis控制是否需要组件缓存的功能。

当需要缓存功能，vis为true，div的v-if判断条件visible || vis 始终为true，keep-alive始终渲染，所以缓存功能始终存在，即使visible为false。

当不需要缓存功能，vis为false，此时如果visible为true，那么div和aa都渲染，如果visible为false，div和aa都不会渲染，控制aa组件销毁的同时也不会缓存组件。