当前位置：首页 > backend >正文

vue的h函数（在 Vue 2中也称为 createElement）理解

backend 2025/7/21 12:56:35

官方定义

定义: 返回一个“虚拟节点” ，通常缩写为 VNode: 一个普通对象，其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息，包括对任何子节点的描述。用于手动编写render

h函数格式说明及使用

h 接收三个参数

type: 必需，表示要创建的元素类型或组件类型。它可以是一个字符串（HTML标签名），一个组件选项对象、异步组件函数或者一个函数式组件。
props: 可选的对象，包含了传递给元素或组件的所有属性（attributes）和 props。例如：可以包含类名、样式、事件监听器等。
children: 可选，代表子节点，它可以是字符串（文本内容）、数组（包含多个子节点，每个子节点可以是字符串或其他由 h 创建的虚拟节点）或者其他合法的虚拟DOM节点。

示例1：简单创建一个VNode（vue3）

import { h } from 'vue'const vnode = h('div', // 类型为 div 标签{ id: 'app', class: 'container' }, // props 对象[ // 子节点数组h('p', { class: 'text' }, 'Hello, World!'), // 子节点1：一个 p 标签h('button', { onClick: handleClick ，style: { color: '#fbbf24', fontSize: '22px' } //样式}, 'Click me') // 子节点2：一个绑定了点击事件handleClick的按钮]
)function handleClick() {console.log('Button was clicked!')
}

通过h函数的方式构建虚拟DOM树，Vue可以在内部高效地比较新旧虚拟DOM的不同，并最小化地更新实际DOM，从而提高页面渲染性能。

示例2：vue2中h函数用法

import Vue from 'vue' // 引入Vue和h函数// 定义一个组件
var MyComponent = {props: ['message'],render: function (createElement) {return createElement( // createElement实际上就是h函数'div', // 元素类型{ 		 // 属性对象class: ['my-class'], style: { color: 'red' },on: {click: this.handleClick,},},[ // 子元素数组this.message, // 文本内容createElement('span', {}, '这是一个子元素'),])},methods: {handleClick: function (event) {console.log('Clicked!')}}
}// 注册并使用该组件
new Vue({el: '#app',components: {MyComponent},template: `<div id="app"><my-component message="Hello from custom render function!" /></div>`
})

示例3：vue3中h函数的用法

import { h, ref, defineComponent } from 'vue';// 定义一个使用h函数的组件
const MyComponent = defineComponent({props: {message: String,},setup(props) {const count = ref(0);function handleClick() {count.value++;}return () => h('div', { // 元素类型class: ['my-class'], style: { color: 'red' },onClick: handleClick, // 事件监听器}, [props.message, // 文本内容h('span', {}, '这是一个子元素'),`Clicked ${count.value} times`, // 动态文本内容]);},
});// 使用该组件
new Vue({render: (h) => h(MyComponent, { props: { message: "Hello from custom render function!" } }),
}).$mount('#app');

h函数实现原理

官方实现原理

export function h(type: any, propsOrChildren?: any, children?: any): VNode {if (arguments.length === 2) {if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {// single vnode without propsif (isVNode(propsOrChildren)) {return createVNode(type, null, [propsOrChildren])}// props without childrenreturn createVNode(type, propsOrChildren)} else {// omit propsreturn createVNode(type, null, propsOrChildren)}} else {if (isVNode(children)) {children = [children]}return createVNode(type, propsOrChildren, children)}
}

_createVNode 做的事情

function _createVNode(type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,props: (Data & VNodeProps) | null = null,children: unknown = null,// 更新标志patchFlag: number = 0,// 自定义属性dynamicProps: string[] | null = null,// 是否是动态节点，(v-if v-for)isBlockNode = false 
): VNode {// type必传参数if (!type || type === NULL_DYNAMIC_COMPONENT) {if (__DEV__ && !type) {warn(`Invalid vnode type when creating vnode: ${type}.`)}type = Comment}// Class 类型的type标准化// class component normalization.if (isFunction(type) && '__vccOpts' in type) {type = type.__vccOpts}// class & style normalization.if (props) {// props 如果是响应式，clone 一个副本if (isProxy(props) || InternalObjectKey in props) {props = extend({}, props)}let { class: klass, style } = props// 标准化class, 支持 string , array, object 三种形式if (klass && !isString(klass)) {props.class = normalizeClass(klass)}// 标准化style, 支持 array ,object 两种形式 if (isObject(style)) {// reactive state objects need to be cloned since they are likely to be// mutatedif (isProxy(style) && !isArray(style)) {style = extend({}, style)}props.style = normalizeStyle(style)}}// encode the vnode type information into a bitmapconst shapeFlag = isString(type)? ShapeFlags.ELEMENT: __FEATURE_SUSPENSE__ && isSuspense(type)? ShapeFlags.SUSPENSE: isTeleport(type)? ShapeFlags.TELEPORT: isObject(type)? ShapeFlags.STATEFUL_COMPONENT: isFunction(type)? ShapeFlags.FUNCTIONAL_COMPONENT: 0if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {type = toRaw(type)warn(`Vue received a Component which was made a reactive object. This can ` +`lead to unnecessary performance overhead, and should be avoided by ` +`marking the component with `markRaw` or using `shallowRef` ` +`instead of `ref`.`,`\nComponent that was made reactive: `,type)}// 构造 VNode 模型const vnode: VNode = {__v_isVNode: true,__v_skip: true,type,props,key: props && normalizeKey(props),ref: props && normalizeRef(props),scopeId: currentScopeId,children: null,component: null,suspense: null,dirs: null,transition: null,el: null,anchor: null,target: null,targetAnchor: null,staticCount: 0,shapeFlag,patchFlag,dynamicProps,dynamicChildren: null,appContext: null}normalizeChildren(vnode, children)// presence of a patch flag indicates this node needs patching on updates.// component nodes also should always be patched, because even if the// component doesn't need to update, it needs to persist the instance on to// the next vnode so that it can be properly unmounted later.// patchFlag 标志存在表示节点需要更新，组件节点一直存在 patchFlag，因为即使不需要更新，它需要将实例持久化到下一个 vnode，以便以后可以正确卸载它if (shouldTrack > 0 &&!isBlockNode &&currentBlock &&// the EVENTS flag is only for hydration and if it is the only flag, the// vnode should not be considered dynamic due to handler caching.patchFlag !== PatchFlags.HYDRATE_EVENTS &&(patchFlag > 0 ||shapeFlag & ShapeFlags.SUSPENSE ||shapeFlag & ShapeFlags.TELEPORT ||shapeFlag & ShapeFlags.STATEFUL_COMPONENT ||shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT)) {// 压入 VNode 栈currentBlock.push(vnode)}return vnode
}