Vue 源码分析5----DOM

Vue底层也是通过虚拟dom渲染页面。现在我们描述一下相关知识点

1.虚拟dom是通过渲染函数(h函数)产生

2.新虚拟DOM和老虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的DOM上。

真实dom

由以上图片可以知道，我们 html模板就是真实dom。

虚拟dom

 

用Javascript 对象描述DOM层次结构。DOM中的一切属性都在虚拟DOM中有相对应的属性。

下面我们通过一个流程图说明数据渲染过程。

 

这里渲染过程要用到snabbdom库，我们在build文件夹下，看到生成js文件。

 话不多说，先上demo。这里可以看到源码

import { init } from 'snabbdom/build/init';
import { classModule } from 'snabbdom/build/modules/class';
import { propsModule } from 'snabbdom/build/modules/props';
import { styleModule } from 'snabbdom/build/modules/style';
import { eventListenersModule } from 'snabbdom/build/modules/eventlisteners';
import { h } from 'snabbdom/build/h';

//1.创建出patch 函数
const patch = init([classModule,propsModule,styleModule, eventListenersModule]);

//2.创建虚拟节点
const myVnode1 = h('a',{
	props:{
		href:"http://www.baidu.com"
	}
},"测试");

//3.让虚拟节点上树
const container = document.getElementById('container');
console.log(container);
patch(container,myVnode1);

上面代码运行结果是

 通过console命令行，我们可以看到通过h函数变换后的虚拟节点，分别有以下几个属性。

属性	说明	备注
sel	属性说明
child	子类节点
elm	标签
key
text	显示文本
data	标签内容属性

同理，我们通过修改创建虚拟节点div，如下面代码所示

const myVnode2 = h('div',"我是一个盒子");
console.log(myVnode2);
// console.log(myVnode2.sel);
//3.让虚拟节点上树

const container1 = document.getElementById('container1');
patch(container1,myVnode2);

通过console打印可以知道

通过上面测试可以知道，打印该节点，可以看到该属性。

另外，虚拟节点可以通过多层嵌套，h虚拟节点，然后渲染出来，如下列代码所示。

import { init } from 'snabbdom/init';
import { classModule } from 'snabbdom/modules/class';
import { propsModule } from 'snabbdom/modules/props';
import { styleModule } from 'snabbdom/modules/style';
import { eventListenersModule } from 'snabbdom/modules/eventlisteners';
import { h } from 'snabbdom/h';

// 创建出patch函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);

// 创建虚拟节点
const myVnode1 = h('a', {
    props: {
        href: 'http://www.atguigu.com',
        target: '_blank'
    }
}, '尚硅谷');

const myVnode2 = h('div', '我是一个盒子');

const myVnode3 = h('ul', [
    h('li', {}, '苹果'),
    h('li', '西瓜'),
    h('li', [
        h('div', [
            h('p', '哈哈'),
            h('p', '嘻嘻')
        ])
    ]),
    h('li', h('p', '火龙果'))
]);

console.log(myVnode3);

// 让虚拟节点上树
const container = document.getElementById('container');
patch(container, myVnode3);

虚拟节点myVnode3层层嵌套，也能渲染dom节点出来。

我们查看snabbdom/build/init.js下init function源码，可以看到返回值一个函数

 

结语：

本章节主要说明h函数使用方式，并且 h函数渲染到真实dom的简单用例。