面试总结2025
以下是本人2025找工作面试的题目：
1. 项目使用了什么技术，有遇到什么难点，或者有没有遇到让你觉得很难忘的事。
* 页面返回滚动到固定位置，再首页失效
-- 解决方法使用ref操作dom
-- 后来发生是vue-router版本不对，项目使用了3.2.0，滚动行为api- scrollBehavior 需要4.x.x版本以上
* 读取图层数据做成一个table，没法知道总数，还要实现模糊搜索
2. 目前是不是在职？
3. js有那些基本类型和引用类型？区别是什么
- 基本类型：String、number、bloolen、symbol、null、undefined
-引用类型：对象obj 、 函数function、 数组 、Date 、RegExp （指针指向）
从内存角度来说，基本数据类型在内存中占据一块空间，空间里存储的就是数据 , 获取数据是直接获取。引用数据类型在内存中占据两块空间，第一块空间存储的是地址，第二块空间存储的是数据。获取数据是间接获取。
从赋值角度来说，基本数据类型赋的是值，引用数据类型赋的是地址。
从函数传参角度来说，基本数据类型传的是值，引用数据类型传的是地址
4. 引用类型防止篡改的问题（引用类型经常会产生一些无法意识到的副作用）
- 采用深拷贝
- 4.1 通过 JSON 对象实现深拷贝 JSON.stringify 、 数组： arr.slice(0)
- 4.2 解构 […arr]
- 4.3 使用递归的方式实现深拷贝
- 4.4 通过jQuery的extend方法实现深拷贝
- 4.5 Object.assign()拷贝
- 4.6 lodash函数库实现深拷贝 - lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝
- 4.7 immer.js提供具有副作用的逻辑都可以放进 produce 的第二个参数的函数内部进行处理。在这个函数内部对原来的数据进行任何操作，都不会对原对象产生任何影响。
5. setTimout()函数里面指定的运行时间，一定就是按定义的时间输出内容吗？
setTimeout(function(){
console.log(‘hello world’);
},0);//虽然此处异步任务时间间隔为0，但仍然排在同步队列之后执行,
所以这里的时间就不一定是一开始就执行了
6. 说下js的事件循环机制(EventLoop)
7. useMemon\useCallback的使用
8. react与react nactive的区别
9. 使用reactJS你经常使用那些钩子函数，他们的作用是什么
10. 说说react diff算法
10. 说说react 组件有哪几种写法
11. 302/301状态码
12、自己对工程化的理解和实践
13、讲一讲如何从零打造一个工程
14、uniapp编译不同平台的原理
15、vue与react的区别和特点
template 比较死板 react jsx 比较灵活
vue偏向mvvm模型 react偏向mvc模型
vue 是双向数据响应 react是单向数据流
16、react中强调数据不可变的，你是怎么理解
Setstate不能在原有的数据state上操作，必须再返回一个新的，通过数组的解构之类返回
17、修改 React 中 state 里的嵌套对象
使用 Object.assign() 方法
Object.assign() 方法可以用来合并多个对象，并返回一个新的对象。这种方法可以确保我们不会直接修改原始对象，而是创建一个新的对象，从而触发组件的重新渲染。
例如，假设我们有以下 state 结构：
this.state = {
data: {
user: {
name: 'John',
age: 30
}
}
};
如果我们想修改 name 属性，可以这样做：
updateName = (newName) => {
this.setState({
data: Object.assign({}, this.state.data, {
user: Object.assign({}, this.state.data.user, {
name: newName
})
})
});
};
使用扩展运算符
另一种更简洁的方法是使用扩展运算符（…），它可以展开对象并创建一个新的对象。这种方法同样可以确保我们不会直接修改原始对象。
例如，我们可以这样修改 name 属性：
updateName = (newName) => {
this.setState(prevState => ({
data: {
...prevState.data,
user: {
...prevState.data.user,
name: newName
}
}
}));
};
总结
在 React 中修改嵌套对象时，我们需要确保不会直接修改原始对象，而是创建一个新的对象。这可以通过 Object.assign() 方法或扩展运算符来实现。这两种方法都可以确保组件能够正确识别状态的变化，并触发重新渲染。
通过以上方法，你可以安全地修改 React 中 state 里的嵌套对象，确保组件的正常运行和更新。
18、vue2 和 vue3 区别
1.写法上的区别: vue2 使用的是options(选项)Api,vue3 的是composition Api(当然 vue3 也兼容composition api)。options Api中methods，compute，data等 api 都是分散的。而composition api中的代码是根据逻辑功能来组织的, 我们可以将一个功能所定义的methods，compute，data等 api 会放在一起, 让我们可以更灵活地组合组件逻辑。
2.vue2 将响应式数据放到 data 函数中, 而 vue3 则是使用ref和reactive将数据声明为响应式
3.响应式实现方式: vue2 中是通过Object.defineProperty对数据劫持实现的, vue3 中则是使用Proxy对数据代理实现的。
4.生命周期区别: vue3 中将beforeCreate和created合并到了setup函数中
5.根节点: vue3 组件允许多个根节点, 而 vue2 只允许一个
6.内置组件: vue3 新增了传送组件Teleport和异步依赖处理组件Suspense、frame
19、Vue 3相对于Vue 2的主要改进包括：
（1）使用Proxy代替Vue 2中的Object.defineProperty，提供了更完善的响应式系统，能够更好地支持非对象的响应式数据。
（2）提供了Composition API，用户可以更灵活地组合和重用代码。
（3）增加了Fragment、Teleport、Suspense等组件，提供更强的组件结构。
（4）创建了更好的生命周期钩子，例如onRenderTracked和onRenderTriggered，可以更好地跟踪依赖和触发重新渲染。
（5）引入了新的打包工具Vite，可以提供更快的热重载和项目启动速度。
（6）提供了更好的TypeScript支持。
（7）优化了渲染机制，包括SSR的改进和更好的Batching更新机制，可以提高性能。
（8）移除了一些不推荐使用的选项，如data必须为返回一个对象的函数等。
（9）提供了更好的自定义渲染API，可以更容易地集成非DOM平台。
（10）提供了更好的与Treeshaking友好的代码分割，可以更好地在生产环境中分离代码。
20、简述setup()函数在Vue 3中起什么作用 ？
setup() 是 Vue 3 组件选项 API 中的一个新选项。它是 Composition API 的入口点，在组件被创建之前执行，用于初始化状态、计算属性和方法，并返回在模板中使用的响应式引用
21、简述请解释Vue 3的Composition API是什么 ？
Composition API 是一组新的、基于函数的 API，它允许你以更灵活和可复用的方式组织组件逻辑。它主要包括 ref、reactive、computed、watch、setup 等函数和钩子
22、key的作用和原理？
（1）key的作用主要是为了高效的更新虚拟DOM，其原理是Vue在Patch过程中通过key来判断是否为同一个，从而避免频繁的操作dom，使得整个Patch过程更加高效，减少dom操作，提高性能。
（2) 另外，如果不设置key vue在列表更新的时候还可能产生不可避免的bug。
(3）vue在使用相同标签元素进行过渡切换时，也会使用到key属性，其目的也是为了让vue区分他们，否则vue只会替换其内部属性而不会触发过渡效果。
23、Vue 3 的 ＜Suspense＞ 组件详解？
是 Vue 3 中引入的一个内置组件，用于处理异步组件的加载状态。它允许你在异步组件加载完成之前显示一个备用内容（如加载动画或占位符），从而提升用户体验。