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

前端框架

我们知道在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全部删掉，然后重新生成。