VUE源码解析：3、虚拟dom和h函数

介绍虚拟dom，

虚拟Dom是把 真实的Dom结构 描述成 javaScript对象 ,（结构参考VUE源码解析：1）

diff算法是发生在虚拟Dom上的

h函数用来产生 => 虚拟节点 => 得到一个真实的dom

// h函数分3个参数：html标签名字、对象（a标签上的href属性）、内容
h("a", { 
	props: {href: "https://www.baidu.com/"} ,
}, "百度"),

/// 虚拟节点
{
	sel:'a',
	data:{
		props:{href: "https://www.baidu.com/"},
	},
	text:'百度'
}

// 真实dom
<a href="https://www.baidu.com/">百度</a>

虚拟节点有哪些属性

{
	sel:'div', // select选择器
	text:'我是一个div', // 文字
	data:{}, // div身上的属性，样式
	children:undefined, // div下的子元素[],如果是undefined，说明没有子元素
	elm:undefined, // div对应的真正的dom节点，如果是undefined，说明虚拟dom还没有渲染
	key:undefined // div节点的唯一标识
}

创建虚拟节点，渲染到页面，回到文章2的index.js文件，只把引包内容留下，其余删除

import {
	init,
	classModule,
	propsModule,
	styleModule,
	eventListenersModule,
	h,
} from "snabbdom";

//创建出patch函数（diff算法的核心函数）,patch函数可以服务与让虚拟节点渲染到页面，后续文章会介绍patch函数
const patch = init([init,classModule,propsModule,styleModule,eventListenersModule])

//创建虚拟节点
//创建虚拟节点
var myVnode1 = h('a',{
	props:{
		href:'https://www.baidu.com/',
		target:'_blank'
	},
},'百度')
console.log(myVnode1); // ===>下图1

//虚拟节点通过patch函数渲染
const container = document.getElementById('container'); //id:container是我们在index.html中定义的dom
patch(container,myVnode1); // ===>下图2

//嵌套方式使用h函数
var myVnode2 = h('ul',{},[
	h('li','单独一个li'),
	h('li',{
		class:{red:true}
	},'添加一个class类名'),
	h('li',h('p','li里边有个p标签')),
	h('li',[h('p','li里边第一个p'),h('p','li里边第二个p'),]),
])
patch(container,myVnode2); // ===>下图3

图1：

图2：

图3：