长沙企业网站制作服务报价,广州房地产最新消息,网站开发和游戏开发哪个难,网站制作现在赚钱么前端框架
我们知道在AngularJS#xff0c;react#xff0c;vue等前端框架出现之前#xff0c;前端开发都是通过js直接操作dom树来实现的#xff0c;而有了前端框架之后#xff0c;前端开发基本上不需要在直接操作dom树#xff0c;相当于在原生html的dom树之间和前端程序…前端框架
我们知道在AngularJSreactvue等前端框架出现之前前端开发都是通过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全部删掉然后重新生成。
