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

偏执的太偏执、 2023-06-30 02:25 32阅读 0赞

#### 指令 ####

*  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);`。