dynamicChildren: VNode[] | *null* 根节点会有的属性 appContext: AppContext | *null*,实例上下文 可以看到在Vue内部,对于一个Vnode描述对象的属性大概有二十多个,有些属性还必须经过规范梳理。 Vue为了给用于减轻一定的负担,但又不至于太封闭,就创建了渲染h。可以在用户需要的时候,通过h函数创建对应的Vnode即可。
appContext: AppContext | *null*,实例上下文 可以看到在Vue内部,对于一个Vnode描述对象的属性大概有二十多个,有些属性还必须经过规范梳理。 Vue为了给用于减轻一定的负担,但又不至于太封闭,就创建了渲染h。可以在用户需要的时候,通过h函数创建对应的Vnode即可。 这样就给为一些高阶玩家保留了自由发挥的空间。 render...
return vnode.component.proxy; } }, // 省略了一些代码 }); return app; }; } 上面的createApp函数里面返回一个app 对象,对象里面就有组件相关的属性,包括插件相关、 mixin 相关、组件挂载、指令挂载到context上,还有一个值得注意的就是mount函数,和最开始createApp(App).mount(root);不一样,还记得上面的里...
rootProps);vnode.appContext=context;// 渲染render(vnode,rootContainer,isSVG);isMounted=true;// 实例和容器元素互相关联app._container=rootContainer;rootContainer.__vue_app__=app;// 返回根组件的实例returngetExposeProxy(vnode.component)||vnode.component.proxy;}}...
vue2升级vue3: h、createVNode、render、createApp使用 h、createVNode 杂乱笔记,凑合着看,不喜勿喷! h 函数是什么 h 函数本质就是 createElement()的简写,作用是根据配置创建对应的虚拟节点,在vue 中占有极其重要的地位! 在Vue2中,有个全局API:render函数。Vue内部回给这个函数传递一个h函数,用于创建Vnode的...
isHydrate */ mount(rootContainer: HostElement, isHydrate?: boolean): any { if (!isMounted) { // 创建 vnode 节点 const vnode = createVNode( rootComponent as ConcreteComponent, rootProps ) // 节点的 vnode 挂载 context vnode.appContext = context // 忽略其他平台的执行,和开发环境的警告 // ...
appContext: AppContext | *null*,实例上下文 可以看到在Vue内部,对于一个Vnode描述对象的属性大概有二十多个,有些属性还必须经过规范梳理。 Vue为了给用于减轻一定的负担,但又不至于太封闭,就创建了渲染h。可以在用户需要的时候,通过h函数创建对应的Vnode即可。 这样就给为一些高阶玩家保留了自由发挥的空间。 render...
rootContainer: HostElement, //这里把我们挂载点的html转换成了vnode isHydrate?: boolean, isSVG?: boolean ): any { if (!isMounted) { const vnode = createVNode( rootComponent as ConcreteComponent, rootProps ) // store app context on the root VNode. ...
通过createApp方法创建应用实例,传了一个组件的选项对象,包括模板template、组合式API的入口setup函数,在setup函数里使用ref创建了一个响应式数据,然后return给模板使用,最后调用实例的mount方法将模板渲染到id为app的元素内。后续只要修改count的值页面就会自动刷新,麻雀虽小,但是也代表了Vue的核心。
function createComponentInstance (vnode, parent, suspense) { // 继承父组件实例上的 appContext，如果是根组件，则直接从根 vnode 中取。const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;const instance = { // 组件唯一 id uid: uid++,// 组件 vnode vnode,//...