VNode 有哪些属性?

简介: VNode 有哪些属性?

Vue内部定义的Vnode对象包含了以下属性:


__v_isVNode: true,内部属性,有该属性表示为Vnode

__v_skip: true,内部属性,表示跳过响应式转换,reactive转换时会根据此属性进行判断

isCompatRoot?: true,用于是否做了兼容处理的判断

type: VNodeTypes,虚拟节点的类型

props: (VNodeProps & ExtraProps) | null,虚拟节点的props

key: string | number | null,虚拟阶段的key,可用于diff

ref: VNodeNormalizedRef | null,虚拟阶段的引用

scopeId: string | null,仅限于SFC(单文件组件),在设置currentRenderingInstance当前渲染实例时,一期设置

slotScopeIds: string[] | null,仅限于单文件组件,与单文件组件的插槽有关

children: VNodeNormalizedChildren,子节点

component: ComponentInternalInstance | null,组件实例

dirs: DirectiveBinding[] | null,当前Vnode绑定的指令

transition: TransitionHooks<HostElement> | null,TransitionHooks

DOM相关属性

el: HostNode | null,宿主阶段

anchor: HostNode | null // fragment anchor

target: HostElement | null ,teleport target 传送的目标

targetAnchor: HostNode | null // teleport target anchor

staticCount: number,包含的静态节点的数量

suspense 悬挂有关的属性

suspense: SuspenseBoundary | null

ssContent: VNode | null

ssFallback: VNode | null

optimization only 用于优化的属性

shapeFlag: number

patchFlag: number

dynamicProps: string[] | null

dynamicChildren: VNode[] | null

根节点会有的属性

appContext: AppContext | null,实例上下文

可以看到在Vue内部,对于一个Vnode描述对象的属性大概有二十多个。


Vue为了给用于减轻一定的负担,但又不至于太封闭,就创建了渲染函数。


可以在用户需要的时候,通过函数创建对应的Vnode即可。

相关文章
|
1月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
41 0
|
1月前
|
JavaScript
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
|
1月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
1月前
|
JavaScript 前端开发
在 Vue 中,如何使用`ref`和`$refs`来监听DOM元素的变化?
在 Vue 中,如何使用`ref`和`$refs`来监听DOM元素的变化?
179 0
|
10月前
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
126 0
|
10月前
|
JSON 前端开发 JavaScript
【为什么react元素有一个$$typeof属性】
【为什么react元素有一个$$typeof属性】
|
10月前
|
缓存 JavaScript
Vue常用属性(计算属性和侦听器属性)
Vue常用属性(计算属性和侦听器属性)
|
10月前
|
存储 JSON 前端开发
为什么react元素有一个$$type属性?
为什么react元素有一个$$type属性?
79 0
|
缓存 JavaScript 计算机视觉
|
JavaScript 开发者
使用 ref 获取 DOM 元素和组件引用|学习笔记
快速学习使用 ref 获取 DOM 元素和组件引用
113 0
使用 ref 获取 DOM 元素和组件引用|学习笔记