vue 源码 ——vnode

[oliver1204]

在浏览器中通过js来操作DOM，这样的操作性能很差，于是Virtual Dom应运而生。Virtual Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。

vnode 函数

var VNode = function VNode (
  tag,
  data,
  children,
  text,
  elm,
  ns,
  context,
  componentOptions
) {
  this.tag = tag
  this.data = data
  this.children = children
  this.text = text
  this.elm = elm
  this.ns = ns
  this.context = context
  this.key = data && data.key
  this.componentOptions = componentOptions
  this.child = undefined
  this.parent = undefined
  this.raw = false
  this.isStatic = false
  this.isRootInsert = true
  this.isComment = false
  this.isCloned = false
};

• DOM是文档对象模型(Document Object Model)的简写，在浏览器中我们可以通过js来操作DOM，

• 但是这样的操作性能很差，于是Virtual Dom应运而生。

• Virtual Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。

• children: 数组类型，包含了当前节点的子节点

• text: 当前节点的文本，一般文本节点或注释节点会有该属性

• elm: 当前虚拟节点对应的真实的dom节点

• ns: 节点的namespace

• context: 编译作用域

• functionalContext: 函数化组件的作用域

• componentOptions: 创建组件实例时会用到的选项信息

• key: 节点的key属性，用于作为节点的标识，有利于patch的优化

• child: 当前节点对应的组件实例

• parent: 组件的占位节点

• raw: raw html

• isStatic: 静态节点的标识

• isRootInsert: 是否作为根节点插入，被包裹的节点，该属性的值为false

• isComment: 当前节点是否是注释节点

• isCloned: 当前节点是否为克隆节点