为什么要使用前端框架来构建页面

因为提高开发效率，对于企业来说，时间就是效率，效率就是钱。在没有前端框架之前，我们前端需要经常的操作DOM元素；在项目中，vue能够简化DOM操作，让程序员根本不用操作任何DOM元素，就能渲染页面。

一、要使用前端框架来构建页面的原因

因为提高开发效率，对于企业来说，时间就是效率，效率就是钱。

• 在没有前端框架之前，我们前端需要经常的操作DOM元素；
• 在项目中，vue能够简化DOM操作，让程序员根本不用操作任何DOM元素，就能渲染 页面；
• 企业中，使用框架，能够提高开发的效率；
• 提高开发效率的发展历程：原生JS -> Jquery之类的类库-> 前端模板引擎->Angular.js/Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
• 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
• 增强自己就业时候的竞争力
  • 基础
  • JS基本功，JS高级，PHP，Jquery，H5C3+移动Web
  • 提高
  • Nodejs，前端三大框架，React-Native（使用前端的技术HTML+CSS+JS，去开发手机App）

延伸阅读：

二、前端框架到底解决了什么问题

框架其实就解决了一个问题——使用声明式语法，描述组件对象的嵌套关系，并自动生成与dom对象的对应关系。

自己敲过框架轮子的人一定明白我在说什么——你在自己写框架的时候，最难处理的不是数据驱动，observable库有的是，也不是事件监听，那玩意儿jquery已经做的很好了，更不是模板语法，谁还写不出个模板转render的函数？真正有点麻烦的问题是：

• dom对象以及他们的从属（同时是传递关系）关系，是通过html自动生成的，然而当你把“组件”抽象为js对象，你怎么能实现子组件的自动创建，自动销毁，自动数据传递，自动render，自动事件监听（不一定是dom事件）？
• 怎么把js组件对象存在它应该在的地方（我的标题图截得是preact源码解决这个问题的部分，preact的子组件实例，是存在dom节点上的），并且rerender的时候能把js组件对象和dom节点对应起来？
• 什么时候需要new，什么时候复用原来的组件？
• 组件重渲染之后，怎么commit到dom上？

这套机制，才是前端框架真正替你省力的“脏活”，因为不如此，你的组件根本集成不起来，“组件化开发”、“数据驱动”也就无从谈起。至于框架对外提供的那些特性和语法糖，其实都见仁见智，有人喜欢有人不喜欢。但是我前面说的那些脏活，才是一个框架之所以是一个框架的理由。

关于这套机制，类angular框架和类react框架分别讲了两个故事——

• angular讲的故事是“模板编译为能精细感知model变化事件的dom-commiter”。
• react讲的故事是“model怎么变不重要，我只要model当前状态，我有办法给你patch到dom上”。

表面上看起来是很不一样的，但是本质上都是做同一件事——你在模板里面也好，jsx里面也好，使用组件时写的的都是组件的类型，然而实际render的时候，框架帮你自动创建了组件实例。第二次render的时候，框架又帮你做了两件事，名列前茅件事是，帮你找到应被复用的组件实例，指挥他重新render一遍，第二件事是，帮你把render的结果commit到正确dom节点上。