前端三大主流框架的区别（二）

指令

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