将你的项目从Angular迁移至Vue需要注意什么？

发表于 更新于 分类于 阅读次数：
本文字数： 2.7k 阅读时长 ≈ 2 分钟

如果你是一名前端开发工程师

且正在尝试将你的项目从 Angular迁移至 Vue

那么本篇文章可以帮你少踩一些坑

介绍

因为公司项目需要 TS 语言的支持

在开发项目时使用的是 Vue Class Component 写法，如下：

在本篇中涉及到的语法大部分都是基于此，请知悉

LifeCycle

钩子AngularVue
构造函数constructor()created()
初始化ngOnInit()mounted()
视图渲染完成ngAfterViewInit()mounted()【存疑】

Class

Angular：

1
2
// 在 ts 文件中
export class HelloComponent implements OnInit{}

Vue：

1
2
// 在 vue 文件的 `<script>` 标签中
export default class HelloComponent extends Vue{}

Service

1. 导入导出

Angular：

1
2
3
@Injectable()
export class ModelOperationService {
}

Vue：

1
2
3
import {HttpRequestService} from '@/apis/http-service';
export default class ModelOperationService extends HttpRequestService {
}

2.注入

Angular：

1
2
3
// 在 Angular 中是有构造函数的概念的，而一些服务是直接在构造函数中注入的
public constructor(private translateService: TranslateService) {
}

Vue：

1
2
3
4
5
// 在 Vue 中是没有构造函数的概念的，所以直接在导出的 class 中直接实例化即可
private userService = new UserService();
// 同时多个组件使用同一个服务时，需要注意是否采用单例模式，例如用户信息，只需要在登录的时候获取即可
// 这里的SingleFactory是自己封装的单例模式
private userService = SingleFactory.getInstance(UserService);

父子组件

1.输入输出

比较项AngularVue
输入@Input()@Prop()
输出@Output()@Emit()
输入初始值可以通过 = 来直接赋值不可通过 = 直接设置初始值，需要使用 default 项来指明
输出类型事件类型函数，且返回具体的值
仓库Github

2.引入子组件

Angular：

1
2
@ViewChild('tag', { static: false })
public customerTag: CustomerTagComponent;

Vue：

1
2
3
4
5
6
7
8
// 模板
<CustomerTag ref="customerTag"></CustomerTag>
// 逻辑
@Ref('customerTag')
public customerTag: CustomerTag;
或
@Ref('customerTag')
public customerTag: InstanceType<typeof CustomerTag>;

3.获取组件中的元素

Angular：

1
2
3
4
// 通过el来进行获取类名为total的元素
constructor(private el: ElementRef) { }
// 调用
this.el.nativeElement.querySelector('.total');

Vue：

1
2
3
4
5
// 通过ref来获取类名为total的元素
@Ref('total')
public total: HTMLDivElement;
// 调用
this.container;

日期格式化

Angular 中自带了 formatDate 日期格式化

Vue解决方法：

  • moment.js —— vue-moment

  • day.js

  • 自己封装格式化逻辑

对比如下：

比较项Moment.jsDay.jsdate-fns
大小16.7k（重）2.87k（轻）5.76k（轻）
最后更新时间2021.02（停止开发，仅维护）2021.092021.12
优势支持number类型直接转换为时间对象返回新的实例，不可变数据，支持链式操作，API与Moment一致，支持插件模块化加载，适用复杂项目，不可变性和纯粹性
劣势可变对象不支持number类型直接转换不支持全局导入
浏览器兼容FireFox与Safari有异常全浏览器
Tree-shaking不支持不支持支持
模式OOOOFunctional
国际化支持支持支持
TypeScript支持支持支持
LicenseMITMITMIT
文档中文中文外文
仓库GitHubGitHubGitHub

参考链接：

国际化

对比如下：

比较项AngularVue
插件ngx-translatevue-i18n
html内容中使用{{'public' | translate}}{{ $t('public') }}
html标签中使用<span translate='public'></span><span v-t="'public'"></span>
属性中使用<span :title="$t('public')">public</span>
ts/js文件中使用translate.instant('public')this.translate.t('public');