虚拟DOM的理解

什么是虚拟DOM

虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。

为什么要使用虚拟DOM

1. 使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如何操作 DOM，从而提高开发效率。
2. 关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM，如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM之前会通过 Diff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM

vue.js中的虚拟DOM

1. render中的h函数
   h 函数就是 createElement()

const vm = new Vue({ 
               el: '#app', 
               render (h) { 
                const vnode = h( 
                   'h1', 
                   { 
                     attrs: { id: 'title' } 
                    },
                     this.msg 
                )
                console.log(vnode) 
                 return vnode 
                 },
                 data: { 
                  msg: 'Hello Vue'
                 } 
              })