2024年大厂Web前端面经，Vue3 + TypeScript 复盘总结，前端开发两年

API 的变化

---

Vue3 中组件如何修改自身的 props？

有一种不是很常见的情况，需要组件修改父组件传递给自己的 Props。

比如抽屉组件、拟态框组件等。

在 vue2 中常见的用法是 sync 和 v-model。

vue3 中只推荐使用 v-model:xxx=“” 的方式。

比如父组件传递：

子组件：

…

Vue3 中 watch 用法的变化

watch 变得更加简单。

import { watch } from “vue”;

watch(source, (currentValue, oldValue) => {

// logic

});

当 source 变化时自动执行 watch 第二个参数所传入的函数。

Vue3 中 computed 用法的变化

computed 也变得更加简单。

import { computed } from “vue”

const v = computed(() => {

return x

});

computed 返回的变量是一个响应式对象。

Vue3 中组件循环自身的技巧

这是一种开发组件的技巧。

假设你有一个不确定深度的树状结构数据。

{

“label”: “root”,

“children”: [

{

“label”: “a”,

“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 中，我设计了一个数据结构用于存储模块（业务概念）