为什么有时候将 v-if 改为 v-show 后某些数据访问不到？

首先来聊聊 v-if 和 v-show 的区别：
v-if：

条件渲染：根据表达式的值决定元素是否被渲染到 DOM 中。
销毁和重建：当条件为假时，元素会被完全销毁，相关的生命周期钩子（如 mounted）不会再被调用。
性能：在条件频繁切换时，v-if 会有较高的性能开销，因为它涉及到DOM操作。
初始渲染：只有当条件为真时，元素才会被渲染。

v-show：

CSS 显示/隐藏：无论条件真假，元素都会被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制显示或隐藏。
保持状态：元素始终保持在 DOM 中，相关的数据和状态会被保留。
性能：在条件频繁切换时，v-show 通常性能更好，因为它只是简单地切换 CSS 属性。
初始渲染：元素始终会被渲染。

回到主题，那为什么有时候我们将 v-if 改为 v-show 后某些数据访问不到呢？

生命周期问题：如果组件在 v-if 下被销毁了，那么在条件变为真时，组件会被重新创建，其生命周期方法（如 mounted）会被重新调用。而改为 v-show 后，组件始终存在，不会重新执行生命周期方法，可能导致某些依赖生命周期初始化的数据没有被正确设置或更新。

初始化逻辑：有些数据可能是在组件的 mounted 或其他生命周期钩子中初始化的。使用 v-if 时，这些初始化逻辑会在组件重新渲染时执行；而使用 v-show 时，组件不会重新初始化，可能导致数据没有被正确设置。

响应式更新：某些数据可能依赖于组件的初始化过程或外部状态的变化。如果这些数据没有被正确地声明为响应式，或者没有在组件中正确地监听到状态变化，改为 v-show 后，数据可能不会随着状态变化而更新。

也就是说，使用v-show后，数据在初始化的时候都已经加载完毕，如果条件语句初始为false，那么基本上在生命周期里的所有相关的数据基本都为undefined。后续条件语句变为true，改变的也只是dom的显示，生命周期内的数据不会重新获取，依旧为初始值。