Vue源码学习（三）：虚拟Dom以及初次渲染

在实际开发中如果每次都去操作真实dom进行开发，那么性能就会无比的差劲，因为一个真实dom中包含的东西实在太多了，而我们开发的时候肯定是需要上千甚至上万个dom才能组成一个项目，所以为了性能考虑，我们都是通过操作虚拟dom，再让虚拟dom与真实dom进行比对，也就是diff生成一个新的对象，再将这个对象渲染到页面中来，这就是vue中帮我们做的事。

接下来就来看看怎么实现一个虚拟dom。
首先我们要知道虚拟dom其实就是一个对象，里面包含着一些我们要用到的属性，比如说标签名、属性名、子节点等等，在vue中是通过 h 函数来描述这种虚拟dom的。

写一个vnode方法 返回一个对象 其中包含标签名、标签上的属性、key（唯一标识）、孩子节点、文本内容。

接下来是实现h函数了。将标签、标签属性以及儿子节点传进去，首先是将属性中的key值保存下来，然后删除属性中的key（也可以不删 不删的话就会在控制台中显示出来），接下来就是遍历儿子节点，判断其是否为对象，是一个对象则直接将该节点返回，否则说明是一个文本节点，需要调用vnode方法，将这个文本返回显示。这里前四个参数都不传，只传最后一个文本的参数。
最后将得到的key、children与传进来的tag、props一起传给vnode方法，并返回。
这样就实现了一个虚拟dom了。

生成虚拟节点以后，就需要有一个方法能够把虚拟节点渲染到我们的页面上去，这时候就需要实现一下render方法来创建一个虚拟dom。

首先要来创建真实节点，把需要渲染的虚拟节点以及要放入的容器传到render函数中，像下面这样这样

然后将需要用到的属性从传进来的虚拟节点中结构出来，判断一下tag的属性是否为string，如果是则说明是一个标签，这个时候就可以通过document.createElement来创建标签了，这里可能还有子节点，需要递归渲染当前孩子列表，通过forEach递归孩子节点children，再次调用render函数，这个时候的虚拟节点就是child本身，父容器就是上面创建的vnode.el节点。如果不是则说明这是一个文本，就通过document.createTextNode来创建文本节点。
最后将获得的真实节点通过appendChild加入到容器container中，也就是我们的页面中。

接下来就是更新属性的方法实现了。这里的updateProperties需要传入两个参数，一个是vnode虚拟节点，一个是老节点的属性，由于这里是第一次渲染，所以没有老节点的属性，因此只传一个虚拟节点就好了。

首先是获取老节点的属性和真实节点，也就是下面的newProps和el。首先我们要考虑传入的属性如果是style的话，那么就需要再次遍历一下了，因为传入的style是一个对象，里面的样式可能有很多，所以就需要我们对style对象进行遍历，拿到对象里面的键名也就是样式名，然后将属性里的style值赋值给它，形式就大概是这样 el.style.color = ‘red’。
然后就是考虑它是否为一个类class了，这个就简单了，直接将类名赋给真实dom上的属性就好了。
最后就是给这个元素增加属性了，值就是虚拟dom上对应的属性值。

考虑到下次更新也会调用这个方法，这里我们加了两个for…in循环，首先是当新的虚拟节点中的style对象删除了某个属性的时候，就需要将对应属性去掉。这里我们要遍历旧的style对象，如果新的style对象中不存在旧的style中的属性的话，就将其赋值为空字符串。
属性也是一样，下次更新中我们会用新的属性来更新老的节点，如果老的节点中有属性，新的没有，那么也是一样用遍历来判断新的属性对象中是否有对应的属性，没有则直接删除这个属性。