使用虚拟dom的原因

风流意气都作罢 提交于 2020-08-14 11:40:34

一、为什么要使用虚拟dom。

我们来回顾一下前端开发刀耕火种的时代。

①之前的前端开发需要手动操作dom,还要考虑浏览器兼容性等问题,非常的麻烦,后来有了JQuery等库,简化了dom操作,我们也不需要考虑浏览器兼容性等问题,但是随着前端项目的复杂,dom操作也变得复杂,我们既要考虑操作数据,也要考虑操作dom,为了简化dom操作,则出现了各种mvvm框架,

②mvvm框架帮我们解决可视图和状态的同步问题。也就是当数据发生变化自动更新视图,当视图发生变化,自动更新数据。

③在过去,为了简化视图的操作,我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,就是当数据发生变化后,无法获取上一次的状态,只好把界面上的元素删除,然后在重新创建,jquery写的一个列表,当新增删除排序时,添加一个过渡效果,操作时列表会先被删除,然后重建,耗费性能。模板引擎没有解决跟踪状态变化的问题,所以有了虚拟dom,虚拟dom的好处是当状态发生改变时,不需要立即更新dom,只需要创建一个虚拟dom树,来描述dom,虚拟dom内部将弄清楚如何有效的(diff)更新dom,内部会使用diff算法来找到状态的差异,只更新变化的部分。虚拟dom只会更新数据发生变化的dom元素,

④总结:虚拟dom可以维护程序的状态,可以跟踪上一次的状态,我们可以通过对比前后两次状态的差异,来更新真实的dom。

virtual dom github地址:https://github.com/Matt-Esch/virtual-dom

 

二、虚拟dom的作用和虚拟dom库

1.维护视图和状态的关系

2.复杂视图情况下提升渲染性能(简单地视图用虚拟dom就会显得大材小用)

3.除了渲染dom以外,还可实现ssr(nextjs/nuxtjs),原生应用(weex/react native),小程序(mpvue/uniapp)

 

三、服务端渲染的概念

服务端渲染就是把虚拟dom转化为普通的html字符串。因为虚拟dom就是普通的js对象,所以我们可以对它做任意的编程,

 

四、虚拟dom库

1.snabbdom  和   virtual-dom

2.vue2.x内部使用的虚拟dom就是snabbdom。

3.大约200行

4.通过模块可扩展

5.源码使用ts开发

6.最快的虚拟dom之一

7.官宣最快的virtual dom之一

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!