Vue.js实例方法

虚拟DOM简介

虚拟DOM是什么？

Vue通过简历一个虚拟DOM树对真实DOM发生的变化保持追踪

真实DOM树：解析CSS样式和DOM树，将其合成一颗渲染树，再通过布局算法计算每个节点在浏览器中的位置，最终输出到显示器上

虚拟DOM：保存了一颗DOM树被渲染签所包含的所有信息，这些信息可以通过对象的形式一直保存在内存中，并通过JS的操作进行维护

虚拟DOM处理变化的DOM节点的过程：

• 通过树的形式保存旧的DOM节点信息，这些信息可能在页面第一次加载时被渲染到浏览器中，但仍通过虚拟DOM创建
• 检测到数据更新，需要更新DOM，现在JS中将需要修改的节点全部修改完
• 将最终生成的虚拟DOM更新到视图中去

这样只需要进行一次DOM交互，避免了多次DOM交互

另外，为了避免不必要的DOM操作，在虚拟DOM映射到视图的过程中，会将虚拟节点与上一次渲染所用的旧节点进行对比，找出需要更新的节点来进行DOM操作，避免操作无需改动的DOM

简言之，虚拟DOM做两件事：1.提供与真实DOM节点相对应的虚拟节点VNode。将虚拟节点VNode与旧虚拟节点oldVnode做对比，如果有不同，更改不同就可以

为什么要使用虚拟DOM？

浏览器显示网页的过程

1.解析标签，生成元素树(DOM树)

2.解析样式，生成样式树

3.生成元素与样式的关系

4.生成元素的显示坐标

5.显示页面

若修改真实的元素，就需要重复一次次地进行上述过程

如果使用虚拟DOM，虚拟DOM存储在内存中，对每个元素的修改是在虚拟DOM中进行，修改完之后有差异只需更新一次即可

虚拟DOM的优点如下:

• 保证性能下限：虽然框架的虚拟DOM需要适配上层API导致性能并非最优；但是比起粗暴的DOM操作性能要好很多
• 无需手动操作DOM：只需要编写好View-Model的代码逻辑，框架会根据虚拟DOM和数据双向绑定，以可预期的方式更新视图，极大提高开发效率
• 跨平台，虚拟DOM本质上是JS对象，而DOM与平台强相关，虚拟DOM可以更方便地跨平台操作：服务端渲染、weex开发等

虚拟DOM的diff算法

两个核心函数

• patch(container,vnode):初次渲染的时候，将虚拟DOM渲染成真正的DOM，然后插入到容器里

  function createElement(vnode){
      var tag = vnode.tag;
      var attrs = vnode.attrs||{}
      var children = vnode.children||[]
      if(!tag){
          return null
      }
      //创建真实的DOM元素
      var vm = document.createElement(tag);
      //属性
      var attrName
      for(attrName in attrs){
          if(attrs.hasOwnProperty(attrName)){
              vm.setAttribute(attrName,attrs[attrName])
          }
      }
      children.forEach(function(childVnode){
          //给vm添加子元素，如果还有子节点，则递归地生成子节点
          vm.appendChild(createElement(childVnode))
      })
      //返回真实的DOM元素
      return vm
  }

未完待续…