2024年前端最全从实际项目出发，告诉你vue3到底香不香，前端开发中常见的一些问题面试专题

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

“children”: [

{

“label”: “a1”,

“children”: []

},

{

“label”: “a2”,

“children”: []

}

]

}

]

}

复制代码

它的类型定义如下：

export interface Menu {

id: string;

label: string;

children: Menu | null;

}

复制代码

你需要实现一种树状组件来渲染它们。这时就需要用到这种技巧。

{ { menu.label }}

@select=“select”

v-for=“item in menu.children”

:key=“item.id”

:menu=“item”

/>

复制代码

组件的 name 可以在自身中直接使用，而不需要在 component 中声明。

一些坑

---

Vuex：慎用 Map

在 Vuex 中，我设计了一个数据结构用于存储模块（业务概念）不同的状态。

type Code = number;

export type ModuleState = Map<Code, StateProperty>;

复制代码

但是我发现一个问题，当我修改 Map 中某一个 value 中的属性时，不会触发 Vuex 的监听。

所以我只好将数据结构修改为对象的形式。

export type ModuleState = { [key in Code]: StateProperty };

复制代码

ts 中索引不可以使用类型别名，但是可以写成下面这样：

type Code = number;

export type ModuleState = { [key in Code]: StateProperty };

复制代码

除此之外，Map 还存在另外一个问题。

当一个 Map 类型的 Proxy 对象作为参数被传递时，是无法使用 get、set、clear 等 Map 方法的，但是 TypeScript 会提示这些方法可用。如果使用了这些方法，会得到一个 Uncaught TypeError。

如果使用 Object 则不会产生这个问题。