虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom，然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方2 换成AST的是Vue模板，Vue需要根据模版去处理。

key值的使用其实是和vue响应式已经虚拟DOM有关， 那么我们通过下面的例子来了解一下 例子数据 页面渲染 但是数据发生了变化，如果数据是这一种变化的话， 那么index没什么问题 数据前后变化的结果 这样vue就会分析到 其他的。

虚拟DOM是什么 比如说我们要操作一个数据报表，大概有几百条数据，要对其进行排序的操作，若使用原生JS来操作，对DOM元素进行一个排序操作起来很麻烦，也很难实现 于是就有了MVVM的框架，比如VUE，react框架，实现。

本篇文章主要介绍了浅谈vue，angular，react数据双向绑定原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考一起跟随小编过来看看吧传统做法前端维护状态，手动操作DOM更新视图前端框架对服务器数据通过模版进行渲染。

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面而隐藏在背后的原理便是其高效的Diff算法1 两个相同的。

执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到原因分析猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取解决方法使用VuenextTick，看下官方材料。

nodeOps 属性封装了操作原生 Dom 的一些方法的集合，如创建插入移除这些，再使用到的地方再详解modules 属性创建真实 Dom 也需要生成它的如 class attrs style 等属性 modules 是一个数组集合，数组的每。

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿 当更新完成后，执行updated，数据已经更改完成，dom也重新。

侦测状态变化，重新渲染页面拉通知状态改变，然后暴力比对哪些节点需要重新渲染 Angular脏检查React虚拟dom 推明确知道哪些状态改变，细粒度，通知绑定这个状态的依赖节点更新 Vue 但，粒度越细，每个状态绑定的依赖。