前端面试篇（2）视频面试回答者：小gpt 1.自我介绍 2.就项目经验里面的后台管理系统问了一些问题：后台管理系统你觉

天合富家视频面试回答者：小gpt 1.自我介绍

2.就项目经验里面的后台管理系统问了一些问题：后台管理系统你觉得开发的项目里面最复杂的是哪一个，复杂在哪里

在我开发的后台管理系统项目中，最复杂的是[项目名称或描述]。这个项目的复杂性主要体现在以下几个方面：

复杂的权限管理：系统需要支持细粒度的权限控制，不同用户角色有不同的访问权限，这涉及到复杂的角色和权限配置。
数据可视化：需要将大量数据通过图表和报表的形式展示出来，我们使用了Echarts/D3.js等库来实现复杂的交互和可视化效果。
高并发处理：系统需要处理高并发请求，尤其在数据统计和报表生成时，需要进行性能优化和缓存策略。
多语言支持：系统需要支持多语言，考虑到国际化和本地化的需求，我们使用了i18n库来实现多语言切换和维护。

之前公司开发项目迭代的节奏是什么，比如说一次迭代差不多的开发时间是多久

面试官说那边会有工作强度，隔断时间会有996这样的加班强度，能不能接受；加班有提供加班餐和调休时间

项目里用的像素的单位是什么，比如px，rem什么的；em和rem的区别是什么

在项目中，我们常用以下几种像素单位：

px：像素单位，用于精确控制元素尺寸。
rem：相对于根元素（html）的字体大小。例如，如果html的字体大小是16px，那么1rem等于16px。
em：相对于父元素的字体大小。例如，如果父元素的字体大小是16px，那么1em等于16px。

em和rem的区别：

em基于父元素的字体大小，如果父元素的字体大小变化，em也会相应变化。
rem基于根元素（html）的字体大小，无论在哪个元素中使用，rem都相对于根元素的字体大小。

设置透明度有哪些方法

设置透明度的方法有：

使用rgba：rgba(r, g, b, a)，其中a表示透明度，范围从0到1。例如：rgba(255, 0, 0, 0.5)表示半透明的红色。
使用opacity属性：opacity: 0.5;，范围从0到1，0表示完全透明，1表示完全不透明。
使用hsla：hsla(h, s, l, a)，其中a表示透明度。例如：hsla(120, 100%, 50%, 0.5)表示半透明的绿色。

rgba和HSL(没听清)有什么区别

rgba：基于红、绿、蓝三个基本色和透明度（alpha）通道。格式为rgba(r, g, b, a)。
HSL：基于色相（hue）、饱和度（saturation）和亮度（lightness）。可以增加透明度，格式为hsla(h, s, l, a)。

主要区别：

表示方式：rgba使用红、绿、蓝通道表示颜色，而HSL使用色相、饱和度和亮度表示颜色。
调节方式：HSL更直观，尤其在调整颜色的亮度和饱和度时更方便。

如何判断一个引用数据类型是数组

判断一个引用数据类型是否是数组的方法有：

Array.isArray() ：Array.isArray(value)，返回布尔值，表示value是否为数组。
instanceof：value instanceof Array，返回布尔值，表示value是否是Array的实例。
Object.prototype.toString.call() ：Object.prototype.toString.call(value) === '[object Array]'，返回布尔值，表示value是否为数组。

遍历数组，比如说用for循环或map循环遍历，然后在方法体内执行异步函数，那么异步函数执行顺序有没有区别在遍历数组并在方法体内执行异步函数时，执行顺序可能会有区别：

for循环：会立即启动所有异步操作，异步操作的执行顺序取决于各自的完成时间。
map循环：与for循环类似，map会立即启动所有异步操作，执行顺序同样取决于完成时间。

如果需要按顺序执行异步操作，可以使用for...of循环结合await：

async function asyncProcess(array) {
  for (let item of array) {
    await someAsyncFunction(item);
  }
}

这种方式会按顺序逐个执行异步操作。

事件委托指的是什么；根据什么判断在哪触发的

事件委托是一种将事件处理器添加到父元素上的技术，利用事件冒泡机制，在父元素上处理子元素的事件。

判断在哪触发的：

event.target：通过事件对象的target属性，可以判断事件是在哪个子元素上触发的。

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Event triggered by:', event.target);
});

这样可以在父元素上处理子元素的事件，并通过event.target获取具体触发事件的子元素。

webstorage有哪些；indexDB有用过吗；localStorage、SessionStorage、cookie

Web Storage主要包括以下两种：

localStorage：用于存储在客户端持久化数据，没有过期时间，即使页面重新加载或浏览器重新启动，数据仍然存在。
sessionStorage：用于存储在单个会话中的数据。当页面会话结束时（如关闭标签页或浏览器），数据会被清除。

IndexedDB：是一种低级API，用于在浏览器中存储大量的结构化数据（包括文件/二进制数据）。相较于localStorage和sessionStorage，IndexedDB是异步的，并且能够存储更多的数据。 localStorage、sessionStorage和cookie的区别：

localStorage：持久存储，数据没有过期时间，浏览器关闭后数据仍然存在。
sessionStorage：临时存储，数据仅在页面会话期间存在，浏览器关闭后数据会被清除。
Cookie：数据存储在服务器和客户端之间，适用于需要在服务器端访问的数据，且有过期时间。

不同域名下可以操作localstorage这些吗

不能。localStorage和sessionStorage受同源策略（Same-Origin Policy）限制。不同域名之间无法相互访问localStorage。只有相同的协议、域名和端口号的页面才能共享相同的localStorage。

vue2的data如何给他动态添加响应式变量

在Vue2中，可以通过Vue.set方法给data动态添加响应式变量：

Vue.set(this.someObject, 'newProperty', 'newValue');

或者通过this.$set方法：

this.$set(this.someObject, 'newProperty', 'newValue');

这两种方法都可以确保新添加的属性是响应式的。

父组件嵌套子组件，然后从父组件渲染到子组件经历过哪些构造函数

在Vue中，从父组件渲染到子组件的生命周期函数过程如下：

父组件的beforeCreate
父组件的created
父组件的beforeMount
子组件的beforeCreate
子组件的created
子组件的beforeMount
子组件的mounted
父组件的mounted

watch和computed有什么区别

computed：计算属性，基于依赖进行缓存，只有在依赖发生变化时才会重新计算。适合用于基于现有数据计算出新数据的场景。
watch：侦听器，监听数据的变化，并执行回调函数。适合用于在数据变化时执行异步或开销较大的操作。

子组件接受的数据是从外部传进来的，然后外部是接口获取的，然后发现子组件数据更新了但是dom没更新，分析下原因，怎么去解决

原因可能是：

父组件获取数据后，传给子组件的属性没有正确响应更新。
子组件中没有正确地监听属性的变化。

解决方法：

确保父组件正确地传递数据给子组件：

<child-component :data="parentData"></child-component>

在子组件中使用watch监听属性的变化：

props: ['data'],
watch: {
  data(newVal) {
    // 处理新数据
  }
}

vue3里面定义响应式变量有哪些方法，有什么不一样

在Vue3中，定义响应式变量的方法主要有：

reactive：创建响应式对象，用于深层次响应式数据。
ref：创建响应式变量或对象，用于基本数据类型或单一值。

不同点：

reactive用于创建复杂的响应式对象。
ref用于基本数据类型，并且通过.value访问值。

示例：

import { reactive, ref } from 'vue';

const state = reactive({ count: 0 });
const count = ref(0);

响应式变量解构出他的原始属性有哪些方法；

在Vue3中，可以使用toRefs或spread运算符来解构响应式对象：

toRefs：

import { reactive, toRefs } from 'vue';

const state = reactive({ count: 0 });
const { count } = toRefs(state);

spread运算符：

import { reactive } from 'vue';

const state = reactive({ count: 0 });
const spreadState = { ...state };

权限菜单有做过吗？能说一下思路吗；根据什么来确定他能看到什么样的菜单；细节能说清楚一点吗；后台如果返回的权限字符，这种模式来做的花前端应该怎么做

权限菜单的实现思路包括：

权限数据获取：从后台获取用户的权限数据，通常是角色或权限标识。
菜单数据过滤：根据用户权限过滤菜单数据，显示用户有权限访问的菜单项。
动态渲染菜单：根据过滤后的菜单数据动态生成菜单组件。

具体步骤：

后台返回权限字符：后台返回用户的权限数据（如角色或权限标识）。
前端过滤菜单：前端根据权限数据过滤菜单项。
渲染菜单：使用过滤后的菜单数据生成菜单组件。

示例代码：

// 假设菜单数据和权限数据
const menuData = [
  { name: 'Dashboard', permission: 'view_dashboard' },
  { name: 'Admin', permission: 'view_admin' },
];

const userPermissions = ['view_dashboard'];

const filteredMenu = menuData.filter(item => userPermissions.includes(item.permission));

前端面试篇（2）