最新前端面试题整理
前端技术
- 常见浏览器的内核分别是什么?
IE浏览器：Trident 内核
Firefox浏览器：Gecko内核
Safari浏览器：Webkit内核
Opera浏览器：最初是Presto内核，后来是Webkit，现在是Blink内核
Chrome浏览器：Blink(以前是Webkit内核，现在是Blink内核) - WEB标准以及W3C标准是什么?
1、标签闭合 2、标签小写 3、嵌套正确 4、外部链接css和js 5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为） - 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗?
- 什么是语义化标签？为什么要使用语义化标签？
语义化标签是指用来描述页面内容的 HTML 标签。使用语义化标签可以提高网页的可读性、可访问性和优化搜索引擎排名。
例如，将一个标题用- HTML 元素的 class 和 id 有什么区别？
class 和 id 属性都可以用来为 HTML 元素指定样式，但二者有所区别。一个元素可以有多个 class ，但只能有一个 id，而 id 必须是唯一的，不能重复。- img 的 alt 与 title 有何异同？
alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。- 简述一下 src 与 href 的区别？
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js脚本放在底部而不是头部。
href 是 Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。- get和post的请求的区别？
get在浏览器回退不会再次请求，post会再次提交请求
get请求会被浏览器主动缓存，post不会，要手动设置
get请求参数会被完整保留在浏览器历史记录里，post中的参数不会
get请求在URL中传送的参数是有长度限制，而post没有限制
get参数通过URL传递，post放在Request body中
get参数暴露在地址栏不安全，post放在报文内部更安全
get一般用于查询信息，post一般用于提交某种信息进行某些修改操作
get产生一个TCP数据包；post产生两个TCP数据包 get和post的选择： 1.私密性的信息请求使用post（如注册、登陆）。 2.查询信息使用get- DIV+CSS布局较table布局有哪些优点？
改版的时候更方便只要改 css 文件。 页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。 易于优化（seo）搜索引擎更友好，排名更容易靠前。- 网页制作会用到的图片格式有哪些？
png-8、png-24、jpeg、gif、svg、Webp。
WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。FacebookEbay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 。- 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。- 有哪些方式可以对一个 DOM 设置它的 CSS 样式？
外部样式表，引入一个外部 css 文件。
内部样式表，将 css 代码放在 标签内部。
内联样式（行内样式），将 css 样式直接定义在 HTML 元素内部。- CSS 都有哪些选择器？
基本选择器：
标签选择器
类选择器
ID选择器
通配符选择器
属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）
复杂选择器：
后代选择器（利用空格间隔，比如 div .a{ }）
群组选择器（利用逗号间隔，比如 p,div,#a{ }）
伪类选择器 （如：a:hover{}）
伪元素选择器
注意：伪元素和伪类容易混淆， css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。- CSS 选择器的优先级是怎么样定义的？
基本原则： 一般而言，选择器越特殊（复杂），它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。 复杂的计算方法：
div.test1 .span var 优先级 1+10 +10 +1 ID选择器的权重为100
类或伪类选择器的权重为10
元素或伪元素选择器的权重为1
通用选择器的权重为0
span#xxx .songs li 优先级 1+100 + 10 + 1
使用一个选择器一次，它就会加上相应的权重值，最后比较的就是这些选择器的总权重值。- 看下列代码，
标签内的文字是什么颜色的？
<style> .classA{ color:blue;} .classB{ color:red;} style> <body> <p class='classB classA'> 123 p> body>red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。
16. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden 技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000
17. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 排列顺序: L-V-H-A（link,visited,hover,active）。
18. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
行内元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom (padding-top/padding-bottom)和外边 距的 top/bottom (margin-top/margin-bottom) 都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。
19. 浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
20. 什么是外边距重叠？重叠的结果是什么？
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
21. 如何垂直居中一个浮动元素？/* 方法一：已知元素的高宽 */ #div1 { background-color: #6699FF; width: 200px; height: 200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top: -100px; //二分之一的 height，width margin-left: -100px; } /* 方法二:未知元素的高宽 */ #div1 { width: 200px; height: 200px; background-color: #6699FF; margin: auto; position: absolute; //父元素需要相对定位 left: 0; top: 0; right: 0; bottom: 0; } /* 那么问题来了，如何垂直居中一个<img>?（用更简便的方法。） */ #container{ display: table-cell; text-align: center; vertical-align: middle; }- 请问如何让元素在页面垂直和水平居中？
绝对定位和外边距：通过设置 left: 50%、top:50% 和 margin-left、margin-top 属性为 width 和 height 的一半实现；
flex 布局：通过 container 的 align-items 和 justify-content 属性实现；
Grid 布局：通过 container 的 align-content 和 justify-content 属性实现；
CSS3 transform：通过 translateX 和 translateY 属性将元素水平垂直移动一半宽度和高度实现。 - 如何清除浮动？
利用clear样式 父元素结束标签之前插入清除浮动的块级元素 在有浮动的父级元素的末尾插入了一个没有内容的块级元素div,然后使用clear清除左右两边的浮动 利用伪元素（clearfix） .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility:hidden; } .clearfix { zoom:1; } 利用overflow清除浮动 /*给父元素添加*/ overflow: auto;-
rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！） -
px 和 em 的区别?
px 和 em 都是长度单位，区别是：px 的值是固定的，指定是多少就是多少，计算比较容易。 em 的值不是固定的，并且 em 会继承父级元素的字体大小。 浏览器的默认字体大小都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em，10px=0.625em。 -
CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
弹性盒模型 display: flex；
响应式布局媒体查询 media query；
阴影和反射 （Shadow / Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变和径向渐变 （gradient）
动画和过渡 animation 和 transition；
transform 平移、旋转、缩放等效果 -
display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。 使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。 -
请讲一下盒模型。
css盒模型分两种：IE盒子模型和标准盒子模型。
在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 -
在html中，position取值有哪几种，默认值是什么？
取值：static、relative、fixed、absolute、sticky 默认值：static -
什么是BFC？
BFC全称“块级格式化上下文”，是一种HTML元素渲染的方式，它可以让元素拥有自己的独立容器，并且容器内的子元素不会超出容器的范围。常见的触发BFC的方式包括：float属性、position属性、display属性、overflow属性等。 -
说一下Flexbox（弹性盒子）的适用场景
注意:主要应用场景为移动端布局。 flexbox的布局是一个用于页面布局的全新css3模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩器（flex ，container）来辅助实现。 flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，flexbox可以让元素在容器中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。 -
什么是响应式设计？
响应式设计是一种灵活的布局方式，可以让网页在不同设备和屏幕尺寸下都能够自适应地显示。它通常使用流式布局，通过媒体查询等技术根据视口（viewport）大小来调整元素的大小和位置，以适配各种终端设备。 -
怎样处理 移动端 1px 被渲染成 2px 问题？
meta 标签中的 viewport 属性 ，initial-scale 设置为 1 rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可； meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5 rem 按照设计稿标准走即可； -
怎么减少页面加载时间的方法？
压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作 -
CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
display: none; visibility: hidden; opacity: 0; -
什么是伪元素？它们有什么作用？
伪元素是一种在 CSS 中使用的特殊元素，它们不会创建新的元素，而是通过修改现有元素的样式来实现样式的变化。伪元素的作用是为了在不创建新元素的情况下，对现有元素进行样式的变化。 -
sass和less是什么？为什么要使用它们？
CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。 使用它们是因为：结构清晰，便与拓展、减少无意义的机械劳动、可以轻松实现多重继承。 -
什么是 CSS Modules？它有什么作用？
CSS Modules 是一种将 CSS 文件作为模块导出的技术。使用 CSS Modules 可以将一个 CSS 文件分割成多个独立的模块，每个模块都有自己的样式规则，可以独立地修改和导入。 -
如何使用 Sass 编写高效的 CSS 代码？
Sass 是一种 CSS 预处理器，它可以将复杂的 CSS 代码编译成更易于维护和管理的形式。使用 Sass 可以使代码更加简洁、易于维护和管理。 -
如何使用 JavaScript 操作 CSS3 元素？
答：使用 JavaScript 可以非常方便地操作 CSS3 元素。可以使用 DOM 操作来修改元素的样式，也可以使用 CSS 选择器来选择和操作元素。 -
说一下JS的数据类型
5个简单数据类型（基本数据类型）+ 1个复杂数据类型
基本数据类型：number string boolean null undefiend
复杂数据类型：object function
ES6 中新增Symbol -
null 和 undefined 的区别？
null:空值，使用typeof运算得到 “object”
undefined：当一个声明了一个变量未初始化时，得到的就是undefined。
undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，null值则是表示空对象指针。 -
例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number） 隐式（== 、===） -
“ == ” 和 “ === ” 还有 “ != ” 和 “ !== ”的区别？
== ” 和 “ != ”会做数据隐式类型转换，转换完数据类型在做比较。 “ === ” 和 “ !== ”会先判断数据类型，如果俩者的数据类型不一致直接返回false就不会再去做值的比较了。 -
“ i++ ” 和 “ ++i ”的区别。
i++是先引用i的值而后将i递增1。 ++i是先将i的值加1而后引用它的值。 -
break，renturn，continue三者的区别？
return 在函数体中遇到return语句，则结束函数执行（函数体未执行完部分不再执行），将表达式的值返回到函数调用处。使用return最多只能返回一个值！
break主要用在循环语句或者switch语句中，用来退出整个语句块。 break跳出最里层的循环，并且继续执行该循环下面的语句。 break当用于循环结构时，表示退出其所在的整个循环结构，当前次循环未完成任务及未完成循环次数将不再执行！
continue适用于任何循环控制结构中。作用是让程序立即跳转到下一次循环的迭代。 在for循环中，continue语句使程序立即跳转到更新语句。 在while或者do…while循环中，程序立即跳转到布尔表达式的判断语句。 continue只能用于循环结构，表示结束当前次循环，还会判断条件进行下一次循环。 -
JavaScript中如何查找节点？
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个。
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection 。 -
JavaScript中如何创建节点？
createElement创建元素
createTextNode创建文本节点
cloneNode 克隆一个节点
createDocumentFragment 创建文档碎片，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。 -
JavaScript中修改节点
appendChild
insertBefore
removeChild
replaceChild -
JS执行机制（事件循环）
JS是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
当同步事件执行完毕后，再将异步事件对应的回调加入到与任务队列中等待执行。
任务队列可以分为宏任务对列和微任务对列，当执行栈中的事件执行完毕后，js引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。 -
说一下事件冒泡、事件捕获的区别？
事件冒泡：事件会从最内层的元素开始发生，一直向上传播，也就是从我们的 target 对象，即当前操作的对象，开始一层一层往外走，直到 document，最后是 window 对象。
事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。则是从 window 对象开始，一层层往内走，直到当前 target 对象上。
事实上事件流是先进行捕获再进行冒泡的，我们常常会把事件处理分为三个阶段，即 事件捕获->目标阶段->事件冒泡。 -
说一下事件委托
利用事件冒泡的原理，子元素的事件会冒泡到父元素，可以只给父元素添加事件，通过事件目标判断元素。 优点：节省内存，动态添加的子元素也包含事件。 -
说一下防抖和节流？
防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。比如点击按钮，2秒后调用函数，结果在1.5秒的时候又点了，则会重新计算2秒后在调用函数。
节流：连续发生的事件在n秒内，只执行为一次。比如点击按钮，2秒后调用函数，无论2秒内点击了多少次按钮，只会执行一次。 -
js如何处理防抖和节流?
利用延时器 -
setTimeout与setInterval的区别
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。 -
请解释一下this关键字的原理？
this关键字是JavaScript中的一种上下文语义，代表当前执行的函数对象。但是，当我们调用函数时，如果没有使用明确指定的调用方式（如call、apply、bind），那么this的值可能会产生意外的结果。
在全局作用域下，this指向window对象。而在普通函数中，this指向调用该函数的对象，也就是函数的调用者。在构造函数中，this指向创建的实例对象。 -
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。 除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可或缺的：Cookie的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本地“存储”数据而生。 -
JS为什么会放在下面，CSS为什么放在上面？
浏览器从上到下依次解析html文档。 将 css 文件放到头部， css 文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。 将 javascript 文件放到底部是因为：若将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成 之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。 -
如何实现网页的懒加载？
懒加载是指将网页中的资源延迟加载，当用户滚动或者进行其他操作时再进行加载，可以大大加快页面加载速度。实现方式包括：
IntersectionObserver API：浏览器支持程度较高，可以监听元素是否进入视口范围从而触发加载事件；
vue-lazyload、react-lazyload 等第三方插件：框架式的懒加载插件，使用起来非常方便；
原生 JS 实现：通过监听 scroll 或者 resize 事件，手动确定元素相对视口的位置，从而触发加载事件。
懒加载可以通过以下步骤：
将需要懒加载的图片以data-src属性的方式嵌入到HTML代码中。
使用JS获取所有具有data-src属性的img元素。
监听窗口滚动事件，在窗口滚动时遍历所有未加载的图片元素。
如果图片元素在窗口可见区域内，则将其src属性设置为data-src所对应的值，即可下载图片。 -
ES6中新增的重要特性有哪些？
ES6中新增了许多特性，其中一些最为常用的包括：let和const声明变量、箭头函数、类和对象、模板字符串、解构赋值、默认参数、Rest参数、扩展运算符等等。 -
请简要介绍一下let和const关键字的区别？
let和const都是用来声明变量的关键字，但它们的区别在于作用域和不可变性。使用let声明的变量作用域限制在块级作用域内，而使用const声明的变量是不可变的，即一旦被赋值就不能再修改。 -
说一下JS的作用域
作用域是指变量和函数在哪些地方可以被访问到。在JavaScript中，有全局作用域和局部作用域。每个函数都有自己的作用域，在函数内部定义的变量和方法只能在该函数内部使用。
作用域：作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域。
全局作用域就是js中最外层的作用域
函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套。
Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）。 -
请解释一下JavaScript中的作用域链?
作用域链是指JavaScript查找变量的过程。当查找某个变量时，JavaScript会先在当前作用域查找该变量，如果找不到，则会递归向上查找其外层作用域，直到找到该变量或者到达全局作用域为止。 -
什么是闭包，它有什么作用？
闭包是指一个函数可以访问其外部作用域的变量。在JavaScript中，函数内部创建的作用域会形成一个闭包，该函数可以访问该作用域中定义的变量，即使该作用域已经不再存在。
闭包可以用来隐藏私有变量，模拟块级作用域等。 -
闭包产生的原因是什么？
闭包产生的原因是由于作用域链机制的存在。在 JavaScript 中，所有的函数都是闭包，因为在函数内部定义的变量和函数作用域内的变量相互关联，形成了一个闭合的环路。当函数被返回时，这个闭合的环路仍然保留着，因此可以在函数外部访问和修改这个环路中的变量。 -
闭包有哪些表现形式？
闭包有三种表现形式：
返回值：最常见的一种形式，即函数返回一个值，这个值可以是另一个函数。
函数赋值：一种变形的形式是将内部函数赋值给一个外部的变量。
IIFE：IIFE（Immediately Invoked Function Expression，立即执行的函数表达式）是一种特殊的函数，它可以立即执行并返回一个值。
闭包只在函数内部有效，不能在函数外部使用。因此，在使用闭包时，需要注意函数的作用域和变量的作用域，以避免出现错误。 -
请解释一下箭头函数的优点。
简洁：箭头函数的语法简洁且可读性强。
容易理解：箭头函数的this指向其外层作用域，容易理解和预测。
节省代码：箭头函数可以省略函数体分隔符"{“和”}"以及关键字。 -
请解释一下JavaScript中的原型和原型链?
原型是一个对象，它包含了其他对象共享的属性和方法。在JavaScript中，每个对象都有一个原型对象，它决定了该对象的行为和特征。
原型链是一种机制，它使得每个对象都可以从原型对象中继承属性和方法。当查找某个对象的属性或方法时，JavaScript会先在该对象本身查找，如果找不到，则向它的原型对象中查找，直到到达Object.prototype为止。如果仍然找不到，则返回undefined。 -
原型对象和构造函数有何关系？
原型对象是指一个对象的原型，也就是该对象的类型。在 JavaScript 中，每个对象都有一个原型对象，它包含了一个指向构造函数的指针。通过调用构造函数产生的实例对象，都拥有一个内部属性，指向了原型对象。其实例对象能够访问原型对象上的所有属性和方法。
构造函数是指用来创建对象实例的函数。在类的定义中，通过继承和方法重写的方式，可以定义多个构造函数。每个构造函数都有一个原型对象作为参数，用来在创建对象实例时提供类模板。当调用构造函数时，实例对象的原型对象会被自动设置为构造函数的原型对象，从而使得实例对象能够访问到构造函数中定义的所有属性和方法。
因此，原型对象和构造函数是类的两个基本概念，它们之间的关系是原型对象包含了一个指向构造函数的指针，而实例对象则包含了一个指向原型对象的内部指针。通过调用构造函数来创建对象实例时，原型对象会被自动设置为构造函数的原型对象，从而使得实例对象能够访问到构造函数中定义的所有属性和方法。 -
AJAX 的工作原理以及优缺点。
AJAX（异步 JavaScript 和 XML）是一种无需刷新整个网页的技术。AJAX 工作原理是通过在页面使用 JavaScript 向服务器请求数据，并将返回的数据动态地加载到当前页面中，从而实现页面无需整体刷新即可更新局部内容的效果。
AJAX 的优点是可以提高页面加载速度，增强用户体验，缺点是对搜索引擎不友好。 -
什么是异步请求？
异步请求指的是在请求发送出去之后不需要等待返回结果就可以继续执行后续操作，等到结果返回之后再进行相应的处理。 -
异步请求有哪些常用的实现方式？请举例说明。
常用的异步请求实现方式包括使用XMLHttpRequest、fetch、jQuery.ajax等。例如，使用XMLHttpRequest可以通过设置onload和onerror事件来监听异步请求的返回结果。 -
为什么需要使用异步请求？有哪些优点？
使用异步请求可以避免页面因等待请求响应而卡顿，提高用户体验。另外，异步请求可以在后台进行处理，不会影响前端页面的交互和操作。同时，异步请求还可以降低服务器负载，提高系统性能。 -
为什么使用异步请求可能会导致性能问题？
使用异步请求可能会导致性能问题，因为在同一请求中发送多个数据请求可能会导致页面响应速度变慢。此外，在发送数据请求时，可能会出现数据丢失或重复的情况，这会影响应用程序的性能和可靠性。 -
使用异步请求可能会出现哪些问题？如何解决？
使用异步请求可能会出现请求超时、请求失败、跨域等问题。针对这些问题，可以通过设置请求超时时间、对请求失败做错误处理、使用JSONP或者CORS等方式解决跨域问题等来进行解决。 -
异步请求与同步请求的区别？
异步请求和同步请求之间的区别在于它们对响应的处理方式。同步请求是在服务器处理完请求后立即返回响应，而异步请求是将请求发送到服务器，等待服务器处理完毕后再返回响应。 -
浏览器跨域的问题源自哪里?
浏览器跨域问题是源于浏览器的同源策略。
浏览器的同源策略：一段脚本只能读取来自同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。 协议，域名，端口，三者有其中一个不一致就属于跨域。
URL网址的组成：http://www.baidu.com:80/index.html?username=xxx&password=yyy#hash
协议://域名:端口/资源路径?查询字符串#hash -
如何实现跨域请求？
实现跨域请求需要服务器端进行相关配置，包括：
JSONP：利用
前端框架技术
-
Vue的优点是什么？
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb。
简单易学：国人开发，中文文档，不存在语言障碍，易于理解学习。
双向数据绑定：保留了angular的特点，在数据操作方面更为简单。
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势。
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
虚拟DOM：dom操作是非常耗费性能的，不再使用原生dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式。
运行速度更快：相比较于react而言，同样是操作虚拟dom，就性能而言，vue存在很大优势。 -
为什么使用虚拟DOM(常问)
创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。
Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。 -
什么是单文件组件？它们在Vue中有什么用途？
单文件组件（Single File Component）是Vue.js自定义的一种文件格式，它是一个单独的.vue文件，其中包含了一个组件的三个部分：模板（template）、样式（style）和脚本（script）。
单文件组件的好处是可以更好地组织代码，将一个组件相关的代码都放在同一个文件中，避免在不同文件中搜索和复制代码。此外，它还支持使用CSS预处理器、状态管理、路由等高级功能，使组件更加灵活和可重用。
在Vue中，单文件组件被广泛应用于构建大型Web应用程序，它可以帮助开发者更好地管理和维护复杂的UI组件。 -
vue初始化页面闪动问题，什么原因，怎么解决？
在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样。
通过v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)。 -
v-if和v-for为什么不建议一起使用？
vue2的版本中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；
vue3.的版本中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。
官网明确指出：避免 v-if 和 v-for 一起使用，永远不要在一个元素上同时使用 v-if 和 v-for。
操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不必要的性能消耗；
如果条件在循环外部，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。
如果条件出现在循环内部，可通过计算属性computed提前过滤，然后再进行遍历渲染。 -
Vue修饰符有哪些？
时间修饰符：
stop 阻止事件继续传播
.prevent阻止标签默认行为
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
键盘事件的修饰符：
.enter 回车
.tab
.delete 删除或回退
.esc
.space 空格
.up 上键
.down 下键
.left 左键
.right 右键
v-model的修饰符：
.lazy通过这个修饰符，转变为在change事件再同步
.number 将自动过滤用户的输入值转化为数值类型
.trim 自动过滤用户输入的首位空格
系统修饰符：
.ctrl
.alt
.shift
.meta -
Vue中的data为什么是一个函数？
因为组件是用来复用的，当data是函数时，组件实例化的时候这个函数将会调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不会受影响。
简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似给每一个组件实例创建一个私有的数据空间，保护各自的数据互不影响。 -
的作用是什么?
keep-alive是Vue提供给我们的一个内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
在组件切换过程中，把切换出的组件保存在内存中，防止重新渲染DOM，减少加载时间及性能消耗，提高用户体验。避免左慈重复渲染降低性能。
使用场景：列表页面进入详情页面，我们想保存列表滚动的位置，就可以使用keep-alive保存列表页面的滚动位置。 -
使用Vue获取DOM？
通过 ref 来获取dom元素。ref=“domName” 用法：this.$refs.domName。 -
v-model的原理？
Vue中使用v-model指令来实现表单元素和数据的双向绑定，v-mode其是语法糖。
Vue2中相当于使用v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。
Vue3中在自定义组件上使用v-model时，相当于使用v-bind绑定一个modelvalue属性；v-on指令给当前元素绑定update：modelvalue事件。 -
Vue 3中v-model的变化？
变更：在自定义组件上使用v-model时，属性以及事件的默认名称变了；
变更：v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里；
新增：同一组件可以同时设置多个 v-model；
新增：开发者可以自定义 v-model修饰符。 -
说一下对MVVM模式的理解？
Modal：模型，指的是后端传递的数据。
View：视图，指的是所看到的页面。
ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑。 -
v-if 和 v-show的区别？
在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。
控制手段：v-show隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除；
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 -
分别简述computed和watch的使用场景。
computed是属性计算，它会根据已有的属性值来产生一个新的属性值，并且当计算的属性变化时，在包含这个计算属性的组件中会自动触发重新渲染。当一个属性受多个属性影响的时候就需要用到computed。最典型的案例： 购物车商品结算的时候
watch则是数据监听，当数据变化时执行指定操作，可以用来执行异步或复杂的逻辑。当一条数据影响多条数据的时候就需要用watch。案例：搜索数据 -
Vue 组件间通信有哪几种方式？
Vue 组件间通信可以分为3类：父子组件通信、隔代组件通信、兄弟组件通信。
- props/$emit适用父子组件通信
父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信。 - ref与$parent / $children 适用 父子组件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父/子实例 - EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
4)$attrs/$listeners适用于隔代组件通信
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过v-bind="$attrs"传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过v-on="$listeners"传入内部组件。 - Vuex适用于父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
-
如何避免子组件在父组件尚未挂载时执行操作？
可以通过监听父组件中mounted钩子，在mounted钩子内部将需要传递的数据通过props传递给子组件，这样子组件就可以在挂载后进行操作了。 -
vue-router 路由模式有几种？
vue-router 有 3 种路由模式：hash、history、abstract。
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History API 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。 -
能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？
hash 模式的实现原理：早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 ‘#search’。
hash 路由模式的实现主要是基于下面几个特性：
URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。
history 模式的实现原理：HTML5 提供了 History API 来实现 URL 的变化。其中最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。
history 路由模式的实现主要基于存在下面几个特性：
pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。 -
Vue2 是如何实现数据双向绑定的？
Vue 主要通过以下 4 个步骤来实现数据双向绑定的：
实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。 -
Vue2 框架怎么实现对象和数组的监听？
Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。 -
Vue3.0 和 2.0 的响应式原理区别
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。 -
Vue是如何优化性能的？
Vue优化性能的方法包括：使用v-if替代v-show、使用vue-loader进行组件按需加载、使用keep-alive组件缓存第一次渲染的组件状态、使用异步组件提高首屏渲染速度、使用vue-router懒加载路由组件、使用CDN引入vue.js和vue-router.js等。 -
请解释Vue的单向数据绑定和双向数据绑定的区别？
单向数据绑定是指只能从数据源流向视图的数据绑定方式。当数据源发生变化时，会自动更新相关的视图组件。而双向数据绑定则是指不仅能够在视图中读取数据源的值，还可以在视图中修改数据源的值，修改后数据源的值也会相应地被更新。 -
如何监听Vue的路由变化？
可以通过监听Vue的router实例的afterEach钩子，在路由变化后执行相关操作。 -
Vue中的作用域插槽是什么？
作用域插槽是一种能够让父组件传递“约定的内容”给子组件的方法。通过Vue的$slot作用域插槽可以让父组件将特定的内容，如数据、函数等，“拥有”并传递给子组件使用，从而提高组件的灵活性和可复用性。 -
vue的插槽（slot）主要分三种：
默认插槽，具名插槽，作用域插槽
vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；
用标签表示，父组件可以在这个占位符中填充任何模板代码，比如HTML、组件等，填充的内容会替换掉子组件的标签（替换占位符） -
Vue中的v-for指令有哪些用法？
v-for指令主要用于遍历一个数组或对象，常用的写法有：直接遍历数组或对象的属性值、遍历带有索引的数组或对象、遍历数字序列等，还可以和计算属性和组件配合使用进行复杂的渲染操作。 -
请描述Vue的虚拟DOM？
Vue的虚拟DOM是通过实现一个轻量级的JavaScript对象来描述真正的DOM树，当数据发生变化时，Vue会自动重新渲染虚拟DOM，并将变更后的虚拟DOM和旧的虚拟DOM进行比对，只更新实际改变了的部分，最终再将更新后的虚拟DOM渲染到页面上。 -
什么时候需要用的Vue.nextTick()？
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
2.vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码。 -
Vue和React之间有哪些不同之处？
Vue和React都是响应式UI框架，但Vue更加轻便、易于学习和快速开发，React则更加灵活和可扩展。Vue使用模板引擎和自定义指令来实现功能，而React则使用JSX语法。Vue提供了双向数据绑定，而React则需要手动管理数据流。 -
请描述一下Vue中的依赖注入是什么以及它们的作用是什么？
Vue中的依赖注入指的是Vue实例中通过构造函数将依赖注入到组件中的过程。在Vue中，依赖注入是通过使用构造函数来实现的，构造函数接受一个props参数，这个参数包含组件所需的所有数据和属性。
在Vue中，依赖注入的作用是为了让组件更加灵活和可重用。通过依赖注入，组件可以访问到父组件或者父级组件传递的数据和属性，并且可以在组件内部直接使用这些数据和属性，而不需要在组件内部手动获取这些数据和属性。
依赖注入还可以让组件更加易于测试和维护。通过使用依赖注入，可以更加方便地对组件进行单元测试，而不需要将整个应用程序运行起来才能测试组件的功能。同时，由于组件内部的数据和属性都是通过依赖注入的方式传递的，因此可以更加方便地对组件进行维护和修改。 -
Vue3使用了什么样的编译器？
Vue3使用了现代化的JavaScript编译器TypeScript。 -
Vue3中的响应式系统是什么？
Vue3中的响应式系统是基于Proxy和Reflect实现的，它可以在运行时动态地监测对象属性的变化，并更新视图。 -
Vue3中如何使用toRefs方法将响应式数据对象转换为响应式数据引用？
Vue3中使用toRefs方法将一个响应式数据对象的属性转换为响应式数据引用。 -
Vue3中如何创建一个Vue实例并将其挂载到DOM上？
Vue3中使用createApp方法创建一个Vue实例，并使用mount方法将实例挂载到DOM上。 -
Vue3中如何定义一个组件？
Vue3中使用defineComponent方法定义一个组件，并使用setup方法来编写组件逻辑。 -
Vue3中如何使用provide和inject方法实现全局状态管理？
Vue3中使用provide和inject方法实现全局状态管理。可以在根组件中使用provide方法提供全局状态，在其他组件中使用inject方法注入全局状态。 -
使用ref和ref的difference方法实现异步数据加载？
Vue3中使用ref和ref的difference方法实现异步数据加载。可以在父组件中使用ref引用子组件，并使用difference方法在需要时加载数据。 -
Vue3中使用key绑定循环渲染DOM？
Vue3中使用key绑定循环渲染DOM。可以指定一个key值来唯一标识一个元素，并使用v-for指令循环渲染DOM。 -
使用setup函数编写组件逻辑？
Vue3中使用setup函数编写组件逻辑。可以在setup函数中定义状态、计算属性、方法等，并使用这些属性和方法来处理组件逻辑。 -
setup函数和useStore组合使用？
Vue3中使用setup函数和useStore组合使用来实现组件的响应式状态管理。可以在setup函数中调用useStore钩子函数，并使用useStore提供的属性和方法来管理组件的状态和行为。 -
什么是 Axios？它的作用是什么？
Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。它可以用于发送 HTTP 请求并处理响应，支持 AJAX、拦截请求和响应、转换请求和响应数据等功能。 -
Axios 与其他 HTTP 客户端有什么不同？
Axios 支持浏览器和 Node.js 环境中使用，并且可以处理跨域请求。
Axios 支持取消请求和处理错误。
Axios 可以自动转换 JSON 数据，并且可以设置请求头和响应数据转换器。
Axios 支持拦截请求和响应，可以在发送请求或接收响应之前进行处理。 -
如何配置 Axios？
Axios 的配置可以通过创建一个新的 Axios 实例来实现。在创建实例时，可以设置默认的配置选项，例如 baseURL、请求头、响应数据转换器等。然后，可以使用该实例来发送请求。 -
如何使用 Axios 发送拦截器？
Axios 提供了拦截器，可以在发送请求或接收响应之前对请求或响应进行处理。可以使用以下代码设置 Axios 的拦截器：
axios.interceptors.request.use(config => { // 在发送请求之前进行处理 return config; }, error => { // 对请求错误进行处理 return Promise.reject(error); }); axios.interceptors.response.use(response => { // 对响应进行处理 return response; }, error => { // 对响应错误进行处理 return Promise.reject(error); });- 如何使用 Axios 发送并发请求？
使用 Axios 发送并发请求可以使用 Promise.all 方法。 - 使用 Axios 发送跨域请求？
使用 Axios 发送跨域请求需要在服务器端进行设置。可以通过在服务器端添加 Access-Control-Allow-Origin 响应头来允许跨域请求。 - 您如何处理Vue中的异步数据加载？请描述一下您的解决方案。
在Vue中，异步数据加载通常使用Promise或async/await来实现。在组件中使用异步数据加载时，可以使用props来传递数据，并使用v-if或v-show来控制元素的显示和隐藏。 - ajax、axios、jsonp的理解
jsonp是一种可以解决跨域问题的方式，就是通过动态创建script标签用src引入外部文件实现跨域，script加载实际上就是一个get请求，并不能实现post请求。(其他实现跨域的方法有：iframe,window.name,postMessage,CORS…)
ajax是一种技术，ajax技术包含了get和post请求的，但是它仅仅是一种获取数据的技术，不能直接实现跨域，只有后台服务器配置好Access-Control-Allow-Origin，才可以实现请求的跨域。
axios是通过promise实现对ajax技术的一种封装，axios是ajax，ajax不止axios。 - 什么是Webpack？它在Vue开发中有什么用途？
Webpack是一个静态模块打包器，可以将多个JavaScript文件打包成一个或多个bundle，同时还可以转换和优化代码，例如将ES6语法转换为ES5语法，将CommonJS模块转换为ES6模块等。它在Vue开发中有以下用途：
打包：Webpack可以将Vue组件和库打包成单个文件，方便开发和部署。
转换：Webpack可以将拓展语言（如TypeScript、SCSS）转换为JavaScript，让浏览器能够顺利运行。
优化：Webpack可以对代码进行优化，例如代码分割、懒加载、按需加载等，提高应用程序的性能和加载速度。
插件：Webpack可以通过插件扩展其功能，例如添加新的loader、优化代码、提取公共模块等。
在Vue开发中，Webpack是必不可少的工具，可以帮助开发者更方便地管理和打包应用程序。 - webpack的作用是什么，谈谈你对它的理解？
现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。
所以现代化的前端已经完全依赖于webpack的辅助了。
现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。 - webpack的工作原理?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。 - webpack打包原理
把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。
按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 - webpack的核心概念
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。 - Webpack的基本功能有哪些？
（1） 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等。
（2） 文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等。
（3） 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
（4） 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件。
（5） 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器。
（6） 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过。
（7） 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。 - gulp/grunt 与 webpack的区别是什么?
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。
类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。
webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。 - webpack是解决什么问题而生的?
如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。 - 常用Loader（高频）
raw-loader：加载文件原始内容（utf-8）
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
svg-inline-loader：将压缩后的 SVG 内容注入代码中
image-loader：加载并且压缩图片文件
json-loader 加载 JSON 文件（默认包含）
babel-loader：把 ES6 转换成 ES5
ts-loader: 将 TypeScript 转换成 JavaScript
awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
sass-loader：将SCSS/SASS代码转换成CSS
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
vue-loader：加载 Vue.js 单文件组件 - 常用的Plugin
define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)
ignore-plugin：忽略部分文件
html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
serviceworker-webpack-plugin：为网页应用增加离线缓存功能
clean-webpack-plugin: 目录清理 - Loader 和 plugin 的区别
Loader 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。
Plugin 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。 - 首屏加载空白的解决方案？
单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏。
解决办法：
（1） 优化 webpack 减少模块打包体积，code-split 按需加载
（2） 服务端渲染，在服务端事先拼装好首页所需的 html
（3） 首页加 loading 或 骨架屏 （仅仅是优化体验）
（4） 服务端开启gzip压缩
（5） 打包文件分包，提取公共文件包 - 您如何优化Vue应用程序的性能？请描述一下您的优化方法。
（1） 使用Vue.js的性能工具：Vue.js提供了内置的性能工具来帮助开发人员诊断和分析性能瓶颈。例如Vue Devtools可以帮助开发人员监视Vue实例的依赖关系和更新周期，从而找到性能瓶颈。
（2） 避免在循环中创建组件：在循环中创建组件会导致性能问题，因为每次循环都会创建一个新的组件实例。可以通过使用key属性来复用组件实例，或者使用Vue的v-for指令的渲染方法来避免这个问题。
（3） 避免在组件中频繁修改DOM：在组件中频繁修改DOM会导致性能问题，因为每次修改都需要重新渲染整个组件。可以将需要修改的DOM操作放到Vue的nextTick方法中，这样可以确保在下一个DOM更新周期之前进行修改。
（4） 避免在计算属性中执行耗时操作：计算属性是Vue中的计算属性，如果计算属性中执行耗时操作会导致性能问题。可以将耗时操作放到计算属性之外的函数中执行，或者使用Vue的watch属性来监听数据变化，从而避免在计算属性中执行耗时操作。
（5） 使用Vue的异步组件：异步组件可以延迟加载组件，从而减少初始加载时间。可以使用Vue的异步组件来加载组件，这样可以减少初始加载时间，提高应用程序的性能。
（6） 使用Vue的组件缓存：Vue的组件缓存可以避免重复渲染相同的组件，从而提高应用程序的性能。可以使用Vue的key属性来指定缓存的key，从而避免重复渲染相同的组件。
- HTML 元素的 class 和 id 有什么区别？