Vue.js 中的 V-DOM 和 diff 算法

1. 为什么要使用 VDOM （虚拟DOM）

大量的DOM操作会大量增加时间消耗，性能的消耗。
而数据的操作，时间和性能的消耗就很少
因此我们应该先进行数据操作，在进行DOM操作
因此我们 引入了虚拟DOM

2. 虚拟dom（vdom)是什么？

它是一个Object对象模型，用来模拟真实的DOM节点的结构

<!-- 这是一个真实DOM -->
	<div class = "box">
        <ul>
          <li> 这里是1903 </li>
        </ul>
      </div>
<!-- 这是它相应的虚拟DOM 的写法 -->
     var vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: "这里是1903",
          ]
        }
      ]
    }
<!-- 但是这样写会很麻烦,所以在Vue中我们使用 jsx语法 + render函数（jsx = js+ XML)。
jsx语法可以在js中使用标签，render函数对jsx语法进行解析和渲染-->

3. 虚拟dom的使用基本流程

1. jsx = js+ XML可以在js中使用标签，
2. 然后通过 render函数 进行解析成 VDOM 结构
3. 最后通多 render函数，将 VDOM 渲染 成真实DOM

4.diff算法是什么？

• diff算法来自后端
  vue中将 虚拟dom的diff算法放在了 patch.js文件中
  使用js来进行两个对象的比较（ vdom 对象模型）
• 当文件发生变化时，就用上了 diff算法
• 当文件发生变化的时候，diff算法 就会比较新旧两个文件的差别，并将两个文件的不同之处生成一个补丁对象（patch）。
• diff算法 是比较同级的。
  给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）
• 根据key 将补丁（patch）对象渲染都页面中改变的结构上，而其他地方不变（不做重新渲染）这是虚拟DOM的惰性原则。

总结：

• 其实说了这么多，都是不需要我们做的，都是有Vue帮我们做的。
• 当我们实例 Vue 时，使用 " el = ‘#id’ "引入模块的时候 Vue 帮我们做的。
• " el = ‘#id’ " 做了什么呢？
  • 将选择的元素引入到js中，相当于在js中放入DOM模块。也就是 jsx语法。
  • 然后就是 render函数表现的时候了。