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…

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 实现转发请求重定向至最优服…

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…

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…

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

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

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转换器连接示…

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指针、函数指针和…

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

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

安卓线性布局LinearLayout

<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_width"match_parent"android:…

如何用MapTalks IDE来发布网站?

简介 MapTalks IDE 全称 MapTalks集成设计环境&#xff08;Integrated Design Environment&#xff09;&#xff0c;是由MapTalks技术团队开发的新一代web地图设计软件。 通过MapTalks IDE&#xff0c;您可以自由的创建二维和三维地图&#xff0c;在其中载入或创建地理数据&a…

【数据结构与算法】之哈希表系列-20240130

这里写目录标题 一、383. 赎金信二、387. 字符串中的第一个唯一字符三、389. 找不同四、409. 最长回文串五、448. 找到所有数组中消失的数字六、594. 最长和谐子序列 一、383. 赎金信 简单 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不…

【Midjourney】新手指南:命令

1./ask 向Midjourney提问&#xff0c;不过问题和回答都是英文的&#xff0c;例如&#xff1a; 2./blend 将两张图片合并为一张 ​ 3./describe 上传一张图片&#xff0c;Midjourney会生成四组该图片相关的关键词&#xff0c;可以使用这些关键词再生成图片。 ​ 4./turbo …

力扣 55.跳跃游戏

思路&#xff1a; 从后往前遍历&#xff0c;遇到元素为0时&#xff0c;记录对应的下标位置&#xff0c;再向前遍历元素&#xff0c;看最大的跳跃步数能否跳过0的位置&#xff0c;不能则继续往前遍历 代码&#xff1a; class Solution { public:bool canJump(vector<int>…

毕业设计过程学习

传统的目标检测算法主要通过人工设计与纹理、颜色和形状相关的特征来进行目标区域特征的提取。随着深度学习和人工智能技术的飞速发展&#xff0c;目标检测技术也取得了很大的成就。早期基于深度学习的目标检测算法的研究方向仍然是将目标定位任务和图像分类任务分离开来的&…

uni-app在hbuilderx打开微信开发工具运行

一、运行设置配置微信开发者工具路径 运行-运行到小程序模拟器-运行设置 配置微信开发工具的安装路径&#xff08;可浏览文件位置选择&#xff09;&#xff1b;web服务器端口号在第二步骤获得&#xff1b; 二、打开微信开发者工具设置-安全设置 打开服务端口开关&#xff0…