注意v-if与v-show的使用场景，报错Cannot set properties of null

今天在写留言墙项目，基于vue3和nodejs，mysql的前端ui页面时，我解决了困扰我两天的问题，在组件切换显示与隐藏状态的时候，我所有逻辑看起来正常不过，但是点击报错，子组件接收不到父组件传递的值，于是我换了emitt事件总线，去发送和监听事件，然后接受渲染，还是不行，我就纳闷了

但是在今天，我发现了，主要是我控制组件的方式不对，

 

 报错：Cannot set properties of null。。。。。。。。。。。。。。。。

我的代码区主要是v-if控制显示隐藏，一开始没注意，偶然间发现改为v-show不报错了，于是我收集了一些两者的区别：

`v-if` 和 `v-show` 都是 Vue.js 中的条件渲染指令，它们允许你根据条件渲染元素，但它们之间存在一些关键的区别：

1. **渲染行为**:
   - `v-if` 是一个条件性渲染指令，它根据条件的真值性来决定是否渲染元素。如果条件为真，元素会被渲染到 DOM 中；如果条件为假，元素则不会被渲染到 DOM 中。
   - `v-show` 则是一个简单的切换 CSS 属性 `display` 的指令。无论条件真假，元素始终会被渲染到 DOM 中，但是当条件为假时，元素的 CSS `display` 属性会被设置为 `none`，从而隐藏元素。

2. **性能考虑**:
   - 使用 `v-if` 时，因为条件不满足时元素不会被渲染到 DOM，所以如果条件经常变化，使用 `v-if` 可能更高效，因为它避免了不必要的 DOM 节点创建和销毁。
   - 使用 `v-show` 时，由于元素始终在 DOM 中，只是简单地切换 CSS 属性，所以如果条件变化非常频繁，使用 `v-show` 可能更高效。

3. **初始渲染**:
   - `v-if` 是真正的条件渲染，初始渲染时就会根据条件决定是否渲染元素。
   - `v-show` 无论条件真假，元素都会渲染到 DOM 中，初始显示与否取决于条件的真值性。

4. **条件变化的影响**:
   - 当 `v-if` 的条件变化时，如果从真变为假，Vue 会销毁元素，并清理与该元素相关的所有事件监听器和子组件适当地回收；
   - 当 `v-show` 的条件变化时，只是简单地切换元素的显示状态，不会销毁元素或其子组件。

5. **与 CSS 的交互**:
   - `v-if` 不涉及 CSS 的 `display` 属性，它完全控制元素的插入和移除。
   - `v-show` 直接操作 CSS 的 `display` 属性，所以如果元素有其他 CSS 规则影响 `display`，可能会影响 `v-show` 的行为。

6. **使用场景**:
   - 当你需要根据条件渲染列表或组件，并且列表或组件的数量可能会变化时，`v-if` 是更好的选择。
   - 当你需要频繁切换元素的显示状态，并且元素的结构比较简单时，`v-show` 可能是更合适的选择。

总结来说，`v-if` 和 `v-show` 都可以用于条件性渲染，但是它们在渲染行为、性能、初始渲染和条件变化的处理上有所不同。你应该根据具体的使用场景和性能需求来选择合适的指令。

 --------------------------------------------------------------------------------------------------------------------------------

`v-if` 和 `v-show` 由于它们在渲染和性能方面的差异，各自适用于不同的场景：

### v-if 的使用场景：

1. **条件渲染列表**：当你需要根据条件渲染一个列表，且列表项的数量可能会根据数据变化而增减时，`v-if` 是更好的选择。

2. **组件切换**：在需要根据条件渲染不同的组件时，`v-if` 可以有效地在组件之间切换，因为每个组件都可以有自己的状态和生命周期钩子。

3. **资源管理**：当渲染的元素需要较多资源时（例如，包含大量子组件或数据），使用 `v-if` 可以避免不必要的资源消耗，因为不符合条件的元素不会被渲染。

4. **避免重复渲染**：如果你的条件很少改变，或者条件改变不频繁，使用 `v-if` 可以避免每次条件变化时都进行不必要的渲染。

5. **避免初始渲染**：如果某些元素在初始加载时不需要渲染，但可能在未来的某个时间点需要，`v-if` 可以延迟渲染直到条件为真。

### v-show 的使用场景：

1. **频繁切换显示状态**：当元素需要根据用户交互频繁地在显示和隐藏之间切换时，`v-show` 更合适，因为它只是简单地切换 CSS 的 `display` 属性。

2. **初始状态已知**：如果元素的初始显示状态（显示或隐藏）在初始渲染时就已经确定，并且之后可能会根据条件变化，使用 `v-show` 可以快速切换状态。

3. **简单元素**：对于简单的元素，如按钮或小块文本，如果它们经常需要根据条件显示或隐藏，使用 `v-show` 可以减少 DOM 操作的开销。

4. **避免组件销毁**：如果你希望即使在条件为假时，组件仍然保留其状态和事件监听器，使用 `v-show` 可以保持组件在 DOM 中，只是简单地隐藏。

5. **CSS 动画和过渡**：当需要结合 CSS 动画或 Vue 的 `<transition>` 组件来实现更复杂的显示和隐藏效果时，`v-show` 提供了一种简单的方式来切换元素的显示状态。

6. **性能考虑**：如果元素的渲染成本较低，并且你知道它将频繁地显示和隐藏，使用 `v-show` 可以避免因 `v-if` 导致的不必要的 DOM 节点创建和销毁。

选择 `v-if` 还是 `v-show` 取决于你的具体需求，包括元素的复杂性、条件变化的频率以及性能考虑。通常，`v-if` 更适合于条件不经常变化的情况，而 `v-show` 更适合于需要频繁切换显示状态的情况。，

所以大家还是细心一点......