2025前端面试题

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 通过

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/69939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大语言模型多代理协作(MACNET)

大语言模型多代理协作(MACNET) Scaling Large-Language-Model-based Multi-Agent Collaboration 提出多智能体协作网络(MACNET),以探究多智能体协作中增加智能体数量是否存在类似神经缩放定律的规律。研究发现了小世界协作现象和协作缩放定律,为LLM系统资源预测和优化…

dify.ai 配置链接到阿里云百练等云厂商的 DeepSeek 模型

要将 dify.ai 配置链接到阿里云百练等云厂商的 DeepSeek 模型. 申请阿里云百练的KEY 添加模型 测试模型

Win10环境使用Dockerdesktop部署Dify集成Deepseek

Win10环境借助Dockerdesktop部署Dify集成Deepseek 前言 之前笔者已经部署了基于Ollama的Deepseek: https://lizhiyong.blog.csdn.net/article/details/145505686 安装官方指示,还可以集成很多组件拓展玩法: https://github.com/deepseek…

23、深度学习-自学之路-激活函数relu、tanh、sigmoid、softmax函数的正向传播和反向梯度。

在使用这个非线性激活函数的时候,其实我们重点还是学习的是他们的正向怎么传播,以及反向怎么传递的。 如下图所示: 第一:relu函数的正向传播函数是:当输入值(隐藏层)值大于了,就输出…

cameralib 安装

目录 linux安装: 测试安装是否成功: linux安装: pip install githttps://github.com/isarandi/cameralib.git pip install githttps://github.com/isarandi/boxlib.git pip install githttps://github.com/isarandi/poseviz.git githttps…

ML.NET库学习005:基于机器学习的客户细分实现与解析

文章目录 ML.NET库学习005:基于机器学习的客户细分实现与解析项目主要目的和原理目的原理 项目概述实现的主要功能主要流程步骤使用的主要函数方法关键技术 主要功能和步骤功能详细解读详细步骤解析 数据集及其处理步骤数据集处理步骤关键处理步骤原理1. 数据清洗与…

webpack打包优化策略

1. 减少打包体积 减少打包文件的大小是为了提高加载速度,降低网络带宽消耗,提升用户体验。常见的减少打包体积的优化策略包括: 代码分割(Code Splitting):将代码拆分成多个小文件,让浏览器按需…

RocketMQ与kafka如何解决消息积压问题?

前言 消息积压问题简单来说,就是MQ存在了大量没法快速消费完的数据,造成消息积压的原因主要在于“进入的多,消费的少”,或者生产的速度过快,而消费速度赶不上,基于这一问题,我们主要介绍如何通过…

RISC-V平台编译 state-thread x264 ffmpeg zlog

1.state-threads 源码下来之后 直接 make linux-debug 目录下生成了对应的.a 和 .h文件 gcc test.c -o test -l st -L . #include <stdio.h> #include <stdlib.h> #include <string.h> #include <errno.h> #include <sys/socket.h&g…

用easyExcel如何实现?

要使提供的 ExcelModelListener 类来解析 Excel 文件并实现批量存储数据库的功能&#xff0c;需要结合 EasyExcel 库来读取 Excel 数据。具体来说&#xff0c;可以使用 EasyExcel.read() 方法来读取 Excel 文件&#xff0c;并指定 ExcelModelListener 作为事件监听器。 下面是…

BUU37 [DASCTF X GFCTF 2024|四月开启第一局]web1234【代码审计/序列化/RCE】

Hint1&#xff1a;本题的 flag 不在环境变量中 Hint2&#xff1a;session_start&#xff08;&#xff09;&#xff0c;注意链子挖掘 题目&#xff1a; 扫描出来www.zip class.php <?phpclass Admin{public $Config;public function __construct($Config){//安全获取基…

Mysql中使用sql语句生成雪花算法Id

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

Go框架面试突击!30道高频题解析

前言 有粉丝朋友问我能不能整理Go主流框架方面的面试题&#xff0c;安排&#xff01; 这篇文章分享了gRPC、GoFrame、GoZero、GoMicro、GORM、Gin等主流框架的30道面试题和详解。 需要大厂面经的朋友们也可以直接加我好友&#xff0c;私信我。 gRPC 1.gRPC是什么&#xff…

@JsonRawValue 注解

这里写目录标题 1. 问题2. JsonRawValue 注解说明 1. 问题 在实际开发中我遇到这样一个问题&#xff0c;查询数据库的结果返回的content内容是含有转移符的JSON字符串&#xff0c;但是我需要返回的不包含转移的String字符串。经过我一顿折腾并未发现解决办法&#xff0c;直到J…

node.js+兰空图床实现随机图

之前博客一直用的公共的随机图API&#xff0c;虽然图片的质量都挺不错的&#xff0c;但是稳定性都比较一般&#xff0c;遂打算使用之前部署的兰空图床&#xff0c;自己弄一个随机图 本文章服务器操作基于雨云——新一代云服务提供商的云服务器进行操作&#xff0c;有兴趣的话可…

MySQL binlog的三种模式

MySQL 的 binlog&#xff08;Binary Log&#xff09; 默认的模式是 STATEMENT&#xff0c;即 语句模式。在这种模式下&#xff0c;MySQL 会记录所有对数据库执行的数据修改操作&#xff08;如 INSERT、UPDATE、DELETE 等&#xff09;的 SQL 语句。 1. binlog 的三种模式 MySQL…

25农村发展研究生复试面试问题汇总 农村发展专业知识问题很全! 农村发展复试全流程攻略 农村发展考研复试真题汇总

农村发展复试当然有好的建议&#xff01;前提是复试重点面试题背好&#xff01; 你是不是也在为农村发展考研复试发愁&#xff1f;担心自己准备不充分、表现不好&#xff1f;别急&#xff01;今天&#xff0c;学姐——复试面试拿下90分成功上岸的学姐&#xff0c;来给大家分享…

读取本地excel并生成map,key为第一列,value为第二列

添加依赖&#xff1a;在 pom.xml 文件中添加以下依赖&#xff1a; <dependencies><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>5.2.3</version></dependency><dependency&…

代码随想录算法【Day44】

Day44 1143.最长公共子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {vector<vector<int>> dp(text1.size() 1, vector<int>(text2.size() 1, 0));for (int i 1; i < text1.size(); i) {for (int j 1; …

【transformers.Trainer填坑】在自定义compute_metrics时logits和labels数据维度不一致问题

问题描述 我在使用 transformers.Trainer 训练我的模型时&#xff0c;我自定义了 compute_loss 函数和compute_metrics函数&#xff0c;我的模型是一个简单的二分类模型。 在自定义 compute_loss 时这样写的&#xff1a; def compute_loss(self, model, inputs, return_outp…