2025前端面试题
- uniapp
- uniapp如何打包发版到线上
- vue
- vue3构建项目
- vue如何封装组件
- vue2的响应式原理
- vue3的响应式原理
- vue3和2的区别
- Vuex中的重要核心属性有哪些?
- Vue-router有哪几种路由守卫
- es6
- 数组有哪些常用方法
- ES6的新特性
- Promise
- async/await
- 防抖和节流,应用场景
- 闭包
- 原型和原型链
- 0.1+0.2 等于0.3吗?
- 安全
- 跨域CORS
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
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
数组有哪些常用方法
添加/删除: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 通过