2024前端面试题汇总

2024前端面试题汇总

        • 1、全局变量与局部变量
        • 2、Vue3 区分ref 与 reactive 的原因
        • 3、关于服务端渲染(SSR)与客户端渲染(CSR)的理解
        • 4、单页面应用(SPA)与多页面应用(MPA)的优劣
        • 5、Vue2 与 Vue3 的具体区别
        • 6、Ts定义变量类型的方法

1、全局变量与局部变量
  • 以下代码输出什么结果?
	for (var i = 0; i < 10; i++) {setTimeout(() => {console.log(index);}, 1000)}// 答案:1秒后输出 10 个 10
  • 如果要正确输出 0 到 9 应该如何修改?
	for (var i = 0; i < 10; i++) {(function(index) {setTimeout(() => {console.log(index);}, 1000)})(i)}// 或for (var i = 0; i < 10; i++) {let fn = function(index) {setTimeout(() => {console.log(index);}, 1000)}fn(i)}// for循环时 i 赋值给局部变量index, 则其值将不会随着i的变化而变化,立即执行。
2、Vue3 区分ref 与 reactive 的原因
  • 定义数据角度对比:
    ref 用来定义:基本类型数据
    reactive 用来定义:引用类型,例如对象、或数组类型的数据
    备注:ref也可以用来定义对象或数组类型数据,它内部会自动通过 reactive 转为代理对象
               ref.value 返回的是一个 proxy 对象,他是通过代理 reactive 实现的
  • 原理角度对比:
    ref 通过 Class 的 get 与 set 来实现响应式的(数据劫持)
    reactive 通过使用 Proxy 来实现响应式(数据劫持),并通过Reflect 操作源对象内部的数据。
  • 使用角度对比:
    ref 定义的数据:操作数据需要 .value,读取数据时模版中直接读取不需要 .value
    reactive 定义的数据:操作数据与读取数据,均不需要 .value
    可以得出 data.value.name === obj.name,但是对象更推荐用 reactive 定义,语义化更强
3、关于服务端渲染(SSR)与客户端渲染(CSR)的理解
  • 服务器渲染
    后端渲染HTML的情况下,浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串,这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的(模板引擎),在这种情况下,浏览器只进行了HTML的解析,以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。
  • 前端渲染
    简单来说:客户端渲染,就是每个人从服务器获取到的html文件是一样的,再在客户端去通过接口获取数据,拼装成页面展示在这里插入图片描述
4、单页面应用(SPA)与多页面应用(MPA)的优劣
  • 单页面应用(SPA)
    概念:只有一个html页面,所有跳转方式都是通过组件切换完成的。
    优点:页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
    缺点:首屏加载较慢,加载整个项目中使用的css、js,SEO优化不好。
    (seo优化) 就可以提升搜索时网站靠前
  • 多页面应用(MPA)
    概念:整个项目有多个html页面,所有跳转方式都是页面之间相互跳转的。
    优点:首屏加载较快,只加载本页所使用的的css、js,SEO优化较好。
    缺点:页面跳转较慢。
5、Vue2 与 Vue3 的具体区别
  • 响应式原理
    vue2的响应式原理的基础是Object.defineProperty,每个数据属性被定义成可观察具有getter和setter方法,当这些属性被修改后,vue会自动追踪并重新计算相关的渲染函数,并更新视图。
    vue3响应式原理基础是使用了ES6中的Proxy代理对象来代替Object.defineProperty()方法,proxy对象可以拦截对象上的一些操作,从而实现更加灵活的响应式更新。
  • diff原理
    vue2 diff算法是通过比较新旧虚拟DOM树来确定必须更新的DOM元素的最小集合
    vue3 diff采用了编译时优化的动态标记,只需要对动态节点进行比较,避免了对静态节点不必要操作,从而提高了性能
    Vue2 Options API (选项式API)存在的问题, 新增或者修改一个需求,就需要分别在data,methods,computed里修改
    Vue3 Componsition API (组合式API) 只需要在特定的代码块新增修改,代码维护性更强开发者可以只需关注实际的业务逻辑
    ref 和 reactive 区别?
    原理:ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。
    reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
    ref通常用来定义基本类型数据, reactive用来定义引用类型数据
6、Ts定义变量类型的方法

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

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

相关文章

计算机二级Python选择题考点——Python语言程序设计Ⅱ

代码1&#xff1a; def fibRate(n):if n < 0:return -1elif n 1:return -1elif n 2:return 1else:L [1,5]for i in range(2,n):L.append(L[-1] L[-2])return L[-2] % L[-1] print(fibRate(7))n 7 L [1,5] i 2 , 3 , 4 , 5 , 6 i 2 -> L[-1] L[-2] 5 1 6 -&g…

tomcat中不同应用session共享

保存session HttpSession sessionrequest.getSession();session.setAttribute("logonUser",logonuser );//session.setMaxInactiveInterval(15);String sessionidsession.getId();session.setAttribute("sessionid", sessionid);ServletContext ContextA …

Linux逻辑卷(LV)扩容

Linux逻辑卷&#xff08;LV&#xff09;扩容 1、准备物理磁盘&#xff08;分区和不分区都行&#xff09;&#xff0c;可以使用lsblk命令查看新增的磁盘&#xff0c;如下图sde就是我们新增磁盘&#xff0c;容量为600G。 2、将新磁盘变成物理卷&#xff08;PV&#xff09; pvcr…

缓存的概念

文章目录 一、系统缓存buffer与cachecache 的保存位置cache 的特性 二、用户层缓存DNS缓存 三、浏览器缓存过期机制最后修改时间Etag标记过期时间 expires混合使用和缓存刷新缓存刷新 cookie和session 四、CDN缓存什么是CDN用户请求CDN流程利用 302 实现转发请求重定向至最优服…

Unity 平台编译预定义

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Platform scripting symbols二、测试总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 链接: 官方文档 一、Platform scripting…

RabbitMQ 死信队列应用

1. 概念 死信队列&#xff08;Dead Letter Queue&#xff09;是在消息队列系统中的一种特殊队列&#xff0c;用于存储无法被消费的消息。消息可能会因为多种原因变成“死信”&#xff0c;例如消息过期、消息被拒绝、消息队列长度超过限制等。当消息变成“死信”时&#xff0c;…

【数据分享】1929-2023年全球站点的逐月最高气温数据(Shp\Excel\无需转发)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2023年全球气象站…

Leetcode1109. 航班预订统计

Every day a Leetcode 题目来源&#xff1a;1109. 航班预订统计 解法1&#xff1a;差分数组 注意到一个预订记录实际上代表了一个区间的增量。我们的任务是将这些增量叠加得到答案。因此&#xff0c;我们可以使用差分解决本题。 代码&#xff1a; /** lc appleetcode.cn i…

设计模式 :总结篇

一、前言 有时候不想动脑子&#xff0c;就懒得看源码又不像浪费时间所以会看看书&#xff0c;但是又记不住&#xff0c;所以决定开始写"抄书"系列。本系列大部分内容都是来源于《 图解设计模式》&#xff08;【日】结城浩 著&#xff09;。该系列文章可随意转载。 本…

asp.net core监听本地ip地址

开发asp.net core的时候遇到一个问题我想提供访问供其他同事测试&#xff0c;但是默认都是localhost或者127.0.0.1。我想换成我的Ip地址访问但是不行&#xff0c;百度搜索需要更换监听的地址即修改launchSettings.json&#xff0c;修改为0.0.0.0:5248&#xff0c;这样不管local…

Android 双卡适配 subId 相关方法

业务场景 双卡设备进行网络等业务时&#xff0c;需要正确操作对应的卡。 执行卡业务和主要是使用subId和 PhoneId/SlotId进行区分隔离。 代码举例 初始化subId //初始化subId private int mSubId SubscriptionManager.INVALID_SUBSCRIPTION_ID;//1、通过intent传值&#x…

力扣hot100 跳跃游戏 II 贪心 思维

Problem: 45. 跳跃游戏 II 思路 &#x1f468;‍&#x1f3eb; 参考 每次在上次能跳到的范围&#xff08;end&#xff09;内选择一个能跳的最远的位置&#xff08;也就是能跳到max_far位置的点&#xff09;作为下次的起跳点 &#xff01; Code ⏰ 时间复杂度: O ( n ) O(n…

k8s学习-Health Check

强大的自愈能力是Kubernetes这类容器编排引擎的⼀个重要特性。自愈的默认实现方式是自动重启发生故障的容器。除此之外&#xff0c;用户还可以利用Liveness和Readiness探测机制设置更精细的健康检查&#xff0c;进而实现&#xff1a; &#xff08;1&#xff09;零停机部署。 &a…

DVI接口主机连接VGA显示器解决方案:DVI转VGA转换器DV

DVI转VGA转换器概述 DVI转VGA转换器能够将DVI数字信号转换成VGA模拟信号&#xff0c;通过VGA线缆传输给VGA显示设备使用&#xff0c;这样就能实现DVI接口主机连接VGA接口的显示器。 DVI转VGA转换器DV DVI转VGA转换器DV接口说明 DVI转VGA转换器DV接口介绍 DVI转VGA转换器连接示…

在next.js的13.2.1版本中使用中间件,实现禁止特定ip访问网址所有页面

在实现实现禁止特定ip访问网址所有页面时&#xff0c;有两种方式&#xff0c;一种是针对单个页面&#xff0c;另一种是针对整个网站 在pages/api中创建文件使用&#xff0c;针对单个页面,也可以应用于所有页面 之前是在pages/api下创建的中间件去实现的&#xff0c;但是使用p…

Spring Boot集成RocketMQ

本文目的是&#xff1a;教会你使用Spring Boot集成RocketMQ。 pom.xml文件引入rocketMQ依赖 <!-- rocketmq 依赖--><dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId>&…

XCTF:warmup[WriteUP]

CtrlU查看页面源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…

嵌入式学习第十四天!(结构体、共用体、枚举、位运算)

1. 结构体&#xff1a; 1. 结构体类型定义&#xff1a; 嵌入式学习第十三天&#xff01;&#xff08;const指针、函数指针和指针函数、构造数据类型&#xff09;-CSDN博客 2. 结构体变量的定义&#xff1a; 嵌入式学习第十三天&#xff01;&#xff08;const指针、函数指针和…

KAFKA鉴权设计以及相关探讨

文章目录 1. kafka的鉴权设计2. kafka鉴权应用范围3. kafka鉴权的常用方法3.1 SASL/GSSAPI3.2 SASL/PLAIN3.2.1 配置jaas3.2.2 配置服务启动参数3.2.3 配置server.perperties 4. 参考文档 鉴权&#xff0c;分别由鉴和权组成 鉴&#xff1a; 表示身份认证&#xff0c;认证相关用…

深度学习侧信道攻击的集成方法

深度学习侧信道攻击的集成方法 深度学习侧信道攻击的集成方法项目背景与意义摘要项目链接作者数据集CHES CTF 数据集ASCAD FIXED KEY 数据集ASCAD RANDOM KEY 数据集 代码代码执行神经网络 深度学习侧信道攻击的集成方法 项目背景与意义 在TCHES2020&#xff08;第4期&#x…