2024年最全Vue3 + TypeScript 复盘总结(2)，记一次字节跳动Web前端社招面试

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

background-color: var(–afterBg);

}

它依赖了 afterBg 变量。

如果需要修改它的内容，只需要使用 js 操作 afterBg 的内容即可。

point.value.style.setProperty(“–bg”, colorConfig[props.type].bg);

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

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 则不会产生这个问题。

WebSocket 发生异常无法被 try catch 监听

ws 的异常只能在 onerror 和 onclose 两个事件中进行处理，try catch 是无法捕获的。

有些时候，onerror 和 onclose 会连续执行，比如触发 onerror，导致连接关闭，就会紧接着触发 onclose。

Vue Devtools

vue devtools 目前无法支持 Vue3，但是 vue devtools 几乎是开发中必不可少的工具，目前可以使用 vue devtools beta 版本，但存在一些 Bug。

下载地址：

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?utm_source=chrome-ntp-icon

用法非常简单，安装后重启浏览器就可以。不需要设置 vue.config.devtools = true，在 vue3 中 vue.config 实例不存在 devtools 属性。

ESbuild 安装依赖

在使用 vite 启动服务的同时安装依赖，非常容易碰到一个错误。

Error: EBUSY: resource busy or locked, open ‘E:\gxt\property-relay-fed\node_modules\esbuild\esbuild.exe’

这个问题的原因是 vite 依赖的编译工具 esbuild.exe 被占用所导致的，解决方法很简单，就是停掉 vite，安装完依赖后再重新启动 vite。

Vite 在 Chrome 中调试的问题

系统中有一些移动页面，需要嵌入在 App 中使用。

常见的调试 WebView 的方法有两种，一种简单的方式是使用腾讯开源的 vcosnole，另一种麻烦一些的调试方式是使用 Chrome 的 DevTools。

但是 vconsole 并没有想象中那么好用。

image.png

所以我选择使用 Chrome 调试，chrome://inspect/#devices

但是在调试过程中我发现 Chrome 调试工具里面竟然运行的是 TS 源码，TS 的语法直接被认为语法错误。（我是使用 Vite 启动的开发服务。）

解决方案很简单，但挺 Low。先使用 vite build 把 TS 代码编译成 JS，再使用 vite preview 启动服务。

WebSocket

---

websocket 和 Vue3 没什么关系，但是在这里简单提一下。

设备管理系统的核心概念是设备，设备会有很多属性，在硬件上也被称作数据点。这些属性会经历非常长的链路传输到用户界面上。整体流程大概是：硬件通过 tcp 协议上传到接入网关，接入网关处理后再通过 mqtt 协议上传到物联网平台，物联网平台再经过规则引擎处理，通过 webhook restful 的形式发送到业务系统，业务系统再通过 websocket 推送到前端。

虽然数据通过层层编解码、不同的协议绕了非常远的距离呈现到用户面前，但是前端只需要关心 websocket 就足够了。

WebSocket 重连

在做重连时，需要注意 onerror 和 onclose 连续执行的问题，通常是使用类似防抖的方法来解决。

我的做法是增加一个变量来控制重连次数。

let connecting = false; // 断开连接后，先触发 onerror，再触发 onclose，主要用于防止重复触发

conn();

function conn() {

connecting = false;

if (ctx.state.stateWS.instance && ctx.state.stateWS.instance.close) {

ctx.state.stateWS.instance.close();

}

const url = ctx.state.stateWS.url + “?Authorization=” + getAuthtication();

ctx.state.stateWS.instance = new WebSocket(url);

ctx.state.stateWS.instance.onopen = () => {

ctx.commit(ActionType.SUCCESS);

};

ctx.state.stateWS.instance.onclose = () => {

if (connecting) return;

ctx.commit(ActionType.CLOSE);

setTimeout(() => {

conn();

}, 10 * 1000);

connecting = true;

};

ctx.state.stateWS.instance.onerror = () => {

if (connecting) return;

ctx.commit(ActionType.ERROR);

setTimeout(() => {

conn();

}, 10 * 1000);

connecting = true;

};

ctx.state.stateWS.instance.onmessage = function (

this: WebSocket,

ev: MessageEvent

) {

// logic

} catch (e) {

console.log(“e:”, e);

}

};

}

WebSocket 连接活动日志

系统是设计成 7*24 小时不间断运行。所以 websocket 很容易受到一些网络因素或者其它因素的影响发生断开，重连是一项非常重要的功能，同时还应该具备重连日志功能。

在用户的不同环境中，排查 WebSocket 的连接状态很麻烦，添加一个连接日志功能是比较不错的方案，这样可以很好的看到不同时间的连接情况。

image.png

需要注意，这些日志是存储在用户的浏览器内存中的，需要设置上限，到达上限要自动清除早期日志。

WebSocket 鉴权

websocket 的鉴权是很多人容易忽视的一个点。

我在系统设计中，restful API 的鉴权是通过在 request header 上附带 Authorization 字段，设置生成的 JWT 来实现的。

websocket 无法设置 header，但是可以设置 query，实现思路类似 restful 的认证设计。

关于 ws 鉴权的过期、续期、权限等问题，和 restful 保持一致即可。

script setup：更加清爽的 API

---

script setup 至今仍是一个实验性特性，但它确实非常清爽。

单文件组件的 setup 常规用法像下面这样：

使用 script setup 后，代码变成了下面这样：

在 sciprt 标签中的顶层变量、函数都会 return 出去。

在这种模式下，减少了大量代码，可以提高开发效率、降低心智负担。

但这时也存在几个问题，比如在 script setup 中怎么使用生命周期和 watch/computed 函数？怎么使用组件？怎么获取 props 和 context？

使用组件

直接导入组件后，vue 会自动识别，无需使用 component 挂载。

使用生命周期和监听计算函数

和标准写法基本无差异。

使用 props 和 context

由于 setup 被提升到 script 标签上了，自然也就没办法接收 props 和 context 这两个参数。

所以 vue 提供了 defineProps、defineEmit、useContext 函数。

defineProps

defineProps 的用法和 OptionsAPI 中的 props 用法几乎一致。

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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