当前位置：首页 > news >正文

2025前端面试题

news 来源：原创 2025/6/18 20:15:41

Vue 3 比 Vue 2 更快的原因

Vue 3 使用 JavaScript 的 Proxy 替代了 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 可以拦截对象的所有操作，无需像 Object.defineProperty 那样单独定义每个属性的 getter 和 setter
Vue 3 还引入了静态树提升（Static Tree Hoisting）等技术，Vue 3 的编译器会对组件模板进行静态分析，识别出哪些部分是静态的（即在组件生命周期内不会改变的部分），例如纯文本节点或只依赖于常量的节点。这意味着静态节点在组件初始化时只会被创建一次，并在后续渲染中直接复用。

Vue 3 比 Vue 2 更小的原因

Tree-shaking自动移除未使用的代码
Vue 3 对源代码进行了优化，代码压缩等

git fetch和pull的区别

git fetch

功能：git fetch 用于从远程仓库获取最新的数据，但它不会自动合并这些数据到当前分支。它只是将远程分支的最新状态下载到本地的远程分支引用中（例如 origin/master）。
结果：本地的工作区和当前分支不会发生变化，只是更新了本地的远程分支引用。
适用场景：当你只想查看远程仓库的最新状态，而不希望立即合并到当前分支时，git fetch 是一个很好的选择。它可以帮助你了解远程仓库的最新情况，而不会影响你的本地工作。

git pull

功能：git pull 是 git fetch 和 git merge 的组合命令。它首先从远程仓库获取最新的数据，然后自动将这些数据合并到当前分支。
结果：本地的工作区和当前分支会直接更新，包含远程仓库的最新更改。
适用场景：当你希望直接将远程仓库的最新更改合并到当前分支时，git pull 是一个便捷的命令。它适合在你确定需要更新当前分支的情况下使用。

vue做管理系统，怎么管理权限路由

// src/router/index.js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach(async (to, from, next) => {
  if (!store.state.dynamicRoutes.length) {
    await store.dispatch('generateRoutes');// 获取该角色拥有权限的路由
    store.state.dynamicRoutes.forEach(route => {
      router.addRoute(route);
    });
    return next({ ...to, replace: true }); // 重定向以确保动态路由生效
  }
  next();
});

export default router;

canvas有哪些api

HTML5 Canvas 提供了丰富的 API，用于在网页上绘制图形、图像、文本等内容。以下是 Canvas 的主要 API 分类及其功能：

1. 基本操作

创建 Canvas 元素：通过 <canvas> 标签定义一个绘图区域。
```
<canvas id="myCanvas" width="200" height="100"></canvas>
```

获取绘图上下文：通过 getContext 方法获取 2D 或 WebGL 上下文。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

2. 绘制基本形状

矩形：
- fillRect(x, y, width, height)：绘制填充矩形。
- strokeRect(x, y, width, height)：绘制矩形边框。
- clearRect(x, y, width, height)：清除指定区域的内容。
圆形：
- arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧。
路径：
- beginPath()：开始一个新的路径。
- moveTo(x, y)：将路径的起点移动到指定位置。
- lineTo(x, y)：绘制一条直线到指定位置。
- stroke()：绘制路径的边框。
- fill()：填充路径。

3. 绘制文本

fillText(text, x, y)：填充文本。
strokeText(text, x, y)：绘制文本边框。
font：设置文本的字体样式。

ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello, Canvas!", 50, 50);

4. 绘制图像

drawImage(image, x, y)：绘制图像。
drawImage(image, x, y, width, height)：绘制并缩放图像。

const img = new Image();
img.src = "example.jpg";
img.onload = function() {
    ctx.drawImage(img, 50, 50, 200, 200);
};

5. 变换与动画

变换：
- translate(x, y)：平移画布。
- rotate(angle)：旋转画布。
- scale(x, y)：缩放画布。
动画：通过 requestAnimationFrame 方法实现动画效果。

let x = 50;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    x += 1;
    requestAnimationFrame(animate);
}
animate();

6. 样式与颜色

fillStyle：设置填充颜色或渐变。
strokeStyle：设置边框颜色或渐变。
lineWidth：设置线条宽度。
lineCap：设置线条端点样式（butt、round、square）。
lineJoin：设置线条连接点样式（bevel、round、miter）。

7. 渐变与阴影

渐变：
- createLinearGradient(x0, y0, x1, y1)：创建线性渐变。
- createRadialGradient(x0, y0, r0, x1, y1, r1)：创建径向渐变。
阴影：
- shadowColor：设置阴影颜色。
- shadowOffsetX：设置阴影水平偏移。
- shadowOffsetY：设置阴影垂直偏移。
- shadowBlur：设置阴影模糊程度。

http连接的工作原理

1.浏览器解析网址，提取出目标服务器的域名和端口号（默认端口为 80）。
2.浏览器通过 DNS 解析域名，获取服务器的 IP 地址。
3.浏览器建立一个 TCP 连接到服务器的指定端口。
4.一旦 TCP 连接建立，浏览器会发送一个 HTTP 请求（如GET / HTTP/1.1）。
5.服务器接收到请求后，处理并返回 HTTP 响应。
6.浏览器解析响应内容并展示给用户。

tcp和udp的区别

TCP连接的建立需要三次握手，释放连接需要四次挥手，这使得TCP在连接建立和释放时有一定的开销。
由于没有连接建立和释放的过程，UDP的开销较小，适合对实时性要求较高的应用。
TCP保证数据按照发送的顺序到达接收端。
UDP不保证数据包的顺序，接收端可能会收到乱序的数据包。
TCP适合传输大量数据，因为它能够保证数据的完整性和顺序性。
UDP适合传输小数据量，因为它不需要进行复杂的可靠性控制。
UDP适合对实时性要求高的应用：如视频流（如在线视频、视频会议）、音频流（如网络电话）、在线游戏等。这些应用对数据的实时性要求较高，即使丢失少量数据包也不会对用户体验造成太大影响。
TCP：
提供流量控制和拥塞控制：TCP通过滑动窗口机制进行流量控制，以避免发送方发送过多数据导致接收方缓冲区溢出。同时，TCP还通过拥塞控制算法（如慢启动、拥塞避免、拥塞窗口等）来避免网络拥塞。
UDP：
不提供流量控制和拥塞控制：UDP不进行流量控制和拥塞控制，因此在网络拥塞时可能会导致大量数据包丢失。