vue3通过h函数让组件显示隐藏

在 Vue3 中，`h` 函数实际上是 `render` 函数的一部分，它是 Vue 的虚拟 DOM 渲染引擎的核心。`h` 短语源自“createElement”的首字母缩写，它用于创建并返回一个 VNode（Virtual Node），这是 Vue 模板渲染过程中构建真实 DOM 元素的基础。

如果你想通过 `h` 函数动态控制组件的显示与隐藏，你可以这样做：

// 假设有一个名为 MyComponent 的 Vue 组件
const MyComponent = {
  render(h) {
    // 使用 v-if 或者 v-show 来控制组件是否显示
    return h('div', { class: 'my-component', v-if: this.showComponent }, this.$slots.default);
    // 或者使用条件渲染
    // return h('div', { class: 'my-component', :hidden="!showComponent"}, this.$slots.default);
  },
  data() {
    return {
      showComponent: true, // 默认展示
    };
  },
};

// 当需要隐藏时，改变 showComponent 的值
this.showComponent = false;

// 当需要显示时，再设置回 true
this.showComponent = true;

在这个例子中，当 `showComponent` 为 `true` 时，`MyComponent` 将会被渲染并添加到 DOM 中；如果为 `false`，则不会渲染，组件元素会从 DOM 中移除。`v-if` 更适合在条件极少变化的情况下使用，而 `v-show` 则更适合大量数据更新的情况，因为它的切换有性能开销。