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');
你构造了

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); // ✅ 支持插件
app.mount('#app'); // 渲染进真实 DOM
✅ 什么时候用哪个?
场景 用法推荐 说明
你想渲染一个完整组件(含 Element 等) ✅ createApp() 推荐方式,支持插件、依赖注入等
你只渲染一个静态 HTML / 轻量组件 render(h(), el) 轻量用法,不能使用 Vue 插件

posted @ 2025-06-25 17:25  无梦南柯  阅读(46)  评论(0)    收藏  举报