`h` 和 `createVNode` 一样吗?
Are `h` and `createVNode` the same?
h
和 createVNode
都暴露于 vue
。
doc 似乎表明它们是相同的:
The h() function is a utility to create VNodes. It could perhaps more accurately be named createVNode().
但是切换 h
到 createVNode
会抛出:
<script lang="ts">
import { createVNode, defineComponent, h } from 'vue'
export default defineComponent({
setup() {
// works
return () => h('strong', 'Foo')
// throws
return () => createVNode('strong', 'Foo')
},
})
</script>
createVNode
已公开,但 h
是它的用户友好变体。如果你想直接调用 createVNode
你应该添加不同类型的参数,参见:
export const createVNode = (__DEV__
? createVNodeWithArgsTransform
: _createVNode) as typeof _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,
isBlockNode = false
)
对于h
:
If there are no props then the children can usually be passed as the second argument.
你可以这样做:
h('strong', 'Foo')
对于createVNode
,你必须做:
createVNode('strong', null, 'Foo')
h
和 createVNode
都暴露于 vue
。
doc 似乎表明它们是相同的:
The h() function is a utility to create VNodes. It could perhaps more accurately be named createVNode().
但是切换 h
到 createVNode
会抛出:
<script lang="ts">
import { createVNode, defineComponent, h } from 'vue'
export default defineComponent({
setup() {
// works
return () => h('strong', 'Foo')
// throws
return () => createVNode('strong', 'Foo')
},
})
</script>
createVNode
已公开,但 h
是它的用户友好变体。如果你想直接调用 createVNode
你应该添加不同类型的参数,参见:
export const createVNode = (__DEV__
? createVNodeWithArgsTransform
: _createVNode) as typeof _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,
isBlockNode = false
)
对于h
:
If there are no props then the children can usually be passed as the second argument.
你可以这样做:
h('strong', 'Foo')
对于createVNode
,你必须做:
createVNode('strong', null, 'Foo')