讲到前端的框架，大家想必都能脱口而出：Angular、React、Vue，那么这几个框架的优缺点，以及在项目当中如何抉择框架的使用等等，本篇就将介绍这三大框架的使用感受
双向绑定
开篇就用这三大框架的双向绑定的实现作为一个 demo 引入，通过这三大框架的双向绑定能够简单的了解三大框架在编码上的一些区别以及其的简易程度
Angular：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body ng-app="MyModule"> <div ng-controller="MyCtrl"> <input type="text" ng-model="message"> <h1>{{ message }}</h1> </div> <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script> <script> // 这边使用到的是推断型依赖注入 const MyModule = angular.module("MyModule", []) const MyCtrl = function ($scope) { $scope.message = \'Hello world !!!\' } MyModule.controller(\'MyCtrl\', MyCtrl) </script> </body> </html>
React：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="root"></div> <script src="https://cdn.bootcss.com/react/16.9.0-alpha.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script> <!-- 注意这边的 babel 只能用 5.x 以下版本的 --> <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script> <script type="text/babel"> // 这边使用到的是 JSX 语法，React 内部并没有实现双向绑定，所以这边使用了 input 的 change 事件来实现双向绑定 class Input extends React.Component { constructor(props) { super(props) this.state = { message: \'Hello world !!!\' } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ message: event.target.value }); } render() { var message = this.state.message; return ( <div> <input type = "text" value = { message } onChange = { this.handleChange } /> <h1> { message } </h1> </div> ); } } ReactDOM.render(<Input/>, document.getElementById(\'root\')); </script> </body> </html>
Vue:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="message"> <h1>{{ message }}</h1> </div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script> new Vue({ el: \'#app\', data() { return { message: \'Hello world !!!\' } } }) </script> </body> </html>
实现双向绑定三个框架的不同实现都已经展示出来了，下面我们看看评价一个框架优劣的几个标准：
优点：
1. 减少自己编写代码带来的各种bug；
2. 大大节约考虑功能逻辑、实现方式上的时间，可以更多的把精力放在业务和产品上面；
3. 避免很多自行编写所要出创建的文档说明所导致的别人不易看懂问题；
4. 框架相当于一个较为完美的解决方案，大大节约了时间、人力
5. 缩短开发周期
缺点：
框架的成本太高，一个成熟的框架学习起来需要一定的时间和精力，学习曲线也比较陡峭。
而对于使用者来说需要不断关注其更新和迭代，这又会涉及到项目迁移问题，带来种种麻烦。貌似这一点就快秒杀前面的优点了啊。
再对比一下各自的特点：
React：它最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这个库很有效地完成了它的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序
Angular：对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。
Vue：渐进式构建能力是vue.js最大的优势，vue有一个简洁而且合理的架构，使得它易于理解和构建。
vue有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。
另外，个人认为最重要的一点，评价一个框架除了上面说的内容，还要深入其源码，掌握其思想和实现思路，不同的项目、不同的开发团队对应不同的框架，甚至可以自行封装，这些才是我们评价一个框架优劣的基础，认识，了解，熟悉，掌握，举一反三；
对于开发者来说，我们使用框架的时候可以多分析原生的代码，并尝试自己封装一些类似的库，更要时刻跟上框架的更新；
而对于管理者来说，特点列表只是决定的一方面，有时候并不是越多越好。
挑战你自己活着你的团队使用一个整体的框架，但是首先，列出对你和你的组织重要的列表，尤其是那些技术之外特点。
最后：以上是本人在阅读了一些网上同行的见解之后，有感而发，同时也希望这边文章能帮到你的同时还能启发你去思考。
谢谢您留下的赞！