vue源码学习——虚拟dom树是如何定义的

最新推荐文章于 2024-07-01 17:30:51 发布

Yunruohan

最新推荐文章于 2024-07-01 17:30:51 发布

阅读量648

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/titoni_yunruohan/article/details/83746487

版权

本文探讨了Vue中虚拟DOM（vnode）的定义，包括vnode基类的介绍、具体应用示例、如何创建不同类型的节点以及cloneVNode函数。尽管理解了源码，但对于构造器和克隆函数的设计目的仍需深入研究。

摘要由CSDN通过智能技术生成

情景：相信通过前面的学习你已经知道了虚拟dom为什么会被构思，那么接下来你好奇的应该是作者该如何定义这个虚拟dom

vnode基类的定义(源码地址https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/vnode.js)

export default class VNode {
  tag: string | void;//当前节点的标签名
  data: VNodeData | void;//当前节点对应的对象，包含了一些具体的数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息
  children: ?Array<VNode>;//当前节点的子节点是一个数组
  text: string | void;//当前节点的文本
  elm: Node | void;//当前虚拟节点对应的真实dom节点
  ns: string | void;//当前节点的名字空间
  context: Component | void; // rendered in this component's scope 当前节点的编译作用域
  functionalContext: Component | void; // only for functional component root nodes函数化组件作用域
  key: string | number | void;//节点的key属性，被当作节点的标志，用以优化
  componentOptions: VNodeComponentOptions | void;//组件的option选项