前端三大主流框架的区别(二)

简介: 前端三大主流框架的区别(二)

指令

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


目录
相关文章
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
41 0
|
1天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
11 2
|
1天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
8 1
|
15天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
1月前
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
|
1月前
|
开发框架 前端开发 JavaScript
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
89 1
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
|
1月前
|
开发框架 前端开发 JavaScript
未来趋势:前端开发框架的革新与发展
随着技术的不断进步和市场需求的变化,前端开发框架也在不断革新和发展。本文将探讨当前前端开发框架的最新趋势,并展望未来可能的发展方向。
|
1月前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
1月前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)
|
1月前
|
开发框架 前端开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(二)
探索前端开发框架:React、Angular 和 Vue 的对决(二)