Vue面试2

1.跨域问题以及如何解决跨域

跨域问题（Cross-Origin Resource Sharing, CORS）是指在浏览器中，当一个资源试图从一个不同的源请求另一个资源时所遇到的限制。这种限制是浏览器为了保护用户安全而实施的一种同源策略（Same-origin policy）。同源指的是协议、域名以及端口号三者都相同。如果这三者中的任何一个不同，那么它们就被认为是不同的源。

解决方案

解决跨域问题的方法有几种：

  • CORS配置：最直接的方式是在服务器端设置适当的CORS头。例如，在Express.js应用中可以通过安装并使用cors中间件来快速实现。

const express = require('express');
const cors = require('cors');
const app = express();app.use(cors());app.get('/data', (req, res) => {res.json({message: 'This is CORS-enabled for all origins!'});
});app.listen(8080, () => console.log('Server running on port 8080'));

  • JSONP：这是一种较老的技术，仅支持GET请求。它的工作原理是动态创建一个<script>标签，并将跨域请求的URL指定为该标签的src属性值。服务器端需要返回一段JavaScript代码，这段代码调用一个客户端预先定义好的回调函数，并以参数的形式传递请求结果。由于现代浏览器支持CORS，这种方法现在较少使用。

  • 使用代理：可以设置一个代理服务器，前端向这个代理服务器发送请求，代理服务器再向目标服务器转发请求并将响应返回给前端。这样就不存在跨域问题了，因为请求都是在同一源内发生的。

在开发环境中，可以通过配置Vue CLI提供的vue.config.js文件来设置代理，以解决开发时的跨域问题。这将使得开发服务器能够转发请求到指定的目标服务器，从而避免了浏览器的同源策略限制。

module.exports = {devServer: {proxy: {'/api': {target: 'http://your-backend-server.com', // 目标服务器地址changeOrigin: true,pathRewrite: {'^/api': ''  // 重写路径，去掉/api前缀}}}}
}

在这个例子中，所有以/api开头的请求都会被代理到target指定的服务器上 。

2.Vue2中的过滤器

在Vue.js中，过滤器（Filters）主要用于对文本进行格式化操作。虽然从Vue 3开始，官方已经移除了过滤器这一特性，推荐使用计算属性（Computed Properties）或方法（Methods）来替代它们，但在Vue 2中，过滤器仍然是一个有效的功能，尤其是在需要对文本进行简单转换而不修改原始数据的情况下。

本质上，过滤器是定义为函数的形式，接受一个值作为输入参数，然后返回一个新的值。这个过程不会修改原始值，而是基于原始值创建一个新的值用于显示或其他用途。

使用场景
  1. 日期格式化：将ISO格式的日期字符串转换为更易读的形式。
  2. 货币格式化：显示金额时添加货币符号、千位分隔符等。
  3. 大小写转换：如将文本全部转换为大写或小写。
  4. 数字处理：例如，限制小数点后的位数。
  5. 国际化：根据用户语言设置显示不同语言的内容。
实现做法

定义全局过滤器

可以在main.js中定义全局过滤器，这样所有组件都可以使用这些过滤器：

Vue.filter('capitalize', function(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);
});Vue.filter('currency', function(value) {if (typeof value !== "number") {return value;}var formatter = new Intl.NumberFormat('en-US', {style: 'currency',currency: 'USD',});return formatter.format(value);
});

定义局部过滤器

也可以在单个组件内定义过滤器，仅该组件可以使用：

export default {// ...filters: {capitalize(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);},currency(value) {if (typeof value !== "number") {return value;}var formatter = new Intl.NumberFormat('en-US', {style: 'currency',currency: 'USD',});return formatter.format(value);}}
}
在模板中使用过滤器

一旦定义了过滤器，就可以在模板中使用管道符号|应用过滤器：

<p>{{ message | capitalize }}</p>
<p>{{ amount | currency }}</p>

3.什么是虚拟dom，如何实现虚拟dom

什么是虚拟DOM？

虚拟DOM（Virtual DOM）是一种编程概念，它指的是在Web应用中，使用JavaScript对象来模拟真实的DOM树。每个虚拟DOM节点对应着真实DOM树中的一个元素。通过这种方式，可以有效地减少直接操作真实DOM的次数，从而提高性能。

虚拟DOM的主要目的是优化用户界面的更新过程。当数据模型发生变化时，不是立即更新真实DOM，而是先更新虚拟DOM。然后通过比较新旧两个虚拟DOM树的差异（这个过程称为Diff算法），找出需要更新的部分，并将这些变化批量地应用到真实DOM上。这样做的好处是可以最小化重绘和回流，提高渲染效率。

如何实现？

①创建虚拟dom：

function createElement(type, props = {}, ...children) {return { type, props, children };
}

②渲染虚拟dom为真实dom：

function render(vnode){...return node
}

③使用diff算法最小化更新

④更新真实dom

4.Vue权限管理

在 Vue 项目中实现权限管理是一个常见的需求，通常涉及路由权限、按钮权限和接口权限的控制。

①路由权限控制

核心思路是 动态管理路由 和 全局权限校验

路由权限是指根据用户角色或权限动态加载可访问的路由。

实现步骤：

  • 定义路由表：

将路由分为公共路由（所有用户可访问）和权限路由（根据用户角色动态加载）。

// publicRoutes.js
export const publicRoutes = [{ path: '/login', component: () => import('@/views/Login.vue') },{ path: '/404', component: () => import('@/views/404.vue') },
];// privateRoutes.js
export const privateRoutes = [{ path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { role: 'admin' } },{ path: '/user', component: () => import('@/views/User.vue'), meta: { role: 'user' } },
];
  • 动态添加路由：

根据用户角色从后端获取权限列表，动态添加路由。

import { publicRoutes, privateRoutes } from './routes';
import router from './router';const addRoutes = (role) => {const allowedRoutes = privateRoutes.filter(route => route.meta.role === role);allowedRoutes.forEach(route => router.addRoute(route));
};// 登录成功后调用
addRoutes('admin');
  • 路由守卫：

使用 beforeEach 钩子检查用户是否有权限访问目标路由。

router.beforeEach((to, from, next) => {const userRole = localStorage.getItem('userRole'); // 从本地存储获取用户角色if (to.meta.role && to.meta.role !== userRole) {next('/404'); // 无权限则跳转到 404} else {next();}
});
②按钮权限控制

按钮权限是指根据用户角色或权限动态显示或隐藏页面中的按钮。

实现步骤：

  • 自定义指令：

创建一个自定义指令 v-permission，用于控制按钮的显示和隐藏。

// main.js
Vue.directive('permission', {inserted(el, binding, vnode) {const userRole = localStorage.getItem('userRole');if (binding.value !== userRole) {el.parentNode.removeChild(el); // 无权限则移除按钮}},
});
  • 使用指令：

在按钮上使用 v-permission 指令。

<template><button v-permission="'admin'">管理员按钮</button><button v-permission="'user'">普通用户按钮</button>
</template>
③接口权限控制

接口权限是指根据用户角色或权限控制用户能否调用某些接口。

实现步骤：

  • 后端控制：

    • 后端接口根据用户角色返回不同的数据或状态码（如 403 无权限）。

  • 前端拦截：

    • 在请求拦截器中检查用户权限。

axios.interceptors.request.use((config) => {const userRole = localStorage.getItem('userRole');if (config.url === '/admin/data' && userRole !== 'admin') {return Promise.reject(new Error('无权限访问'));}return config;
});
④权限管理的完整流程

  1. 用户登录：

    • 用户登录后，后端返回用户角色和权限列表。

    • 前端将角色和权限信息存储在 localStorage 或 Vuex 中。

  2. 动态路由加载：

    • 根据用户角色动态加载路由。

  3. 路由守卫：

    • 在路由跳转时检查用户权限。

  4. 按钮权限：

    • 使用自定义指令控制按钮的显示和隐藏。

  5. 接口权限：

    • 在请求拦截器中检查用户权限。

5.SPA首屏加载优化

一、代码优化：减少主包体积

1. 代码分割（Code Splitting）

  • 使用 Webpack 的 SplitChunksPlugin 或 Vite 的自动分割，将代码拆分成多个小块。

2. 路由懒加载

  • 结合动态导入（import()）实现按需加载路由组件。

3. Tree Shaking

  • 移除未使用的代码（仅对 ESM 模块有效）。
  • 注意：确保项目使用 ES6 模块语法，并在 package.json 中设置 "sideEffects": false。

4. 压缩代码

  • 使用 TerserPlugin 压缩 JS，CssMinimizerPlugin 压缩 CSS。
二、资源优化：减少传输体积

1. 图片压缩与格式优化

  • 使用 WebP 格式替代 PNG/JPG（体积减少 30%~70%）。
  • 工具推荐：
    • Squoosh（在线压缩）
    • ImageMagick（批量处理）
    • vue-lazyload（图片懒加载）

2. 字体文件优化

  • 使用 font-display: swap; 避免字体加载阻塞渲染。
  • 按需加载字体子集（通过 Google Fonts Subset）。

3. 开启 Gzip/Brotli 压缩

  • 服务器配置 Gzip 或 Brotli（比 Gzip 压缩率高 20%）。
三、缓存策略：减少重复加载

1. 强缓存（Cache-Control）

  • 对静态资源（JS/CSS/图片）设置长缓存。

2. 版本号哈希

  • 文件名添加哈希（如 app.3a87f.js），确保内容变更后缓存失效。
四、渲染优化：加速首屏展示

1. 服务端渲染（SSR）

  • 使用 Nuxt.js（Vue） 或 Next.js（React） 实现服务端生成 HTML。
  • 优势：直接返回渲染好的 HTML，减少客户端解析时间。

2. 预渲染（Prerendering）

  • 对静态页面（如营销页）在构建时生成 HTML。
  • 工具推荐：vue-cli-plugin-prerender-spa、react-snap。

3. 骨架屏（Skeleton Screen）

  • 在数据加载前展示占位图，提升用户体验。
五、网络层优化：加速资源传输

1.资源预加载（Preload/Prefetch）

  • 使用 <link rel="preload"> 提前加载关键资源。

6.回流和重绘

在前端开发中，回流（Reflow） 和重绘（Repaint） 是浏览器渲染机制的关键概念，直接影响页面性能。以下是详细解析：

一、概念区别

  1. 回流（Reflow）

    • 当元素的尺寸、位置、布局等几何属性发生变化时，浏览器需要重新计算元素的几何信息（布局），并更新渲染树。
    • 触发条件：影响页面布局的操作，例如修改宽高、边距、字体大小、DOM结构变化等。
    • 性能消耗：高，可能导致子元素或父元素的连锁回流。

  2. 重绘（Repaint）

    • 当元素的外观属性（如颜色、背景、透明度等）发生变化，但布局未改变时，浏览器仅重新绘制受影响的部分。
    • 触发条件：不影响布局的样式变化，如 color、background-color、visibility 等。
    • 性能消耗：低于回流，但仍需避免高频触发。
二、优化策略：减少回流和重绘

1. 批量 DOM 操作

  • 使用 DocumentFragment 或离线 DOM
    将多次 DOM 修改合并到临时容器中，再一次性插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const node = document.createElement("div");fragment.appendChild(node);
}
document.body.appendChild(fragment);
  • 隐藏元素后操作

        通过 display: none 隐藏元素，操作完成后再显示

2. 避免频繁读取布局属性

  • 缓存布局信息

3. 使用 CSS 优化

  • 通过 CSS 类合并样式
  • 使用 transform 和 opacity 实现动画
    这些属性由 GPU 加速处理，避免触发回流/重绘

4. 避免表格布局和复杂选择器

  • 表格布局（display: table）易触发连锁回流。
  • 减少 CSS 选择器嵌套层级，降低样式计算复杂度

7.CSS预编语言

CSS 预处理器（CSS Preprocessor）通过扩展 CSS 的功能，提供了更高效、更灵活的样式编写方式。以下是主流 CSS 预处理器（Sass、Less、Stylus）的区别与特点总结。

一、共同特点

  • 变量

    支持定义变量，方便复用和维护样式

$primary-color: #3498db; // Sass
@primary-color: #3498db; // Less
primary-color = #3498db // Stylus
  • 嵌套

        支持嵌套规则，减少代码冗余。

.container {.item {color: red;}
}
  • 混合（Mixins）

        支持定义可复用的样式块。

@mixin border-radius($radius) { // Sassborder-radius: $radius;
}
.box { @include border-radius(10px); }// Less
.alert {font-weight: 700;
}
.highlight(@color: red) {font-size: 1.2em;color: @color;
}
.heads-up {.alert;.highlight(red);
}
  • 导入（Import）

        支持模块化，将样式拆分为多个文件

@import "variables"; // Sass/Less/Stylus
二、对比

三、选择建议
  1. Sass：功能强大，适合复杂项目，推荐使用 .scss 语法。
  2. Less：简单易用，适合小型项目或与 Bootstrap 集成。
  3. Stylus：灵活且功能丰富，适合追求简洁语法的开发者。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/22652.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MongoDB应用设计调优

MongoDB应用设计调优

应用范式设计 什么是范式 数据库范式概念是数据库技术的基本理论&#xff0c;几乎是伴随着数据库软件产品的推出而产生的。在传统关系型数据库领域&#xff0c;应用开发中遵循范式是最基本的要求。但随着互联网行业的发展&#xff0c;NoSQL开始变得非常流行&#xff0c;在许多…
阅读更多...
Mac安装配置Tomcat 8

Mac安装配置Tomcat 8

一、官网下载 Index of /disthttps://archive.apache.org/dist/ 1、进入界面如下&#xff1a; 2、我们找到Tomcat文件夹并进入 3、找到Tomcat 8并打开 4、找到对应的版本打开 5、打开bin 6、找到“apache-tomcat-8.5.99.tar.gz”并下载 二、配置Tomcat 1、解压已经下载好的…
阅读更多...
【论文精读】VLM-AD：通过视觉-语言模型监督实现端到端自动驾驶

【论文精读】VLM-AD：通过视觉-语言模型监督实现端到端自动驾驶

论文地址&#xff1a; VLM-AD: End-to-End Autonomous Driving through Vision-Language Model Supervision 摘要 人类驾驶员依赖常识推理来应对复杂多变的真实世界驾驶场景。现有的端到端&#xff08;E2E&#xff09;自动驾驶&#xff08;AD&#xff09;模型通常被优化以模仿…
阅读更多...
百度搜索，能否将DeepSeek变成“内功”？

百度搜索，能否将DeepSeek变成“内功”？

最近&#xff0c;所有的云平台和主流APP都在努力接入DeepSeek。其中&#xff0c;搜索类APP与搜索引擎更是“战况激烈”。那么问题来了&#xff0c;接入DeepSeek已经变成了标准配置&#xff0c;到底应该如何做出差异化&#xff1f;接入DeepSeek这件事能不能实现11大于2的效果&am…
阅读更多...
Flask实现高效日志记录模块

Flask实现高效日志记录模块

目录 一. 简介&#xff1a; 1. 为什么需要请求日志 二. 日志模块组成 1. 对应日志表创建&#xff08;包含日志记录的关键字段&#xff09; 2. 编写日志记录静态方法 3. 在Flask中捕获请求日志 4. 捕获异常并记录错误日志 5. 编写日志接口数据展示 6. 写入数据展…
阅读更多...
25轻化工程研究生复试面试问题汇总 轻化工程专业知识问题很全！ 轻化工程复试全流程攻略 轻化工程考研复试真题汇总

25轻化工程研究生复试面试问题汇总 轻化工程专业知识问题很全！ 轻化工程复试全流程攻略 轻化工程考研复试真题汇总

轻化工程复试心里没谱&#xff1f;学姐带你玩转面试准备&#xff01; 是不是总觉得老师会问些刁钻问题&#xff1f;别焦虑&#xff01;其实轻化工程复试套路就那些&#xff0c;看完这篇攻略直接掌握复试通关密码&#xff01;文中有重点面试题可直接背~ 目录 一、这些行为赶紧避…
阅读更多...
查看已经安装的Python库，高效管理自己的Python开发环境

查看已经安装的Python库，高效管理自己的Python开发环境

在日常的Python开发中&#xff0c;掌握如何管理和查看已经安装的库是非常重要的。这不仅能帮助你了解当前项目的依赖关系&#xff0c;还能避免出现版本冲突等问题。在这篇文章中&#xff0c;我们将详细介绍查看已安装Python库的方法&#xff0c;并提供一些实用的工具和技巧。 …
阅读更多...
Selenium实战案例1：论文pdf自动下载

Selenium实战案例1：论文pdf自动下载

在上一篇文章中&#xff0c;我们介绍了Selenium的基础用法和一些常见技巧。今天&#xff0c;我们将通过中国科学&#xff1a;信息科学网站内当前目录论文下载这一实战案例来进一步展示Selenium的web自动化流程。 目录 中国科学&#xff1a;信息科学当期目录论文下载 1.网页内…
阅读更多...
Visual Studio Code 2025 安装与高效配置教程

Visual Studio Code 2025 安装与高效配置教程

一、软件简介与下载 1. Visual Studio Code 是什么&#xff1f; Visual Studio Code&#xff08;简称VS Code&#xff09;是微软推出的免费开源代码编辑器&#xff0c;支持 智能代码补全、Git集成、插件扩展 等功能&#xff0c;适用于前端开发、Python、Java等多种编程场景。…
阅读更多...
工业路由器和工业交换机，打造高效稳定的工业网络？

工业路由器和工业交换机，打造高效稳定的工业网络？

工业路由器和工业交换机各有千秋&#xff0c;但如何将它们完美结合&#xff0c;构建稳定高效的工业网络&#xff1f;答案就在这里&#xff01; 工业物联网&#xff08;IIoT&#xff09;是高效、稳定的工业网络成为智慧工厂、工业自动化和远程监控等场景的基础支撑。工业路由器…
阅读更多...
DeepSeek 助力 Vue 开发：打造丝滑的二维码生成（QR Code）

DeepSeek 助力 Vue 开发：打造丝滑的二维码生成（QR Code）

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…
阅读更多...
TSMaster【第七篇：千机百变——面板设计艺术】

TSMaster【第七篇：千机百变——面板设计艺术】

武侠场景导入&#xff1a;唐门暗器阁的启示 江湖传言&#xff0c;唐门暗器之所以独步天下&#xff0c;全凭其「千机匣」中七十二种机关变化。TSMaster面板设计恰似打造暗器机关——控件如同飞镖、机簧、毒针&#xff0c;组合方式不同则威力迥异。昔日某新势力车型因仪表盘刷新…
阅读更多...
提升 AI 服务的稳定性：Higress AI 网关的降级功能介绍

提升 AI 服务的稳定性：Higress AI 网关的降级功能介绍

在使用 LLM 服务时&#xff0c;服务的稳定性和可用性至关重要。然而&#xff0c;由于网络问题、服务器故障或其他不可控因素&#xff0c;LLM 服务可能会暂时不可用。为了保障用户体验和业务连续性&#xff0c;Higress AI 网关提供了强大的模型降级和令牌降级功能。本文将介绍这…
阅读更多...
提升C++项目编译速度

提升C++项目编译速度

目录 一、问题背景 二、代码规范方面的解决方案 2.1 拆分头文件 2.2 拆分巨型类 2.3 使用前置声明 2.4 避免在头文件中包含实现 2.5 避免头文件重复包含 2.6 将常用且变动较少的独立到一个文件 三、代码业务重构方面经验 3.1 使用PIMPL&#xff08;Pointer to Imple…
阅读更多...
【学术投稿-第四届材料工程与应用力学国际学术会议（ICMEAAE 2025】材料工程与应用力学的探讨

【学术投稿-第四届材料工程与应用力学国际学术会议（ICMEAAE 2025】材料工程与应用力学的探讨

重要信息 官网&#xff1a;www.icmeaae.com 时间&#xff1a;2025年3月7-9日 地点&#xff1a;中国西安 简介 第四届材料工程与应用力学&#xff08;ICMEAAE 2025&#xff09;将于2025年3月7日至9日在中国西安召开。本次会议将重点讨论材料科学、应用力学等领域的最新研究进…
阅读更多...
抓包工具（三）Wireshark代理抓包Java程序的HTTPS请求

抓包工具（三）Wireshark代理抓包Java程序的HTTPS请求

目录 一、需求背景二、操作步骤2.1 jSSLKeyLog 工具下载2.2 jSSLKeyLog工具使用2.3 将sslkeylog导入Wireshark2.4 测试Demo2.5 测试结果1&#xff09;使用工具解密HTTPS前&#xff1a;2&#xff09;实用工具解密HTTPS后&#xff1a; 三、补充&#xff1a;如果出现未解密成功的情…
阅读更多...
[VSCode]彻底卸载和重装,并搭建Java开发环境

[VSCode]彻底卸载和重装,并搭建Java开发环境

VSCode彻底卸载 由于当初是朋友帮忙装的&#xff0c;所以准备卸载,自己装一遍 从控制面板找到 vscode 将其卸载。 此时仅仅是删除了应用软件 删除安装插件 在图示路径中找到 .vscode 文件夹&#xff0c;将其删除&#xff0c;即可彻底清除安装的插件 C:\Users\user\.vscode …
阅读更多...
泛微OA编写后端Rest接口

泛微OA编写后端Rest接口

泛微OA编写后端Rest接口 前言 具体实现 运行结果 注意要点 总结 前言 在泛微E9中&#xff0c;可以通过注解的方式来编写对外的接口&#xff0c;之前的版本都是通过编写servlet类&#xff0c;然后在web.xml文件中将这个类和访问路径进行编辑之后才好在浏览器中通过输入对应…
阅读更多...
041集——封装之：新建图层（CAD—C#二次开发入门）

041集——封装之：新建图层（CAD—C#二次开发入门）

如图所示&#xff1a;增加一个图层“新图层”&#xff0c;颜色为红&#xff08;1&#xff09;&#xff0c;当图层颜色定义为黄&#xff08;2&#xff09;时&#xff0c;直接覆盖之前图层颜色&#xff0c;图层名不变。 代码如下&#xff1a; /// </summary>/// <param …
阅读更多...
Redis存储⑪主从复制_分布式系统解决单点问题

Redis存储⑪主从复制_分布式系统解决单点问题

目录 1. 主从复制的概念 1.1 分布式解决单点问题 1.2 主从复制的特点 2. 模拟配置主从复制 2.1 建立复制 2.2 断开复制 2.3 安全性 2.4 只读 2.5 传输延迟 3. 主从复制的拓扑 3.1 一主一从结构 3.2 一主多从结构 3.3 树形主从结构 4. 主从复制的原理 4.1 复制过…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023