前端入门到弃坑-为什么要使用虚拟dom

主要分为两个角度

1.DOM操作角度。假设状态发生变化，我们如何将状态的更新应用到视图上？
直接创建元素，然后将元素覆盖到我们需要更新的地方，这样做固然很快捷，但是会引发页面出现很大的变动，渲染引擎需要重新计算和渲染，这样的开销很大

更聪明的办法是找出那些需要更新的节点，然后只更新那些发生变动的节点，这样导致DOM操作减少，虽然会耗费一点时间用于计算哪些节点需要更新，但是这样的时空置换是远远值得的

2.vue数据侦测角度，由于Vue1.0绑定状态是页面的中dom节点，如果绑定的节点过多，那么在依赖收集和通知依赖造成的开销，还有内存存储造成的开销是较大的

所以为了减少这方面的开销，vue2.0将依赖收集的粒度提升了，变成中粒度的组件，依赖收集和通知的基本单位变成了组件，大大的减少开销了。

在组件级别中使用虚拟DOM，使用虚拟DOM的前提有两点，首先要获取到Vue组件的模板，模板就是写的HTML代码。

获取模板的意义是为了找出我们使用的状态，但是模板不能直接使用，将要变成虚拟DOM能够处理的单元，需要使用渲染函数，通过渲染函数变成虚拟DOM节点

生成的新的虚拟DOM节点和旧虚拟DOM节点进行patch运算，找出需要重新渲染的节点然后添加到视图中去。
 

更聪明的办法是找出那些需要更新的节点，然后只更新那些发生变动的节点，这样导致DOM操作减少，虽然会耗费一点时间用于计算哪些节点需要更新，但是这样的时空置换是远远值得的

2.vue数据侦测角度，由于Vue1.0绑定状态是页面的中dom节点，如果绑定的节点过多，那么在依赖收集和通知依赖造成的开销，还有内存存储造成的开销是较大的

所以为了减少这方面的开销，vue2.0将依赖收集的粒度提升了，变成中粒度的组件，依赖收集和通知的基本单位变成了组件，大大的减少开销了。

在组件级别中使用虚拟DOM，使用虚拟DOM的前提有两点，首先要获取到Vue组件的模板，模板就是写的HTML代码。

版权声明：本文为CSDN博主「sdKdqweas」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/economics3/article/details/123898308