前端框架选择VUE的理由

*此文为我公司做前端选型时的关于为什么选择VUE的一些整理,如有认识错误,烦请留言纠正谢谢!

1、在github上截止至7月份的星星数可以看出react领先VUE紧跟其后


2、在 Safari 6.1, OS X 的评测里,Vue.js 的性能直接排到了第一的位置:


3、Vue.js中mini版本的大小只有72k(压缩后为23k),React的大小为132k,angular的大小为144k;

4、公司有人问为什么最终会选择VUE扯皮半天最终最重要的一点就是VUE是中国的,中文文档支持比较好以及为题查找比较好查找。。。

以上三条就让我对vue比较心动,下面在来做一下详细的比较为什么在jQuery,react、vue、以及angular中选择了Vue

 vue VS react

渲染性能

二者都是通过虚拟dom减少对真实doom的操作,但是vue实现的权重要轻的多。所以渲染用户界面的时候,vue的速度会更快一点。
更新性能
在react中,当一个组件的状态发生变化时,它将会引起整个组件的子树都进行重新渲染,从这个组件的根部开始。在Vue中,组件的依赖关系在它的渲染期间被自动跟踪,因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React

规模方面
Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的
React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。

 vue VS angular

相同点:
都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
优势:
在 API 与设计两方面上:Vue.js 都比 Angular 简单得多,因
Angular 使用双向绑定,Vue 也支持双向绑定,不过默认为单向绑定,数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。此你可以快速地掌握它的全部特性并投入开发。

在 Vue.js 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。
Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。

 vue VS jQuery

jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。 
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

举例说明:计算一个按钮被点击的次数,并在屏幕上显示这个数字。

Jquery:
<div id="output"></div> 
<button id="increment">Increment</button>
 var counter = 0; 
$(document).ready(function() 
        var $output = $('#output');
        $('#increment').click(function() {
                     counter++; 
                    $output.html(counter); 
               });
        }); 

Vue
<div id="app"> 
      <div>{{ counter }}</div>
      <button @:click=“increment”>点击</button>
 </div> 
new Vue({ 
        el: '#app',
        data: { counter: 0 }, 
        methods: { increment() {
               this.counter++; 

} }
  });





  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值