使用web component，React vs Angular vs Vue

React vs Angular vs Vue

VS	React	Angular	Vue	Notes
创建项目	npx create-react-app my-app	ng new my-app	vue create hello-world	angular cli 比react cli好使， angular提供了创建service， components， directive等命令，并且angular支持路由和样式选择，方便开发人员搭建项目文件
文档	React 支持中文文档	Angular也支持中文文档，但是翻译没有react好	Vue文档里面提供了大量的视频学习，支持4种语言
开发者	Facebook	Google	尤雨溪
Weekly download	10,630,289	2,629,896	2,595,955
文件类型	React 是JSX语法	Angular是 Typescript 语法	.vue 文件	React 中css html目前没有分离出js, vue html, js 与style也在同一个文件中， angular html css js是可以分离的
样式	React 中Class不能局部生效	Angular css 可以局部生效	Vue style 可以scope生效，也可以全局生效	Angular 组件样式是局部的，react是全局的
路由	React目前不清楚	Angular 提供了路由守卫功能	vue路由有导航守卫功能	React 路由可以作为普通标签使用，如Link， Router， Switch ， Vue router 也可以作为标签使用，如<router-link> <router-view>
其他	React目前不清楚	Angular 提供了modules的概念， 有services等	Vue 提供了directive， filter等	Angular 提供了ngFor， ngIf等指令，Vue也提供了v-if， v-for等指令，react 没有，react如果想实现类似效果需this.map， if 等代码实现
Reload	React项目刷新后有白板现象，需要额外的代码配置才能解决	Angular 没有问题	Vue 没有问题
项目大小	456.1kb	2.85M	3.61M	相同网站， React- 17.0.2， angular-11.2.11， Vue- 3.1.4
项目加载时间	4550ms	5361ms	2363ms	加载相同网站
项目刷新时间	860ms	573ms	945ms	相同同一个地方

Use web component in react, angular and vue

Diff	React	Angular	Vue	Notes
class	class	class	class	. React 自身组件用className， 而web-component用class
Event	onClick={this.onClick.bind(this)}	(click)=“onClick($event)”	@click=“onSubmit()”
Bind Attribute	user={user}	[user]=“user”	:user=“user”	Angular 中如果属性是动态的，则web component 中必须有setter
custom event	not working	working	wo