Vue原理「十二」-- vdom和diff算法 *****

虚拟DOM(Virtual DOM) *****

vdom是实现vue和React的重要基石
diff算法是vdom中最核心、最关键的部分

1. 背景

DOM操作非常耗费性能
以前用jquery，可以行控制DOM操作的时机，手动调整
vue和React都是 数据驱动视图，如何有效控制DOM操作？

2. 数据驱动视图 解决方案 - vdom

• 有一定复杂度，想减少计算次数比较难
• 能不能把计算更多的转为JS，因为JS执行速度很快
• vdom - 避免频繁操作DOM，用JS模拟 DOM 结构，计算出最小的变更，操作 DOM

3.用JS模拟ODM结构

<div id="div1" class="container">
  <p>vdom</p>
  <ul style="font-size:20px">
    <li>a</li>
  </ul>
</div>
<script>
  var a = {
    tag: 'div',
    props: {
      id: 'div1',
      className: 'container'
    },
    children: [{
      tag: 'p',
      children: 'vdom'
    }, {
      tag: 'ul',
      props: {
        style: 'font-size:20px'
      },
      children:[
        {
          tag: 'div',
          children: 'vdom'
        }
      ]
    }]
  }
</script>

4.通过snabbdom学习vdom

简介强大的vdom库，易学易用
Vue参考它实现的vdom和diff
Vue3.0重写了vdom的代码，优化了性能，但是vdom基本理念不变

snabbdom使用

	var container = document.getElementById('container') //定义容器
	var vnode=h(...) //定义虚拟DDM
	patch(container,vnode) //把虚拟DOM渲染到真实DDM上
	var newVnode=h(...) //定义新虚拟DDM
	patch(vnode,newVnode) //更新DDM
	patch(newVnode,null) //销毁DDM

snabbdom重点：

• h函数: 定义并返回 虚拟DDM-vnode
• patch函数 ：把虚拟DOM渲染到真实DDM上；更新DDM：销毁DDM
• vnode数据结构

5.vdom总结

用JS模拟ODM结构
新旧vnode对比，得出最小更新范围，最后更新DOM （snabbdom使用）
只有这样才能在 数据驱动视图模式下，有效控制DOM操作 （意义）

diff 算法概述 ***

diff即对比，是一个广泛的概念，如linux diff、git diff
两个JS对象也可以做diff
两颗树做diff，如vdom diff

1.树diff 时间负责度是o(n^3)

第一，遍历tree1；第二，遍历tree2
第三，排序
1000个节点，要计算 1亿次，算法不可用

2.优化时间复杂度到o(n)

之比较同一级，不跨级比较
tag不相同，则直接删掉重建，不再深度比较
tag和key两者都相同，则认为是相同节点，不再深度比较

patchVnode（）

3.diff算法总结

patchVnode 逻辑
addVnodes、removeVnodes （使用情况）

updateChildren（key的重要性）
不使用key VS 使用key
不使用key：如果节点顺序变了，节点更新时需要全部删掉，
使用key：可以算出哪个key是相同的，可以直接移动

4.vdom和diff总结

updateChildren的过程不要深究,要知道大概过程
vdom核心概念：
h(传入的什么)
vnode（结构）
patch（作用、参数）
diff（过程、性能优化做了哪些改变、）
key（key的重要性）
vdom 存在的价值更加重要：基于数据驱动视图，控制dom操作