前端三大框架(vue、react、angular)对比（二）

指令

• 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);。