前端三大框架(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);。