说说 VNode 节点( Vue.js 实现)

抽象Dom树

在刀耕火种的年代,我们需要在各个事件方法中直接操作Dom来达到修改视图的目的。但是当应用一大就会变得难以维护。

那我们是不是可以把真实Dom树抽象成一棵以javascript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实Dom重绘到页面上呢?于是虚拟Dom出现了,它是真实Dom的一层抽象,用属性描述真实Dom的各个特性。当它发生变化的时候,就会去修改视图。

但是这样的javascript操作Dom进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将Dom抽象成一个以javascript对象为节点的虚拟Dom树,以VNode节点模拟真实Dom,可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作,在这过程中都不需要操作真实Dom,只需要操作javascript对象,大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位,再将这些小单位的视图进行更新。这样做减少了很多不需要的Dom操作,大大提高了性能。

Vue就使用了这样的抽象节点VNode,它是对真实Dom的一层抽象,而不依赖某个平台,它可以是浏览器平台,也可以是weex,甚至是node平台也可以对这样一棵抽象Dom树进行创建删除修改等操作,这也为前后端同构提供了可能。

VNode基类

先来看一下Vue.js源码中对VNode类的定义。

  • export default class VNode {
  • tag: string | void;
  • data: VNodeData | void;
  • children: ?Array<VNode>;
  • text: string | void;
  • elm: Node | void;
  • 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;
  • componentOptions: VNodeComponentOptions | void;
  • componentInstance: Component | void; // component instance
  • parent: VNode | void; // component placeholder node
  • raw: boolean; // contains raw HTML? (server only)
  • isStatic: boolean; // hoisted static node
  • isRootInsert: boolean; // necessary for enter transition check
  • isComment: boolean; // empty comment placeholder?
  • isCloned: boolean; // is a cloned node?
  • isOnce: boolean; // is a v-once node?
  • constructor (
  • tag?: string,
  • data?: VNodeData,
  • children?: ?Array<VNode>,
  • text?: string,
  • elm?: Node,
  • context?: Component,
  • componentOptions?: VNodeComponentOptions
  • ) {
  • /*当前节点的标签名*/
  • this.tag = tag
  • /*当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息*/
  • this.data = data
  • /*当前节点的子节点,是一个数组*/
  • this.children = children
  • /*当前节点的文本*/
  • this.text = text
  • /*当前虚拟节点对应的真实dom节点*/
  • this.elm = elm
  • /*当前节点的名字空间*/
  • this.ns = undefined
  • /*编译作用域*/
  • this.context = context
  • /*函数化组件作用域*/
  • this.functionalContext = undefined
  • /*节点的key属性,被当作节点的标志,用以优化*/
  • this.key = data && data.key
  • /*组件的option选项*/
  • this.componentOptions = componentOptions
  • /*当前节点对应的组件的实例*/
  • this.componentInstance = undefined
  • /*当前节点的父节点*/
  • this.parent = undefined
  • /*简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false*/
  • this.raw = false
  • /*静态节点标志*/
  • this.isStatic = false
  • /*是否作为跟节点插入*/
  • this.isRootInsert = true
  • /*是否为注释节点*/
  • this.isComment = false
  • /*是否为克隆节点*/
  • this.isCloned = false
  • /*是否有v-once指令*/
  • this.isOnce = false
  • }
  • // DEPRECATED: alias for componentInstance for backwards compat.
  • /* istanbul ignore next https://github.com/answershuto/learnVue*/
  • get child (): Component | void {
  • return this.componentInstance
  • }
  • }

这是一个最基础的VNode节点,作为其他派生VNode类的基类,里面定义了下面这些数据。

tag: 当前节点的标签名

data: 当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息

children: 当前节点的子节点,是一个数组

text: 当前节点的文本

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

ns: 当前节点的名字空间

context: 当前节点的编译作用域

functionalContext: 函数化组件作用域

key: 节点的key属性,被当作节点的标志,用以优化

componentOptions: 组件的option选项

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

parent: 当前节点的父节点

raw: 简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false

isStatic: 是否为静态节点

isRootInsert: 是否作为跟节点插入

isComment: 是否为注释节点

isCloned: 是否为克隆节点

isOnce: 是否有v-once指令


打个比方,比如说我现在有这么一个VNode树

  • {
  • tag: 'div'
  • data: {
  • class: 'test'
  • },
  • children: [
  • {
  • tag: 'span',
  • data: {
  • class: 'demo'
  • }
  • text: 'hello,VNode'
  • }
  • ]
  • }

渲染之后的结果就是这样的

  • <div class="test">
  • <span class="demo">hello,VNode</span>
  • </div>

生成一个新的VNode的方法

下面这些方法都是一些常用的构造VNode的方法。

createEmptyVNode 创建一个空VNode节点

  • /*创建一个空VNode节点*/
  • export const createEmptyVNode = () => {
  • const node = new VNode()
  • node.text = ''
  • node.isComment = true
  • return node
  • }

createTextVNode 创建一个文本节点

  • /*创建一个文本节点*/
  • export function createTextVNode (val: string | number) {
  • return new VNode(undefined, undefined, undefined, String(val))
  • }

createComponent 创建一个组件节点

```javascript
// plain options object: turn it into a constructor https://github.com/answershuto/learnVue
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}

// if at this stage it's not a constructor or an async component factory,
// reject.
/Github:/ /如果在该阶段Ctor依然不是一个构造函数或者是一个异步组件工厂则直接返回*/
if (typeof Ctor !== 'function') {
if (process.env.NODE_ENV !== 'production') {

top Created with Sketch.