一、为什么要使用虚拟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之一
来源:oschina
链接:https://my.oschina.net/u/4446873/blog/4413149