实际上，浏览器页面更多的不只是静态页面的渲染，还包括点击、拖拽等事件操作以及接口请求、数据渲染到页面等动态的交互逻辑，因此我们还常常需要更新页面的内容。
要理解前端框架为什么如此重要，需要先看看在框架出现前，前端开发是如何实现和用户进行交互的。
Jquery 仅是实现一个问答卡片的编辑就需要编写不少的代码，大多数代码内容都是为了拼接 HTML 内容、获取 DOM 节点、操作 DOM 节点。
可见，前端框架提供了便利的数据绑定、界面更新、事件监听等 API，我们不需要再手动更新前端页面的内容、维护一大堆的 HTML 和变量拼接的动态内容了。
使用前端框架对开发效率有很大的提升，同时也在一定程度上避免了代码可读性、可维护性等问题。这也是为什么前端框架这么热门，大家都会使用它来进行开发的原因。
模板引擎
当用户对页面进行操作、页面内容更新，我们需要实现的功能流程包括：
- 监听操作；
- 获取数据变量；
- 使用数据变量拼接成 HTML 模板；
- 将 HTML 内容塞到页面对应的地方；
- 将 HTML 片段内需要监听的点击等事件进行绑定。
可以看到，实现逻辑会比较复杂和烦琐。
如果使用前端框架，我们可以：
- 使用将数据变量绑定到 HTML 模板的方式，来控制展示的内容；
- 配合一些条件判断、条件循环等逻辑，控制交互的具体逻辑；
- 通过改变数据变量，框架会自动更新页面内容。
这样，我们可以快速高效地完成功能开发，代码的可读性和维护性都远胜于纯手工实现。
框架对比
Vue
React
React
《 前端面试宝典之 React 篇 》
Hooks
深入浅出搞定React