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即可。

相关文章
|
6月前
|
JavaScript vr&ar
vue3通过ref获取dom元素并修改样式
vue3通过ref获取dom元素并修改样式
573 0
|
6月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
75 0
|
19天前
|
缓存 JavaScript Java
vue2知识点:组件的props属性、非props属性、props属性校验
vue2知识点:组件的props属性、非props属性、props属性校验
24 4
|
2月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
56 13
|
3月前
|
前端开发
|
JavaScript
Vue 父组件向子组件传参 props 属性
Vue 父组件向子组件传参 props 属性
|
6月前
|
JavaScript 前端开发
在 Vue 中,如何使用`ref`和`$refs`来监听DOM元素的变化?
在 Vue 中,如何使用`ref`和`$refs`来监听DOM元素的变化?
659 0
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
166 0
|
缓存 JavaScript
Vue常用属性(计算属性和侦听器属性)
Vue常用属性(计算属性和侦听器属性)
|
JSON 前端开发 JavaScript
【为什么react元素有一个$$typeof属性】
【为什么react元素有一个$$typeof属性】