2025前端面试题

uniapp

uniapp如何打包发版到线上

准备工作

代码测试：确保应用功能完整，没有明显 Bug。

配置调整：根据目标平台调整 manifest.json 和页面配置。

版本号更新：更新应用的版本号（通常在 manifest.json 中配置）。

API 环境切换：将开发环境的 API 地址切换为生产环境
准备工作
代码测试：确保应用功能完整，没有明显的Bug
配置参数：根据目标平台调整manifest.json和页面配置，更新版本号,API 地址切换为生产环境
打包发版
1.发布到H5
配置：在manifest.json的web节点，配置router模式（hash或history）并设置publicPath的路径
打包：点击发行->网站pcweb或手机H5 或者npm run build:h5 在\unpackage\dist\build\web生成静态部署：配置 Nginx,部署到服务器
访问：域名或hash #
2.发布到小程序
配置：在 manifest.json 中，找到 mp-weixin 节点，配置小程序的 AppID 和其他设置
打包：点击发行->小程序微信，在\unpackage\dist\build\mp-weixin生成静态文件
上传：在微信开发工具中，点击上传：填写版本号和备注，提交审核
发布：登录微信公众平台，在“版本管理”中提交审核，审核通过后即可发布。
3.发布到APP
配置：在 manifest.json 中，配置 App 的基本信息，如应用名称、图标、启动图等
打包：点发行->app 云打包 会生成 Android 的 .apk 文件或 iOS 的 .ipa 文件
发布：发布到应用商店
andriod配置签名 上传到google应用商店
ios使用 Xcode 打开生成的 iOS 项目，配置证书和描述文件。将应用上传到 App Store。

vue

keep-alive 有哪几个生命周期

keep-alive是Vue.js中的一个内置组件，用于缓存动态组件或路由组件，以避免重复渲染和销毁
activated 和deactivated
原理，keep-alive内部维护了一个缓存对象，存储被缓存的组件实例 健是name和key 值是组件的 VNode（虚拟 DOM 节点）缓存策略：当组件首次渲染时，keep-alive 会将其 VNode 和 DOM 节点缓存起来。当组件再次渲染时，keep-alive 会从缓存中直接取出 VNode 和 DOM 节点，而不是重新创建。

vue3构建项目

vue如何封装组件

首先要明确组件的功能和应用场景
再者要规划好组件的api与外部交互的接口 props接收的外部参数 slot插槽 event触发的事件
并进一步细化props参数，包括类型，默认值，必要的参数做好校验
最后就是实现组件的逻辑和样式

vue2的响应式原理

Vue2通过Object.defineProperty对data中的属性进行劫持，当属性值发生变化时，会触发对应的更新函数，从而更新视图。
Vue2通过Watcher来实现数据与视图的双向绑定，当数据发生变化时，Watcher会通知对应的视图进行更新。
·Vue2的响应式原理存在一些缺陷，例如无法监听数组的变化，需要通过特殊的方法来实现

vue3的响应式原理

Vue3使用Proxy代替了Object.defineProperty，Proxy可以监听到对象的所有属性，包括新增和删除操作。
Vue3使用了WeakMap来存储依赖关系，避免了Vue2中Watcher的内存泄漏问题
Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。

vue3和2的区别

更快的渲染速度：Vue3使用了Proxy代理对象，可以更快地跟踪数据变化，从而提高渲染速度。
更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，减少了页面加载时间。
更好的TypeScript支持：Vue3对TypeScript的支持更加完善，可以更好地进行类型检查和代码提示。
更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护。
响应式系统进行了重构，可以更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式数据。

Vuex中的重要核心属性有哪些？

Vuex 应用的核心就是 store（仓库）
五大核心：State,Getter,Mutation,Action,Module
state 存放数据
Getter 相当于计算属性
Mutation 同步修改state中的数据
actions 异步修改数据 调用Mutations中的方法
Module 数据过多或复杂时，将数据用模块化分开

Vue-router有哪几种路由守卫

分四种
全局导航守卫 beforeEach,afterEach
路由独享守卫 beforeEnter
组件内的守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
全局解析守卫 beforeResolve

es6

数组去重的方法

set方法[…new Set(arr)]
filter和indexOf方法： arr.filter((item, index) => arr.indexOf(item) === index)

slice与splice的区别

slice()：提取数组的一部分，返回新数组，不修改原数组。
splice()：删除、替换或插入元素，修改原数组，返回被删除的元素。

数组有哪些常用方法

添加/删除：push()尾插、pop()尾删、unshift()头插、shift()头删
合并/截取：concat()合并返新、slice()截取返新
遍历：forEach()遍历、map()遍历返新、filter()过滤返新、reduce()累加
查找：indexOf()查找返索引无-1、includes()是否包含返布尔值、find()查询返元素、findIndex()查询第一个返索引
排序/反转：sort()排序、reverse()反转
其他：join()拼接成字符串、toString()转成字符类型、some()是否有返布尔、every()是否都满足条件返布尔、flat()、flatMap()
ES6+：Array.from()、Array.of()、fill()、findLast()、findLastIndex()

ES6的新特性

let const {}[] unicode map set symbol … proxy promise class model
块级作用域 let 和const
箭头函数 （）=> {} 简洁 无this
Promise 异步编程
class类和extends继承
模板字符串 使用反引号` 定义字符串，可以嵌入表达式${}
解构赋值：从数组和对象中提取值并赋给变量
默认的参数：函数赋值可以设置默认的参数
扩展运算符：…
模块化：使用 import 和 export 语法导入和导出模块
符号（Symbol）：新的数据类型，表示唯一的标识
set 数组元素是唯一，不重复
map 对象，键值对

Promise

ES6引入的异步编程的解决方案，
从语法上说，Promise是一个构造函数，可以实例化对象。封装异步操作，获取成功和失败的结果。
优点：支持链式调用，可以解决回调地狱的问题
缺点：无法取消Promise，一旦新建他就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误无法反应到外部。当pending的时候，无法知道进展到了哪一步。
三种状态：pending（进行中）、fullfilled（已成功）、rejected（已失败）。
主要应用在文件读取操作、 数据库操作、AJAX网络请求、定时器

async/await

像写同步代码那样编写异步代码
async 函数返回一个 Promise对象，可以使用 then方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

防抖和节流，应用场景

防抖和节流都是防止某一时间频繁触发，但是原理却不一样。
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
防抖(debounce)：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)：
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

闭包

定义
闭包通常发生在嵌套函数中，内部函数可以访问外部函数的变量和参数。
主要用途
数据封装：创建私有变量，防止外部的修改
函数柯里化：将多参数函数，变为单参函数
回调函数：
缺点和避免
内存泄漏：因闭包长期存在，不会被垃圾回收机制回收，导致内存泄漏，解决不需要时及时的释放
影响性能：会导致额外的内存开销。避免循环中创建闭包

原型和原型链

原型是一个对象，他包含共享属性和方法
原型链是对象的原型组成的链式结构
继承：通过原型链实现对象之间的继承

0.1+0.2 等于0.3吗？

不等于，这是因为js采用IEEE754浮点数标准，存在精度问题。可以使用toFixed的方法处理

安全

跨域CORS

原因：受同源策略的限制，web浏览器若两个页面的协议、域名、端口三者中任意一个不同，就会产生跨域
解决：
CORS（Cross-Origin Resource Sharing）‌：现代浏览器支持CORS，服务器可以在响应头中设置Access-Control-Allow-Origin来允许或拒绝跨域请求
本地做proxy代理 vue-cli代理跨域：使用devServer进行代理
Jsonp 通过