vue3 封装usedivt

Vue3 中的 `useDiv` 是一种常见的函数组件模式，用于封装可复用的自定义元素或 DOM 元素容器。它通常会创建一个名为 `div` 的根节点，并将其作为返回值供外部组件引用。这样做有几个优点：

1. **代码组织**：通过将 UI 内部逻辑提取出来，可以保持组件的简洁和清晰，方便维护。

2. **复用灵活性**：如果需要在多个地方使用相似的结构，只需要导入并使用这个 `useDiv` 函数，无需每次都手动创建 `<div>` 标签。

3. **响应式更新**：由于 Vue 的响应式系统，当 `useDiv` 接收的数据变化时，对应的 DOM 结构也会自动更新。

import { ref } from 'vue';

export default function useDiv({ content = '', className = '', ...props }) {
  const divRef = ref(null);
  // 渲染函数
  return () => {
    const element = document.createElement('div');
    element.textContent = content;
    element.className = className;
    Object.assign(element.style, props); // 设置其他样式属性
    divRef.value = element; // 将渲染好的元素赋值给 ref
    return element;
  };
}