vue注册新节点_【Ts重构Vue】01-如何创建虚拟节点

如何创建虚拟节点

React/Vue都用到了虚拟DOM，围绕虚拟DOM，本篇主要解决下面3个问题。

为什么要使用虚拟DOM？

如何定义(创建)虚拟dom呢？

虚拟DOM如何映射为真实DOM？

我们的编码目标是下面的demo能够成功渲染。

let vm = new Vue({

el: '#app',

render (h) {

return h('h1', 'Hello Vue!')

}

})

复制代码

为什么要使用虚拟节点

将下列代码拷贝至浏览器中运行：

let d = document.createElement('div')

for(let key in d) console.log(key)

复制代码

我们会发现，真实dom上有非常多的属性，通过自定义虚拟dom能够有效节省空间。

另外，真实dom的重排重绘是非常消耗性能的，应该尽量少修改，借助虚拟DOM的diff算法，能够有效提升性能。

最重要的是，当前有非常多的跨端开发需求，如原生、web、小程序等等，借助虚拟DOM有助于跨端开发，一段代码处处运行。

创建虚拟DOM

VNode必备属性只有tag/data/children/text/elm，其他属性为vue功能需要，如componetOptions/componentInstance只在组件节点中才被使用。

export class VNode {

tag?: string

data?: VNodeData

children?: Array

text?: string

elm?: Node

context?: Vue

componentOptions?: VueOptions

componentInstance?: Vue

parent?: VNode

key?: string | number

constructor(

tag?: string,

data?: VNodeData,

children?: Array,

text?: string,

elm?: Node,

context?: Vue,

componentOptions?: VueOptions

) {

this.tag = tag

this.data = data || ({} as VNodeData)

this.children = children

this.text = text