为什么要使用虚拟DOM?
2022-09-04 本文已影响0人
小李不小
为什么要使用虚拟DOM
主要分为两个角度
1.DOM操作角度。假设状态发生变化,我们如何将状态的更新应用到视图上?
直接创建元素,然后将元素覆盖到我们需要更新的地方,这样做固然很快捷,但是会引发页面出现很大的变动,渲染引擎需要重新计算和渲染,这样的开销很大
更聪明的办法是找出那些需要更新的节点,然后只更新那些发生变动的节点,这样导致DOM操作减少,虽然会耗费一点时间用于计算哪些节点需要更新,但是这样的时空置换是远远值得的
2.vue数据侦测角度,由于Vue1.0绑定状态是页面的中dom节点,如果绑定的节点过多,那么在依赖收集和通知依赖造成的开销,还有内存存储造成的开销是较大的
所以为了减少这方面的开销,vue2.0将依赖收集的粒度提升了,变成中粒度的组件,依赖收集和通知的基本单位变成了组件,大大的减少开销了。
在组件级别中使用虚拟DOM,使用虚拟DOM的前提有两点,首先要获取到Vue组件的模板,模板就是写的HTML代码。
获取模板的意义是为了找出我们使用的状态,但是模板不能直接使用,将要变成虚拟DOM能够处理的单元,需要使用渲染函数,通过渲染函数变成虚拟DOM节点
生成的新的虚拟DOM节点和旧虚拟DOM节点进行patch运算,找出需要重新渲染的节点然后添加到视图中去。
![](https://img.haomeiwen.com/i16629650/5467c48d1ce735b0.png)