Virtual DOM 其实就是一棵以 js对象(VNode节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。Virtual DOM 以js对象作为基础,不依赖真实的环境,所以具有跨平台性,可以运行在
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。
自己实现一个vNode
class VNode {
constructor (tag, data, children, text, elm) {
/*当前节点的标签名*/
this.tag = tag;
/*当前节点的一些数据信息,比如props、attrs等数据*/
this.data = data;
/*当前节点的子节点,是一个数组*/
this.children = children;
/*当前节点的文本*/
this.text = text;
/*当前虚拟节点对应的真实dom节点*/
this.elm = elm;
}
}
function createVNode () {
const node = new VNode();
node.tag = 'a';
node.text = '123';
return node;
}
}