vue和angular对比

664 阅读2分钟

相同点:

vue和angular都属于前端js框架,都实现了数据与页面模板的分离,都实现了数据与页面的双向绑定,都包含v-for(ng-repeat),v-if(ng-if)等常用的条件渲染指令,都集成了路由、过滤器、动画等实用功能,都有许多插件可以使用(例如axios)。

不同点:

1,框架设计理念不同,vue属于MVVM设计模式,而ng侧重于MVC模式。vue倡导的是组件化开发,而ng提出的是模块化开发(一个模块中包含n个指令,n个过滤器,n个服务)。

2,数据绑定的原理不同: vue中使用Object.defineProperty把组件中data中所有属性在组件对象上实现一个set,get方法类型的属性,然后在set方法中插入界面修改的代码,当我们修改组件的数据属性时,set方法就会调用,从而修改界面。

ng中使用 $watchers记录模板中所有绑定数据的地方(上次的值,绑定表达式,修改函数),当作用域中的数据被修改时,会触发$digist方法(如果不是使用angular自带指令修改则需要手动调用$digist),会对所有的$watcher进行脏检查,如果发现不同则会进行替换。 相比之下,vue的数据绑定效率更高,而ng的数据绑定兼容性更强。

3,数据管理方式不同,ng中采用类似js中的作用域管理数据,子作用域中可以直接访问父作用域中的数据。而vue中组件之间是相互独立的,数据也是相互独立的,采用单向数据流传递数据,父组件可以传值给子组件,子组件通过$emit发射时间给父组件传值。这点上ng的数据管理方式比vue好用,但是vue可以使用第三方库vuex来实现状态管理,很大程度上方便了数据管理。

4,业务逻辑管理方式不同,vue中组件的方法写在methods中,而ng中方法作为服务写在模块中,ng的依赖注入机制可以提高服务的可重用性,这点比vue中的extend混入机制好用。ng中在controller中初始化数据,而vue在mounted或created中初始化数据。

5,代码结构不同,vue中可以采用.vue单文件组件开发,组件的template模板、css样式、js代码都在同一个文件中,一个文件就是一个组件,而ng中习惯用把一部分指令、控制器、服务等封装在一个模块中,若干个模块再封装成一个大模块,虽然ng中也可以使用单文件模板,但是这点显然还是vue的单文件组件更好用。

6,生态环境:angular是一个成熟的,稳定的框架,其生态环境已经形成(ionic等),而vue则是一个年轻的框架,生态环境并不十分成熟,但是近些年也在快速发展。