# react_69

**Repository Path**: w-boyy/react_69

## Basic Information

- **Project Name**: react_69
- **Description**: React 69 期上课笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-04-30
- **Last Updated**: 2024-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Vue01: https://www.processon.com/view/link/61ee7ee80e3e7439ae905fd3

React01: https://www.processon.com/view/link/6203968163768960357bf839

React02: https://www.processon.com/view/link/6204e6ade0b34d01f89ad540

React03: https://www.processon.com/view/link/6207bf7f0e3e7407d1cd2be4

React04: https://www.processon.com/view/link/6208decb0e3e7407d1cdf811

React05: https://www.processon.com/view/link/620c435e5653bb4ec5bae618

React06: https://www.processon.com/view/link/620cd1a16376897c8c76b044

React07: https://www.processon.com/view/link/620e1fdd7d9c0807ec94b181

React08: https://www.processon.com/view/link/6210c604e0b34d5aaa96e13c

## 1. 说一下对 Promise 的理解？

### 是什么

### 怎么用

### 解决了什么问题

### 有没有替代方案

## 2. 说一下你对 REM 的理解？

## 3. 说一下对 Vue3 的了解？

## 4. setup 只能返回一个对象吗？

## 5. 说一下你对 Composition API 的理解？

## 6. 为什么 Vue3 把响应式的 API 从 Object.defineProperty 换成 Proxy？

## 7. 项目基本情况

```text
1. 需求评估会议 => 前端、后端、测试、运维、设计师

2. 老大领到任务 => 拆分需求到每个人

3. 前端 => 根据设计师提供的设计稿 => 切图

4. 前端 => 和后端进行对接接口

5. 测试（自测、提测） => 老大负责打包上线的工作
```

## 8. 介绍一下最近的一个项目？

项目背景、项目模块/功能、技术栈、我负责的模块，难点和亮点（不一定写到简历里面，但是心里要有准备）！

## 9. Git 工作流

我们项目经理会开三个分支

master => 主分支，打包上线

release => 测试分支

develop => 开发分支

一般开发的时候，我们会把 develop 拉过来，基于 develop 开一个自己的功能分支，例如我要开发【用户界面】这个功能

首先保证处于 develop，git checkout -b feature/user，然后在自己的功能分支上面写代码，写完了之后，git add . / git commit -m 信息

切换到 develop，再此分支上合并 feature/user，git merge feature/user，最后 git push origin develop

<font color=e32d40>**一般公司里面托管代码会用开源的 Gitlab 这个平台自己进行搭建**</font>

## 10. 接口是怎么查看的？

- 后端提供的 Markdown 文件（不推荐）
- YAPI（通过线上地址，后端提供的，可以实时查看）
- 上面两种方式都不好，例如不方便测试，还要通过代码或 PostMan，公司里面用的最多的是 SwaggerUI（后端使用的部署接口的一个框架）

## 11. 重点

1、Vue 基础，每天案例不看文档也能敲出来

2、第一个 Vue 后台项目（大事件），能参考文档敲出来，理解每一步的业务逻辑

3、人资常见的解决方案要清楚（问的时候能清晰的说出来，做的时候能参考文档做出来）

4、React 基础前 8 天是重点（即便不做 React：面试 + 万一公司用了 React 你也能快速上手）

5、面试题（100 + JS（95） / HTML 和 CSS（5））

## 12. 请求的封装

request.js => 请求函数、api/user.js => 接口请求、调用 api/user.js => 调用具体的接口请求

封装了哪些东西：创建请求实例（axios.create({})）、baseURL、timeout、请求拦截器（统一携带 token、token 过期的主动处理、统一的请求进度展示）、响应拦截器（token 过期的处理、统一错误处理）、transformResponse...

## 13. websocket（服务端主动向前端推送数据）

## 14. 权限

路由级别的权限：

用户登录成功后，后端返回当前用户的标识，前端拿到标识之后，根据此标识筛选出有权限的路由，做了 2 件事情：

1. 通过 addRoutes（注意新版本废弃了，换成了 addRoute） 把有权限的路由添加到路由实例，结果：就可以通过地址栏进行访问啦。
2. 存储到 Vuex，结果/目的：给侧边栏去使用。

但是通过 addRoutes 后续添加的路由，不能直接通过 router 实例获取到了，所以如果侧边栏需要用到动态路由数据去渲染的话那该怎么做呢？解决方式：上面的 2。

功能级别的权限：

封装了一个全局的方法/指令/过滤器，这个方法只做 1 件事情，接收一个参数，看一看这个参数在不在后端返回的功能列表里面，在就返回 true，不在就返回 false，哪个地方用，哪个地方调用这个方法，根据这个方法的返回结果对功能级别的按钮做显示/隐藏或禁用/启用的操作就好啦。

```js
<button v-if="permission('user_del')">删除</button>
```

## 15. 和 Vue 相关的性能优化的手段你考虑过哪些

v-if 和 v-show 区分使用场景。

v-for 加 key。

Vue2 中，v-for 和 v-if 不要放到一行，因为 v-for 的优先级高？那为什么优先级高就不能放到一起了呀？

```js
<li v-for="item in 8" v-if="item===3"></li>
```

computed 和 watch 区分使用场景，computed 和 方法优先使用 computed。

路由懒加载、组件异步加载、动态组件（<component :is="a"></component>）

使用 Webpack 的 externals （忽略包）配合 CDN （加载忽略的那个线上资源）进行资源优化

CDN（内容分发网络） => 七牛 CDN

...

## 16. 测试阶段出现 Bug 的修复流程是什么？

假如在 release 分支测试发现了一个 Bug

首先测试人员会把这个 Bug 记录禅道（项目管理平台）这个平台上面，并指派给我，上面记录了这个 Bug 的重现步骤

我收到 Bug 之后，根据重现步骤看是否可以重现，然后进行修复，此时我会基于 release 开一个修复 Bug 的分支

假如叫 hot/fix，今后在此分支上面进行修复，修复完毕自测没有问题，把代码合并到 release 分支

最后在禅道上面标记已解决，测试那边会收到通知，测试人员进行复测，没有问题的话就会把 Bug 给关闭掉。

## 17. 你们每天的进度是如何汇报/跟踪的

我们公司用的是禅道，每天下班的时候会填写一下自己的进度。

## 18. HTTP 状态码

301（永久重定向）、302（临时重定向）

400：请求参数错误

401：由于 Token 过期需要认证

403：没有权限，服务器拒绝

404

405：请求方式错误

500

## 19. 大数字问题

后端返回的数据都是 JSON 格式的字符串，'{"id": 88888888888888888888888888, "content": "ddfsdf"}'

真正使用的时候咱都是直接使用的对象

为什么后端命名返回的是 JSON 格式的字符串，我却可以当做对象去使用呢？

因为数据返回过来的时候会经过 axios 的内部处理，它会进行 JSON.parse 的操作

但是！当 JSON 格式的字符串当中包含了大数字的时候，JSON.parse 就搞不定了，转换就会出问题

解决有 2 种办法，第一种办法：不要让 axios 内部处理，而是自己手动处理（json-bigint）

```json
import jsonBigInt from 'json-bigint'
axios.create({
    transformResponse: [function (data) {
    	// data => JSON 格式的字符串
    	return jsonBigInt.parse(data);
  }]
})
```

第二种办法！找后端，ID 不要用数字表示，换成字符串！

## 20. 分页

pagenum

pagesize

query

## 21. 跨域

CORS => 后端通过设置响应头来允许某些域名访问，Access-Control-Allow-Origin

代理

禅道：统计每个员工下班填写项目的进度；测试人员能通过此平台提 Bug；

接口：SwaggerUI

难点

## 22. 移动端布局

百分比 => Flex => REM => VW/VH

## 23. 原型图是怎么交付的

墨刀：能看到产品需求流程

## 24. Less

嵌套、计算、变量、混入（Mixin）、继承、循环、函数

## 25. 发请求

beforeCreated => 

created => 时机越早越好；有的时候发请求需要依赖 data 里面的数据和 methods 里面的方法；

mounted => 

## 26. 说一下你对 Vue3 的了解

性能 => Proxy => Diff 算法进行了优化

Composition API => 更好用了，开发大型项目更加易于组织和复用代码

TS

新特性 => Fragment、Teleport

API => reactive、ref、toRef、toRefs

## 27. Symbol

有一种数据类型是 Symbol

Symbol()，

有一个大对象 obj 是后端返回的，里面有好多好多 key，这时候我要往里面加一条自己的数据
let a = Symbol()

obj[a] = 'xxx'
obj[a]

## 28.  CSRF、XSS

XSS => 跨站脚本攻击 => 转义！

CSRF => 跨站请求伪造！=> 验证码

## 29. JS 执行机制

Event Loop / 事件环 / 事件循环 / JS 执行机制

1. JS 代码的执行分为同步代码/任务和异步代码/任务
2. 当碰到同步代码时直接在执行栈中执行
3. 当碰到异步代码并且时机符合时（例如定时器时间到了），就把异步代码添加到任务队列当中
4. **当执行栈中的同步代码执行完毕后**，就去任务队列当中把异步代码取过来添加到执行栈中执行
5. 这种反复去任务队列轮训异步代码并添加到执行栈中执行的操作就是 Event Loop

## 30. 工资要高点没坏处

1. 人家会不会不要我，即便真的是因为你要的高了，hr 也会打电话给你沟通
2. 进去之后拿这么高的工资把我开了怎么办？
3. 那么1万5 的活是不是比1万2让我干的活难啊？
4. 十个人找完工作，拿到 Offer 的第一感觉，就是哎呀工资要低了。