Vue 中如何实现一个虚拟 DOM?
首先要构建一个 Vnode 的类,DOM 元素上的所有属性在 Vnode 类实例化出来的对象上都存 首先要构建一个 Vnode 的类,DOM 元素上的所有属性在 Vnode 类实例化出来的对象上都存
在对应的属性。例如 tag 表示一个元素节点的名称,text 表示一个文本节点的文本,chlidren 表示 在对应的属性。例如 tag 表示一个元素节点的名称,text 表示一个文本节点的文本,chlidren 表示
子节点等。将 Vnode 类实例化出来的对象进行分类,例如注释节点、文本节点、元素节点、组件 子节点等。将 Vnode 类实例化出来的对象进行分类,例如注释节点、文本节点、元素节点、组件
节点、函数式节点、克隆节点。 节点、函数式节点、克隆节点。
然后通过编译将模板转成渲染函数 render,执行渲染函数 render,在其中创建不同类型的 然后通过编译将模板转成渲染函数 render,执行渲染函数 render,在其中创建不同类型的
Vnode 类,最后整合就可以得到一个虚拟 DOM(vnode),最后通过 patch 将 vnode 和oldVnode 进行比较后,生成真实 DOM Vnode 类,最后整合就可以得到一个虚拟 DOM(vnode),最后通过 patch 将 vnode 和oldVnode 进行比较后,生成真实 DOM