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中，过滤器仍然是一个有效的功能，尤其是在需要对文本进行简单转换而不修改原始数据的情况下。

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

使用场景

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

实现做法

定义全局过滤器

可以在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;
});

④权限管理的完整流程

用户登录：
- 用户登录后，后端返回用户角色和权限列表。
- 前端将角色和权限信息存储在 localStorage 或 Vuex 中。
动态路由加载：
- 根据用户角色动态加载路由。
路由守卫：
- 在路由跳转时检查用户权限。
按钮权限：
- 使用自定义指令控制按钮的显示和隐藏。
接口权限：
- 在请求拦截器中检查用户权限。

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） 是浏览器渲染机制的关键概念，直接影响页面性能。以下是详细解析：

一、概念区别

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

二、对比

三、选择建议

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

Vue面试2

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

解决方案

2.Vue2中的过滤器

使用场景

实现做法

在模板中使用过滤器

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

什么是虚拟DOM？

如何实现？

4.Vue权限管理

①路由权限控制

②按钮权限控制

③接口权限控制

④权限管理的完整流程

5.SPA首屏加载优化

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

二、资源优化：减少传输体积

三、缓存策略：减少重复加载

四、渲染优化：加速首屏展示

五、网络层优化：加速资源传输

6.回流和重绘

一、概念区别

二、优化策略：减少回流和重绘

7.CSS预编语言

一、共同特点

二、对比

三、选择建议

相关文章