h render createApp的使用
createApp h, render vue中这三个是啥 具体作用是啥
ChatGPT said:
非常好,这三个是 Vue 3 的核心渲染 API,掌握它们可以灵活控制组件的创建与挂载,特别是在 非组件上下文中动态渲染组件(如你在 Leaflet popup 中使用 Vue 组件) 的场景下非常重要。
✅ 一句话理解:
API 作用说明 常用于
h() 创建一个虚拟节点(VNode) 手动构造组件的结构
render() 把 VNode 渲染进真实 DOM 容器 简单挂载静态组件(不带 app 上下文)
createApp() 创建 Vue 应用实例,包含完整上下文(插件等) 动态挂载组件(推荐)
📘 具体解释
1️⃣ h():创建虚拟节点(hyperscript)
h 是 createVNode() 的别名,用来手动构造一个组件或标签的“虚拟节点”,等价于你在模板中
语法:
ts
Copy
Edit
import { h } from 'vue';
const vnode = h(MyComponent, {
propA: 'abc',
onClick: () => console.log('点击事件')
});
举个例子:
ts
Copy
Edit
const vnode = h('div', { class: 'box' }, 'Hello World');
你构造了
2️⃣ render(vnode, container):将 VNode 渲染进 DOM
把 h() 创建的 vnode,直接插入到某个 DOM 容器中。
示例:
ts
Copy
Edit
const vnode = h(MyComponent, { msg: 'Hi' });
render(vnode, document.getElementById('app'));
📌 缺点:不会注入 Vue 应用上下文 → ❌ 插件(如 Element Plus)无效!
3️⃣ createApp():创建完整的 Vue 应用实例 ✅
这是最推荐用于动态挂载组件的方法,支持所有 Vue 功能(如 provide/inject、插件、生命周期等)。
示例:
ts
Copy
Edit
const app = createApp(MyComponent, {
propA: 'hello'
});
app.use(ElementPlus); // ✅ 支持插件 ✅ Leaflet 弹窗场景建议: ✨ 总结类比 h() → 虚拟构造器("我要什么结构") render() → 低级注入器("塞进这个 div 里") createApp() → Vue 全家桶("我要一个完整 Vue 小应用") 如果你还想封装一个通用的组件弹窗管理器,比如 Leaflet 中统一使用 PopupManager.show(component, props, latlng),我可以帮你写一个。需要吗?
app.mount('#app'); // 渲染进真实 DOM
✅ 什么时候用哪个?
场景 用法推荐 说明
你想渲染一个完整组件(含 Element 等) ✅ createApp() 推荐方式,支持插件、依赖注入等
你只渲染一个静态 HTML / 轻量组件 render(h(), el) 轻量用法,不能使用 Vue 插件
在 中用组件 模板语法即可 无需手动 h() / render()
目标 推荐用法
弹窗中显示静态 HTML popup.setContent('
弹窗中显示简单 DOM(原生 JS 构建) 创建 DOM + innerHTML
弹窗中显示 Vue 组件(带 Element 组件等) ✅ createApp(component) + setContent(container)
你可以把它们类比为: