前端学习——关于前端框架的思考

2023-12-22 06:51:40

前端框架

我们知道在AngularJS,react,vue等前端框架出现之前,前端开发都是通过js直接操作dom树来实现的,而有了前端框架之后,前端开发基本上不需要在直接操作dom树,相当于在原生html的dom树之间和前端程序员之间添加了一个中介,程序员通过这个中介来操作dom,本身并不操作dom。

而既然多了这么一个“中介”,那么前端程序员想通过框架进行前端开发,那么就要遵守这些框架的规则,比如每个前端框架都有一些自己拥有的特殊的语法或指令。

比如,vue就是通过把vue的实例对象挂载到html的一个dom节点上,然后以此为基础,所有基于vue框架的开发,都是通过这个vue对象来实现对实际dom的操作,而这个节点也被称为vue的根节点。而挂载方式是通过vue对象的#el属性或者$mount函数实现的(基于vue-cli开发的vue项目,挂载操作是在main.js文件中实现的)

当然,前端框架也提供了一大堆对dom进行操作的一些方法和逻辑,比如vue提供的指令,如最常用的v-bind: 数据绑定指令(简写为:),v-on: 事件指令(简写为@)等,还有如循环v-for指令,其有一个key属性,是vue专门用来做diff匹配用的, 可能很多人学vue的时候都会很奇怪为什么使用v-for指令还要指定一个key。

为什么要有前端框架?

那么可以直接使用js操作dom开发,为什么还要有前端框架这个“中介”呢,而且每多加一层就需要更多的时间,导致运行效率更低。

首先是因为使用js开发效率太低,使用js或者jquery开发时,需要写大量的操作dom的js代码,而且看起来很杂乱,很多时候想看明白一个存js开发的前端项目,不但要懂基础的js语法,html语法等,还要有足够的项目经验,否则可能根本就看不懂。

其次,使用了前端框架之后,不但能够增加开发的效率,而且事实上可能没减少运行效率,反而间接提升了运行效率。

因为,如果直接使用js操作dom ,那么所有的dom操作都是真实的,也就是说js每次都是在真实的dom上进行操作,这样浏览器就需要不停的进行dom的解析和渲染。

而使用了前端框架之后,比如vue有虚拟dom的功能,使用vue开发时,涉及到dom操作,这时vue引擎会先生成一个虚拟dom,然后通过虚拟dom和真实dom进行匹配,也就是diff算法,如果dom以存在且数据没有改变,这时就不需要操作这个dom了,而发现真实dom中不存在或不一致的dom时,才会真正的去操作dom,这样就减少了频繁修改dom的问题。

比如,需要实现一个列表展示的功能,如果直接使用js操作,这时就需要自己写一个循环遍历的功能,然后去创建dom节点展示数据,但当你需要在列表中新增一列时,你就需要把旧列表给闪电,然后重新根据数据生成一个新的列表。

但如果使用的是前端框架开发,比如vue,这时vue就会根据新的数据创建一个虚拟列表的dom, 然后把虚拟列表中的dom节点和数据与真实dom节点和数据进行匹配。当新增一列时,虚拟dom发现真实dom中没有这个新增的一列时,这时vue才会操作真实dom直接增加一列dom节点即可,而不用把整个列表dom全部删掉,然后重新生成。

文章来源:https://blog.csdn.net/qq_33453797/article/details/135120642
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。