前端三大主流框架的区别(二)
指令
- vue 中有指令的概念,vue中指令是以
v-
开头,常用的指令有:v-if
v-for
v-on 简写: @
v-bind
简写 :v-show
等 - react 中没有指令的概念。比如遍历直接在jsx中使用map,判断用if等原生js的方法
- angular 中的指令,比如:
*ngIf
*ngFor
*ngSwitchCase
模板语法
vue 采用双花括号{{}}
绑定数据
react 采用单花括号{}
绑定数据
angular 采用双花括号{{}}
绑定数据
组件
vue 中使用Vue.component
定义或者直接在项目中一般使用以.vue结尾的单文件组件。一个文件包括三部分:<template></template> 、<script></script>、<style></style>
,组件的定义是以new Vue()构造函数的形式创建的。
react react中一切皆为js,定义组件可以以构造函数(无状态组件)或者ES6的类形式(状态组件)创建组件,可以以.js或者.jsx结尾的文件中创建。
angular 中的组件是以.html、css、js三个文件共同来组成的,使用@Component
装饰器来组合。组件的创建形式是通过命令构建自动生成基于TypeScript的类生成的组件。
生命周期函数
vue
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
beforeCreate
react
constructor
componentWillMount
render
componentDidMount
componentWillReceivePorps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
angular
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
数据状态
vue 可以直接更改data中的数据,data return一个对象。例如:this.currentPage = 1
react 在类的构造函数中this.state={}
或者直接写成类的属性state={}
,更改状态数据使用:this.setState({comment: 'Hello'})
;,该方法为异步更新。
angular 中可以和react一样,在构造函数中定义数组状态,也可以直接定义为累的属性,和构造函数平级,一般放到构造函数上面:todolist: any[] = [];
,修改数据的时候和vue类似,直接修改即可,例如:this.todolist.splice(index, 1);
。
文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。
原文链接:jiangwenxin.blog.csdn.net/article/details/108018434
![](https://res.hc-cdn.com/ecology/9.3.128/v2_resources\images\global\blog-dialog.png)
华为开发者空间发布
让每位开发者拥有一台云主机
- 点赞
- 收藏
- 关注作者
评论(0)