虚拟DOM 和真实DOM的区别

1： 虚拟 dom： 

 虚拟DOM 和真实DOM 的区别:  虚拟dom 是将真实数据抽取出来， 以对象的形式模拟树形结构， 比如：dom 是这样的。

 真实dom

<div>
  <p>123</p>
</div>

对应的虚拟dom： (伪代码)
var Vnode = {
  tag: "div",
  children: {
    {tag: 'p', text: '123'}
  }
}

dom 是很慢的。 如果我们把一个简单的div 元素的属性都打印出来。 真实的dom 元素是非常庞大的， 这是因为标准就是这么设计的。

 不仅是vue 中， react 中在执行列表渲染的时候也会要求每一个组件添加key 这个属性。

所谓虚拟dom 的诞生， 是我们可以不直接操作DOM：只想操作数据便可以重新渲染页面， 而隐藏在背后的原理便是高效的diff 算法，它的核心基于两个简单的假设：

1： 两个相同的组件产生类似DOM结构， 不同的组件产生不同的DOM 结构；

2：  同一层级的一组节点， 他们可以通过唯一的id 进行区分

需要使用： key 来给每一个节点作唯一的标识， diff 算法就可以正确的识别此节点， 找到正确的位置区域新的节点。

 有 keys值和无keys 值的区别。

 

所以一句话， key 的值主要作用是为了高效更新虚拟DOM， 另外vue 在使用相同标签名过度切换时， 也会使用到key值。 其目的也是为了让vue 可以区分它们， 否则 vue 只会替换其内部属性而不会触发过度效果。   key值一定是唯一的。

3： lodash.min.js 文件   <scritp src="lodas.mins"> </script>  一个第三方插件。

input 输入框中输入内容：  输入input 内容 修改数据： 就会计算DOM, 更新虚拟DOM ,. 更新真实DOM.   加上唯一的key值。 在哪里修改就会更新哪里， 效率更高。