前端越来越混乱了，当然也可以美其名曰：繁荣。
当新启动一个前端项目，第一件事就是纠结：使用什么框架，重造什么轮子？
那么，希望看完此篇，能够给你一个清晰的认识，或者让你更加地纠结和无所适从 =
本篇拿一注册功能作为样本，使用各种框架去实现功能，从而对比各种方式的优劣。
&div&&input type="text" id="nameIpt"/&&/div&
&div&&input type="text"
id="statusIpt"/&&/div&
&div&&input type="button" value="save" id="saveBtn"/&&/div&
$(function () {
$("#saveBtn").click(function () {
saveToDB($.trim($("#nameIpt").val()), $.trim($("#statusIpt").val()));
function saveToDB() {
//save to db
简单粗暴，用户行为驱动的思考方式，不需要怎么动脑=
&div id="demo"&
&div& &input v-model="name"&&/div&
&div& &input v-model="status"&&/div&
&div& &input
v-on="click:save()" type="button" value="save"&&/div&
var demo = new Vue({
el: '#demo',
methods: {
save: function () {
saveToDB(this.name, this.status);
function saveToDB(name, status) {
vuejs给人以小清新的感觉,有没有同感？
var User = function (name, status) {
this.name =
this.status =
User.prototype={
save:function(name,status){
//save to db
var user = new User();
var RegisterComponent = React.createClass({
displayName: "RegisterComponent",
getInitialState: function () {
onFirstInputChange: function () {
this.setState({name: React.findDOMNode(this.refs.fistInput).value});
onSecInputChange:function(){
this.setState({status: React.findDOMNode(this.refs.secInput).value});
save:function(){
//只有不更改input的时候这个返回true,setState之后就成false
console.log(this.state===user)
//所以使用this.state吧
user.save(this.state.name,this.state.status);
render: function () {
&div&name:
&input type="text" onChange={this.onFirstInputChange}
ref="fistInput" value={this.state.name} /&
&div&status: &input type="text"
onChange={this.onSecInputChange} ref="secInput" value={this.state.status}
&button onClick={this.save}&save&/button&
React.render(&RegisterComponent /&, document.getElementById("RegisterComponentExample"));
突然感觉代码量为什么剧增啊？每次调用setState，react都会重新调用render。
var user = new User();
var rc = new RegisterComponent({
label: "name",
onFirstInputChange: function (value) {
user.name =
label: "status",
onSecInputChange: function (value) {
user.status =
onSave: function () {
user.save();
renderTo: "#rc-ctt"
//你不是要双向绑定吗？我满足你啊=
observer.watch(user, function (prop,value) {
if (prop === "name") {
rc.firstInputValue =
} else if (prop === "status") {
rc.secInputValue =
Angularjs就不写代码了，上面的代码都是看到这张图之后才写的。
ps:这张图的出处找不到了，找到的童鞋告知下，我加上文章链接。
1.jquery依然依靠丰富的dom操作去组合业务逻辑，当业务逻辑复杂的时候，每行代码都会有不知所云的感觉。因为:
第一：业务逻辑和UI更改该混在一起，
第二：UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。
当然第二点从另一方面看也是优点，因为有的时候UI交互逻辑能够更加灵活地嵌入到业务逻辑，这在其他MV*框架中都是比较难处理的。
2.vuejs非常小清新，小清新不代表做不了复杂的东西，比如官方的这个demo就不错：http://vuejs.org/examples/svg.html
3.reactjs代码量最多，因为它既要管理UI逻辑，又要操心dom的渲染。
4.extjs是唯一一个让User和View解耦，通过事件回调去关联起来。也可通过watch去实现双向绑定。
5.angularjs没用过，无感。
记得当年做silverlight、WPF的时候OnPropertyChanged不都是自己管理的吗？全都包起来真的好吗？
就这么多。Posts - 95,
Articles - 0,
Comments - 9935
12:22 by 【当耐特】, ... 阅读,
前端越来越混乱了，当然也可以美其名曰：繁荣。
当新启动一个前端项目，第一件事就是纠结：使用什么框架，重造什么轮子？
那么，希望看完此篇，能够给你一个清晰的认识，或者让你更加地纠结和无所适从 = =！
本篇拿一注册功能作为样本，使用各种框架去实现功能，从而对比各种方式的优劣。
&div&&input type=&text& id=&nameIpt&/&&/div&
&div&&input type=&text&
id=&statusIpt&/&&/div&
&div&&input type=&button& value=&save& id=&saveBtn&/&&/div&
$(function () {
$(&#saveBtn&).click(function () {
saveToDB($.trim($(&#nameIpt&).val()), $.trim($(&#statusIpt&).val()));
function saveToDB() {
//save to db
简单粗暴，用户行为驱动的思考方式，不需要怎么动脑= =！
&div id=&demo&&
&div& &input v-model=&name&&&/div&
&div& &input v-model=&status&&&/div&
&div& &input
v-on=&click:save()& type=&button& value=&save&&&/div&
var demo = new Vue({
el: '#demo',
name: '',
status:''
methods: {
save: function () {
saveToDB(this.name, this.status);
function saveToDB(name, status) {
vuejs给人以小清新的感觉,有没有同感？
var User = function (name, status) {
this.name = name;
this.status = status;
User.prototype={
save:function(name,status){
//save to db
var user = new User();
var RegisterComponent = React.createClass({
displayName: &RegisterComponent&,
getInitialState: function () {
return user;
onFirstInputChange: function () {
this.setState({name: React.findDOMNode(this.refs.fistInput).value});
onSecInputChange:function(){
this.setState({status: React.findDOMNode(this.refs.secInput).value});
save:function(){
//只有不更改input的时候这个返回true,setState之后就成false
console.log(this.state===user)
//所以使用this.state吧
user.save(this.state.name,this.state.status);
render: function () {
&div&name:
&input type=&text& onChange={this.onFirstInputChange}
ref=&fistInput& value={this.state.name} /&
&div&status: &input type=&text&
onChange={this.onSecInputChange} ref=&secInput& value={this.state.status}
&button onClick={this.save}&save&/button&
React.render(&RegisterComponent /&, document.getElementById(&RegisterComponentExample&));
突然感觉代码量为什么剧增啊？每次调用setState，react都会重新调用render。
var user = new User();
var rc = new RegisterComponent({
label: &name&,
onFirstInputChange: function (value) {
user.name = value;
label: &status&,
onSecInputChange: function (value) {
user.status = value;
onSave: function () {
user.save();
renderTo: &#rc-ctt&
//你不是要双向绑定吗？我满足你啊=
observer.watch(user, function (prop,value) {
if (prop === &name&) {
rc.firstInputValue = value;
} else if (prop === &status&) {
rc.secInputValue = value;
Angularjs就不写代码了，上面的代码都是看到这张图之后才写的。
ps:这张图的出处找不到了，找到的童鞋告知下，我加上文章链接。
1.jquery依然依靠丰富的dom操作去组合业务逻辑，当业务逻辑复杂的时候，每行代码都会有不知所云的感觉。因为:
第一：业务逻辑和UI更改该混在一起，
第二：UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。
当然第二点从另一方面看也是优点，因为有的时候UI交互逻辑能够更加灵活地嵌入到业务逻辑，这在其他MV*框架中都是比较难处理的。
2.vuejs非常小清新，小清新不代表做不了复杂的东西，比如官方的这个demo就不错：
3.reactjs代码量最多，因为它既要管理UI逻辑，又要操心dom的渲染。
4.extjs是唯一一个让User和View解耦，通过事件回调去关联起来。也可通过watch去实现双向绑定。
5.angularjs没用过，无感。
记得当年做silverlight、WPF的时候OnPropertyChanged不都是自己管理的吗？全都包起来真的好吗？
就这么多。vue，angular，avalon这三种MVVM框架之间有什么优缺点_百度知道
vue，angular，avalon这三种MVVM框架之间有什么优缺点
提问者采纳
使用Object.define珐亥粹酵诔寂达檄惮漏Properties、 VBScript、 Object.observe，纯事件驱动，兼容IE6，DOM的兼容性处理可与jQuery媲美，体积少 早期的四大MVVM框架，都有大公司引衔： angularjs google出品，思想来自flex，IoC， 脏检测，自定义标签，受限于绑定数
其他类似问题
为您推荐：
营业额的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
前几天刚看了，仅仅是看了 reactjs
，偶尔看到了 vuejs
，都说像 angularjs
，好吧果然就是。
选择 Vue 而不选择 Angular，有下面几个原因，当然不是对每个人都适合：
在 API 与设计两方面上 Vue.js
都比 Angular
简单得多，因此你可以快速地掌握它的全部特性并投入开发。
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js 核心默认不包含路由和 Ajax
功能，并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。
Angular 使用双向绑定，Vue 也支持双向绑定，不过默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
在 Vue.js 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。
Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环 （digest cycle）
可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for
上使用 track-by
有意思的是，Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
玄门非有闭，苦学当自开
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net