createVNode h函数其实是createVNode的语法糖,返回的就是一个Js普通对象。在createVNode API 在创建Vnode的时候,会对Vnode的props、children、ref、class、style等属性进行规范梳理或者合并。如果Type直接就是Vnode类型,则会返回深度克隆的Vnode对象。相较于HTML模板语法,使用h函数创建组件Vnode,更加灵活,也更抽象。 1 2...
h、createVNode 杂乱笔记,凑合着看,不喜勿喷! h 函数是什么 h 函数本质就是 createElement() 的简写,作用是根据配置创建对应的虚拟节点,在vue 中占有极其重要的地位!在Vue2中,有个全局API:render函数。Vue…
h、createVNode 杂乱笔记,凑合着看,不喜勿喷! h 函数是什么 h 函数本质就是 createElement() 的简写,作用是根据配置创建对应的虚拟节点,在vue 中占有极其重要的地位! 在Vue2中,有个全局API:render函数。Vue内部回给这个函数传递一个h函数,用于创建Vnode的描述对象。在Vue3中。将h函数独立出来,作为一个单独的...
createTextVNode export declare function createTextVNode( text?: string, flag?: number ): VNode; function createTextVNode(text = ' ', flag = 0) { return createVNode(Text, null, text, flag); } 1. 2. 3. 4. 5. 6. 7. 8. createBlock /** * Create a block root vnode. Takes the ...
{// 创建虚拟DOMconstvnode=createVNode(rootComponent,rootProps);vnode.appContext=context;// 渲染render(vnode,rootContainer,isSVG);isMounted=true;// 实例和容器元素互相关联app._container=rootContainer;rootContainer.__vue_app__=app;// 返回根组件的实例returngetExposeProxy(vnode.component)||vnode....
* 1. 创建根组件的 vnode * 2. 调用 render 方法,将 vnode 渲染到真实 dom 上 */ mount: (rootContainer) => { const vnode = createVNode(rootComponent, rootProps) vnode.appContext = context render(vnode, rootContainer) }, components: {} ...
return (openBlock(), createBlock("h1", null, [ _hoisted_1, createVNode("span", _hoisted_2, toDisplayString(_ctx.name), 1 /* TEXT */) ])) }); 到这里就不难看出,App.vue文件经过编译之后得到一个render函数,详情请看在线编译。当然还有css代码,编译后代码如下: ...
__DEV__ &&warn(`root props passed to app.mount() must be an object.`) rootProps =null}constcontext =createAppContext()// TODO remove in 3.4if(__DEV__) {Object.defineProperty(context.config,'unwrapInjectedRef', {get() {returntrue},set() {warn(`app.config.unwrapInjectedRef has been...
isHydrate */ mount(rootContainer: HostElement, isHydrate?: boolean): any { if (!isMounted) { // 创建 vnode 节点 const vnode = createVNode( rootComponent as ConcreteComponent, rootProps ) // 节点的 vnode 挂载 context vnode.appContext = context // 忽略其他平台的执行,和开发环境的警告 // ...
通过createApp方法创建应用实例,传了一个组件的选项对象,包括模板template、组合式API的入口setup函数,在setup函数里使用ref创建了一个响应式数据,然后return给模板使用,最后调用实例的mount方法将模板渲染到id为app的元素内。后续只要修改count的值页面就会自动刷新,麻雀虽小,但是也代表了Vue的核心。