Vue中的虚拟dom

一、什么是虚拟DOM

（1）、通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 
(children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加
到页面中。
（2）、创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实
DOM的属性一一照应

虚拟dom可以简单的用一句话概括

就是用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM

创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，
成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom

二、 在vue中如何应用虚拟DOM

（1）、定义真实DOM

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

(2)、实例化vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

(3)、vue源码中render函数渲染虚拟DOM

(function anonymous() {
 with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
       [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作，经过diff算法得出一
些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能

三、为什么需要虚拟DOM

（1）、DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，
	操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验
（2）、vue中虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消	
	耗。虽然这一个虚拟 DOM带来的一个优势，但并不是全部。
	其它框架中也有虚拟 DOM概念， 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不
	仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以
	是各种	GUI。

四、js操作真实dom的代价

用我们传统的开发模式，原生JS或JQ操作DOM时，
浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点
浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。
操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

五、使用虚拟dom的好处

虚拟DOM就是为了解决浏览器性能问题而被设计出来的

每个组件都有虚拟dom，并且虚拟dom都是由render函数创建的