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不进行流量控制和拥塞控制，因此在网络拥塞时可能会导致大量数据包丢失。
