Vue面试2

news2025/2/22 12:50:43

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) { // Sass
  border-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.coloradmin.cn/o/2303420.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

合合信息2025届春季校园招聘全面启动！

合合信息2025届春季校园招聘全面启动！

世界因你而AI&#xff0c;合合信息2025届春季校园招聘启动&#xff01; 我们是谁&#xff1f; 我们是一家行业领先的人工智能及大数据科技企业 18年深耕AI领域&#xff0c;C端产品与B端服务布局矩阵完善 9.4亿全球累计用户首次下载量&#x1f4a5; 来到这里你能得到什么&a…
阅读更多...
shiro代码层面追踪

shiro代码层面追踪

文章目录 环境漏洞分析硬编码 反序列化Gadget构造 环境 环境搭建&#xff1a;https://blog.csdn.net/qq_44769520/article/details/123476443 漏洞分析 硬编码 shiro是对rememberMe这个cookie进⾏反序列化的时候出现了问题。 相应代码 // // Source code recreated from …
阅读更多...
虚拟机网络ssh连接失败，没有网络

虚拟机网络ssh连接失败，没有网络

vscode进行ssh时连接失败&#xff0c;发现是虚拟机没有网络。 虚拟机ping不通www.baidu.com但可以ping通内网 ping 8.8.8.8ping不通。 sudo dhclient -r ens33 sudo dhclient ens33 ip route show可以了。 20250221记录&#xff1a;不知道是不是重启了虚拟机还是咋了&#…
阅读更多...
已知点矩阵的三个顶点坐标、行列数和行列的间距，计算得出剩余所有点的坐标

已知点矩阵的三个顶点坐标、行列数和行列的间距，计算得出剩余所有点的坐标

已知点矩阵的三个顶点坐标、行列数和行列的间距&#xff0c;计算得出剩余所有点的坐标 计算矩阵中每个点的坐标代码实现案例图调用验证 计算矩阵中每个点的坐标 给定左上角、左下角和右上角三个点的坐标&#xff0c;以及矩阵的行数、列数、行间距和列间距&#xff0c;我们可以…
阅读更多...
go 并发 gorouting chan channel select Mutex sync.One

go 并发 gorouting chan channel select Mutex sync.One

goroutine // head&#xff1a; 前缀 index&#xff1a;是一个int的指针 func print(head string, index *int) {for i : 0; i < 5; i {// 指针对应的int *indexfmt.Println(*index, head, i)// 暂停1stime.Sleep(1 * time.Second)} }/* Go 允许使用 go 语句开启一个新的运…
阅读更多...
深度学习入门--python入门2

深度学习入门--python入门2

以前学的全忘了&#xff0c;现在算是才开始学&#xff0c;有错误&#xff0c;恳请指正。 目录 1.4 Python脚本文件 1.4.1保存为文件 1.4.2 类 1.5 Numpy 1.5.1 导入Numpy 1.5.2 生成Numpy数组 1.5.3 Numpy的算术运算 1.5.4 Numpy的N维数组 1.5.5 广播 1.5.6 访问元素…
阅读更多...
题海拾贝：【枚举】P2010 [NOIP 2016 普及组] 回文日期

题海拾贝：【枚举】P2010 [NOIP 2016 普及组] 回文日期

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《编程之路》、《数据结构与算法之美》、《题海拾贝》 欢迎点赞&#xff0c;关注&#xff01; 1、题…
阅读更多...
Mac端homebrew安装配置

Mac端homebrew安装配置

拷打了一下午o3-mini-high&#xff0c;不如这位博主的超强帖子&#xff0c;10分钟结束战斗 跟随该文章即可&#xff0c;2025/2/19亲测可行 mac 安装HomeBrew(100%成功)_mac安装homebrew-CSDN博客文章浏览阅读10w次&#xff0c;点赞258次&#xff0c;收藏837次。一直觉得自己写…
阅读更多...
Python高级语法之selenium

Python高级语法之selenium

目录&#xff1a; 1、selenium的使用2、selenium元素定位3、selenium使用功能Phantomjs模拟浏览器启动4、selenium使用功能ChromsHandless模拟浏览器启动 1、selenium的使用 2、selenium元素定位 3、selenium使用功能Phantomjs模拟浏览器启动 4、selenium使用功能ChromsHandles…
阅读更多...
2025年3月最新算法-鲸鱼迁徙优化算法Whale Migration Algorithm-附Matlab免费代码

2025年3月最新算法-鲸鱼迁徙优化算法Whale Migration Algorithm-附Matlab免费代码

引言 本期介绍了一种基于座头鲸协同迁移行为的创新生物启发式优化方法——鲸鱼迁徙优化算法Whale Migration Algorithm&#xff0c;WMA。该算法于2025年3月最新发表在期刊 Results in Engineering 在本节中&#xff0c;我们概述了开发鲸鱼迁移算法&#xff08;WMA&#xff09;…
阅读更多...
flowable适配达梦数据库

flowable适配达梦数据库

文章目录 适配相关问题无法从数据库产品名称“DM DBMS”中推断数据库类型分析解决 构建ibatis SqlSessionFactory时出错&#xff1a;inStream参数为null分析解决 liquibase相关问题问题一&#xff1a;不支持的数据库 Error executing SQL call current_schema: 无法解析的成员访…
阅读更多...
Jenkins整合Jmeter实现接口自动化测试

Jenkins整合Jmeter实现接口自动化测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、安装jmeter 下载&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 这里我用了一台Windows安装jmeter用来写接口测试的脚本&#xff0c;启动前修改j…
阅读更多...
高级推理的多样化推理与验证

高级推理的多样化推理与验证

25年2月来自波士顿大学、NotBadMath.AI、谷歌、哥伦比亚大学、MIT、Intuit公司和斯坦福大学的论文“Diverse Inference and Verification for Advanced Reasoning”。 OpenAI o1、o3 和 DeepSeek R1 等推理 LLM 在数学和编码方面取得重大进展&#xff0c;但仍发现 IMO 组合问题…
阅读更多...
清华大学：DeepSeek与AI幻觉（31页PDF）

清华大学：DeepSeek与AI幻觉（31页PDF）

PDF深入探讨了AI幻觉的概念、原因、评测方法及其实用应用&#xff0c;特别是在金融领域的具体案例。首先介绍了AI幻觉的定义&#xff0c;主要包括数据偏差、泛化困境、知识固化和意图误解四种情况&#xff0c;以及这些因素导致AI产出不合理结果的原因。随后&#xff0c;通过音乐…
阅读更多...
AWS云从业者认证题库 AWS Cloud Practitioner（2.21）

AWS云从业者认证题库 AWS Cloud Practitioner（2.21）

题库持续更新&#xff0c;上方二维码查看完整题库&#xff01; 公司希望减少开发人员用于运行代码的物理计算资源,通过启用无服务器架构&#xff0c;哪种服务可以满足该需求? A&#xff1a; Amazon Elastic Compute Cloud (Amazon EC2) B&#xff1a; AWS Lambda C&#xff1a…
阅读更多...
网络工程师 （43）IP数据报

网络工程师 （43）IP数据报

前言 IP数据报是互联网传输控制协议&#xff08;Internet Protocol&#xff0c;IP&#xff09;的数据报格式&#xff0c;由首部和数据两部分组成。 一、首部 IP数据报的首部是控制部分&#xff0c;包含了数据报传输和处理所需的各种信息。首部可以分为固定部分和可变部分。 固定…
阅读更多...
京准电钟：水利控制系统网络时间同步设计与应用

京准电钟：水利控制系统网络时间同步设计与应用

京准电钟&#xff1a;水利控制系统网络时间同步设计与应用 京准电钟&#xff1a;水利控制系统网络时间同步设计与应用 引言 在水利工程中&#xff0c;控制系统的高效运行依赖于精准的时间同步。水电站、泵站、闸门控制、水文监测等子系统的协同作业需要毫秒甚至微秒级的时间…
阅读更多...
QML 实现一个动态的启动界面

QML 实现一个动态的启动界面

QML 实现一个动态的启动界面 一、效果查看二、源码分享三、所用到的资源下载 一、效果查看 二、源码分享 工程结构 main.qml import QtQuick import QtQuick.Controls import QtQuick.Dialogs import Qt.labs.platformWindow {id:windowwidth: 640height: 400visible: truetit…
阅读更多...
【论文阅读】SAM-CP：将SAM与组合提示结合起来的多功能分割

【论文阅读】SAM-CP：将SAM与组合提示结合起来的多功能分割

导言 近年来&#xff0c;视觉基础模型的快速发展推动了多模态理解的进步&#xff0c;尤其是在图像分割任务中。例如&#xff0c;Segment Anything模型&#xff08;SAM&#xff09;在图像Mask分割上表现出色&#xff0c;但在语义及实例分割方面仍存在局限。本文提出的SAM-CP&am…
阅读更多...
逻辑架构与软件架构在PREEvision中的设计关系

逻辑架构与软件架构在PREEvision中的设计关系

1 Introduction 在如今汽车电子系统的开发过程中&#xff0c;系统架构设计是至关重要的环节。无论是汽车控制系统、信息娱乐系统&#xff0c;还是电动驱动系统&#xff0c;架构设计都决定了整个系统的功能、性能以及后期的可维护性和可扩展性。 在往期文章中&#xff0c;我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023