Vue核心-虚拟DOM详解

Vue 核心-虚拟DOM

前言

# 前言	
    Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。
    
# 问题: 
    什么是Virtual DOM？
    为什么需要Virtual DOM？
    它是通过什么方式去提升页面渲染效率的呢？

模板转换成视图的过程

# 模板转换成视图的过程
	在正式介绍 Virtual Dom之前，我们有必要先了解下模板转换成视图的过程整个过程（如下图）：
    
        1. Vue.js通过编译将template 模板转换成渲染函数(render) 

        2. 执行渲染函数就可以得到一个虚拟节点树vnode

        3. 在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象
           Watcher 对象会调用对应的 update 来修改视图
           这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行DOM操作来更新视图
        
	简单点讲，在Vue的底层实现上，Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统，在状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应到DOM操作上。

# 我们先对上图几个概念加以解释
	1. 渲染函数
    	渲染函数是用来生成Virtual DOM的。
        Vue推荐使用模板来构建我们的应用界面，在底层实现中Vue会将模板编译成渲染函数
        当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。
        
	2. VNode 虚拟节点
    	它可以代表一个真实的 dom 节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。
        简单地说，vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。
        
	3. patch(也叫做patching算法)
    	虚拟DOM最核心的部分，它可以将vnode渲染成真实的DOM
        这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的的节点进行更新。
        这点我们从单词含义就可以看出， patch本身就有补丁、修补的意思
        其实