最新前端面试题（附答案）
码字不易，各位大佬点点赞呗
目录
HTML
一、说一下哪些是块级元素？哪些是行块级元素？哪些是行级元素？
二、src 与 href 的区别？
三、常用的选择器有哪些？id 和 class 的区别？并说明 css 的优先级。
四、css 哪些属性是可以被继承的？
五、什么是盒模型？盒模型的组成。
六、清除浮动的方法有哪些？
七、div 中不设高度，在里面添加一张图片，box 高度会自动撑开，但是 div 会有 2-4px 像素的误差,怎么解决？(行块元素有 2-4 像素的误差，什么原因造成的？怎么解决？)
八、两个宽度为 50%并且边框为 1px 的 div 并排显示（怪异盒子）
九、说出四种实现水平垂直居中的方式？
十、说一下定位有几种？有什么区别？
十一、CSS 画一个三角形？
十二、说说你对行高的理解 line-height？
十三、你是怎么处理浏览器的兼容性?
十四、h5 新特性？
十五、CSS3 新特性？
16、什么是页面的回流和重绘？如何避免页面重排和重绘带来的性能问题？
十七、移动端点击事件会有多少秒的延时?什么原因造成的?如何解决?
十八、移动端 0.5 像素如何实现？
JS
1.什么是 js？js 是单线程还是多线程？
2.数据类型有哪些？怎样判断数据类型？
3.在 js 中，=、==、===有什么区别？
4、i++ 和 ++i 的区别？
5、while 和 do while 有什么区别？
6、break 和 continue 的区别？
7、九九乘法表
8、知不知道递归函数？递归函数经常用吗？递归函数的缺点是什么？
9、用过闭包函数吗？什么是闭包函数？闭包函数的优缺点？内存泄漏，js 回收机制？
10、如何避免闭包引起的内存泄漏？哪些操作会造成内存泄漏？
11 什么是命名函数？匿名函数？递归函数？回调函数？函数表达式？
12 for 与 forEach 的区别？
13 什么是全局变量？什么是局部变量
14 什么是预解析？
15 请说一下数组常用的方法有哪些？
16 请说获取 dom 方法有几种？
17 dom 操作的方法？
18、获取设置类名的方法？
19 innerHTML 和 innerText 的区别？
20 js 获取或者设置属性的方法
21 怎样提升浏览器的加载速度
22 什么是事件冒泡？怎样阻止事件冒泡？
23 事件绑定，解绑的方法
24 什么是 window 对象？什么是 document 对象？
25 for in 和 for of 有什么区别？for of 为什么遍历对象会报错？
26 说一下你对 this 的理解：
27 用过深拷贝，浅拷贝吗？深拷贝和浅拷贝的区别？如何实现深拷贝？浅拷贝？JSON 深拷贝的弊端及解决方案。
28前端的三个层次
29 什么是面向对象？面向对象的特点？
30 什么是构造函数？构造函数帮我们干了哪两件事？
31 面向对象的继承方式？
32 什么是异步什么是同步：
33知道promise对象吗？promise有几种状态？什么情况下进 入catch，封装过接口吗？
34、http定义？http的三次握手？
35 请求的方式有哪些？post和get的区别？
36 常见的状态码:
37 创建ajax的步骤
38 mouseover与mouseenter的区别？
39 什么是防抖？什么是节流？
41、var let const的区别？
42、es6中如何实现数组去重？
43、es6的新特性
44 谈谈async/await 的使用方式和场景
45 .箭头函数有什么作用及实际应用场景?
46.class 类的如何实现继承,简单实现?
47 什么是跨域？解决跨域？
48 事件循环机制
49 宏任务和微任务?
50图片的懒加载
51 懒加载原理
52 懒加载思路及实现
53、常用方法
vue2
1、什么是MVVM，MVC，请简单的说一下？
2、vue的特点与功能？
3、vue的双向绑定的原理，vue的响应式原理，数据的响应式？
4、vue中的修饰符有哪些？
5、vue中常用的指令有哪些?
6、v-if和v-show的区别？
7、v-for中的key的作用？
8、v-for与v-if能在一起使用吗?
9、vue中阻止事件冒泡的方法？
vue阻止默认行为方法？
10、什么是生命周期（钩子函数）？生命周期有什么作用？说一 下生命周期有哪些？第一次加载页面会触发几个生命周期（钩子 函数）？
11、什么是计算属性computed，什么是监听器watch？两者的 区别，使用场景?
12、什么是过滤器？
13、正常情况可以监听的到
14、请说一下父传子，子传父？父传子，子传父的传值方式？ （组件的通讯方式有哪些？）
15、vue组件为什么要return一下变量？为什么data是一个函 数？
16、父子组件调用加载顺序？
17、单页面开发与多页面开发的优缺点。
18、怎么解决组件的样式污染？
19、vue-router有两种模式：hash和history两种模式
20、非父子传参方式
21、$router与$route的区别？
22、路由跳转方式，以及路由传值的方式。传值两种方式的区别？
23、什么是路由守卫？路由守卫有几种？路由中的钩子函数？
24、vue怎样实现缓存？vue项目列表跳转详情再返回列表还在原 位置
25、vue的混入？
26、知道vuex吗？vuex有几种状态？分别是干什么的？
27、vuex的工作流程
28、怎么给vue中data添加一个属性
29、vue虚拟dom？
30、 keep-alive 组件有什么作⽤？
小程序
1、用过小程序吗?xxx问你问题把你难住了?
2、小程序生命周期？
3、小程序跳转
4、获取数据变量
5、小程序的点击事件？阻止事件冒泡
7、微信小程序记住下一次登录
8、小程序支付如何实现？
9、小程序的发布流程（开发流程）
10 页面之间的通讯
11 微信登录
12 微信支付
uniapp
1、简单说一下uniapp?
2、uniapp生命周期？
3、uniapp优缺点
4、小程序、uni-app中的本地数据存储和接收？
5、简述 rpx、px、em、rem、%、vh、vw的区别
6、js、vue、uni-app、小程序的页面传参方式区别
7、uniapp解决跨端兼容问题？
8、uniapp适配刘海屏
vue3
1、vue3.0响应式原理?
2、vue3的生命周期有几个?与vue2生命周期的区别?
3 组合式api方法?
4 vue3.0优点？
5 vue2.0和3.0区别
6 Vue 3.0 所采用的 Composition Api 与 Vue 2.x 使用的 OptionsApi 有什么区别？
7、了解hook函数吗？
8. v-if与v-for在vue3.0中的变化？
TypeScript
1、ts中的数据类型有哪些？
2、什么是联合类型？什么是元组？什么是枚举?什么是接口？什么是泛型?
HTML
一、说一下哪些是块级元素？哪些是行块级元素？哪些是行级元素？
1、块级元素： ①、h1 - h6：标题标签 ②、p：段落标签 ③、hr：水平线标签 ④、ul + li：无序列表 ⑤、ol + li：有序列表 ⑥、dl + dt / dd：自定义 列表 ⑦、div：布局容器 ⑧、table：表格 ⑨、from：表单
2、行块级元素： ①、input：表单元素 ②、img：图片标签
3、行级元素： ①、a：超链接 ②、span：修饰文本标签 ③、strong or b：字体加粗 ④、em or i：字体倾斜 ⑤、ins or u：下划线 ⑥、del or s：删除线 ⑦、label：表单元素 ⑧、sub：下标 ⑨、sup：上标
二、src 与 href 的区别？
1、href 表示文件的来源地址，在 link 和 a 标签上使用。href 引用的内容是与页面有关联的引用。
2、src 表示文件的录入地址，在 img 和 script 标签上使用。
三、常用的选择器有哪些？id 和 class 的区别？并说明 css 的优先级。
1、常用的选择器：标签选择器、类名选择器、id选择器、通配符选择器、序选择器、交集选择器、并集选择器、子代选择器、后代选择器、下一个兄弟选择器
2、id 是唯一的，一个页面只能有一个id；class 不是唯一的，多个标签可以用相同的类名，一个标签可以用多个类名
3、行内式 > 内嵌式 > 链入式；不同 类型的选择器：!important > id选择器 > 类名选择器 > 标签选择器
四、css 哪些属性是可以被继承的？
1、字体颜色可以被继承
2、以 font 开头的可以被继承
3、以 text 开头的可以被继承
4、以 line 开头的可以被继承
五、什么是盒模型？盒模型的组成。
盒模型从外到内以此是，margin 外边距，border 边框，padding 内边距，内容的宽高
六、清除浮动的方法有哪些？
1、直接给父级添加高度
2、隔墙法，但是不推荐使用，产生多余代码
3、超出隐藏，overflow:hidden
4、公共类，伪类清楚。
类名:after{
伪类元素内容为空 content:"";
转为块元素 display:block;
清除左右浮动 clear:both;
}
七、div 中不设高度，在里面添加一张图片，box 高度会自动撑开，但是 div 会有 2-4px 像素的误差,怎么解决？(行块元素有 2-4 像素的误差，什么原因造成的？怎么解决？)
1、行块元素垂直对齐基准导致父级产生2-4像素误差，行块元素不是绝对垂直居中；
2、解决办法：
方法1：改变行块元素的垂直居中方式
方法2：改变他的display转为块元素
八、两个宽度为 50%并且边框为 1px 的 div 并排显示（怪异盒子）
将外边框改为内边框，box-sizing:border-box;
九、说出四种实现水平垂直居中的方式？
1、设置绝对定位四个属性为零，matgin:auto
2、left:50%;margin-left:负数宽度的一半 top:50%;margin-top:负数高度的一般
3、设置绝对定位， left:50%;top:50%; transform:translate(-50%,-50%);
4、设置display: flex; /*水平居中*/ justify-content: center; /*垂直居中*/ align-items: center;
十、说一下定位有几种？有什么区别？
1、相对定位，绝对定位、固定定位。
2、区别：
①、相对定位：以自己为参考点，不脱离标准文档流，原来的位置被保留 ②、绝对定位：以距离自己最近的有相对定位的祖辈为参考点，脱离标准文档流，原来的位置不被保留
③、固定定位：以浏览器为参考点，脱离标准文档流，原来的位置不被保留
粘性定位：不完全脱离标准文档流position: sticky;
十一、CSS 画一个三角形？
代码： width: 0; height: 0; border: 20px solid; border-color:rgba(0,0,0,0) rgba(0,0,0,0) pink rgba(0,0,0,0);
实现方式： 设置宽高为0，然后设置边框为20px，边框类型为solid；上右下左四个边框的颜色，设置其中三个为透明，一个不透明，即可实现三角形
十二、说说你对行高的理解 line-height？
行高是指行与行之间的距离 主要作用单行文本居中:把高度的值设置为line-height值，可以实现单行文本居中，其实也可以把高度删掉。多行文本居中:需要配合padding使用
十三、你是怎么处理浏览器的兼容性?
1、书写样式的时候加上浏览器的前缀
-moz- 火狐的前缀
-webkit- 谷歌的前缀
-o- opera
-ms- ie浏览器
2、降级处理（当前写法不支持，那就换一个相对来说比较low的写法）
3、用js逻辑处理
十四、h5 新特性？
1、h5新语义元素 2、新增表单功能 3、本地存储 4、SVG 5、canvas 6、地理定位
十五、CSS3 新特性？
新增表单，属性，相邻兄弟等选择器 新增背景渐变、盒阴影、边框、过渡、平移、旋转、动画、3d等
16、什么是页面的回流和重绘？如何避免页面重排和重绘带来的性能问题？
回流：当前元素改变了自身的宽高，布局，显示或者隐藏，或者元素内容结构发生了变化，需要重新构建构建页面的时候就是回流；
重绘：重绘是在一个元素的外观被改变，但是没有改变页面的布局的情况下，比如改变了背景颜色，visibilit。
2、解决措施：
尽量减少对 DOM 的操作，特别是对频繁操作的元素。
避免使用递归，尽量使用循环。
使用缓存，尽量避免重复计算。
使用 CSS3 的动画和过渡，避免使用 JavaScript 来控制动画。
尽量使用相对定位，避免使用绝对定位。
尽量使用轻量级的元素，如 div 和 span，避免使用重量级的元素，如 table 和 form。
当你要在 JavaScript 中操作 DOM 时，应该尽量避免使用过多的 DOM 操作，特别是对频繁操作的元素。这是因为，每次 DOM 操作都会导致浏览器进行重排和重绘，这会消耗大量的 CPU 资源，导致页面性能下降。
十七、移动端点击事件会有多少秒的延时?什么原因造成的?如何解决?
为了对早期普通网页更好的体验，iphone设计了双击放大显示的功能--这就是300ms延迟的来源：如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。
设置不能缩放：user-scalable=no， 不能缩放就不会有双击缩放操作。
设置显示宽度：width=device-width。 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
十八、移动端 0.5 像素如何实现？
1、给目标元素添加一个伪元素before或者after，并设置绝对定位，给伪元素添上1px的边框。设置伪元素的宽高为目标元素的2倍，缩小0.5倍transform属性中的scale，使用border-box把border包进来
2、给元素添加背景渐变，设置元素的50%为颜色，50%为透明，高度为1px
十九、BFC是什么
BFC (Block formatting context) 直译为 "块级格式化上下文"。它是一个独立的渲染区域，
只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区
域外部毫不相干。
布局规则
1、内部的 Box 会在垂直方向，一个接一个地放置
2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠
3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往
右的格式化，否则相反)。即使存在浮动也是如此
4、BFC 的区域不会与 float box 重叠
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6、计算 BFC 的高度时，浮动元素也参与计算
哪些元素会生成 BFC
1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不为 visible
JS
1.什么是 js？js 是单线程还是多线程？
简单的来说js就是运行在浏览器中的解释性语言,脚本语言,是单线程
2.数据类型有哪些？怎样判断数据类型？
1、基本数据类型： ①、字符串：string ②、数字：number ③、布尔：boolean
2、复合引用数据类型： ①、对象：object ②、数组：array ③、函数：function
3、特殊数据类型 ①、空：null ②、返回值为空：undefined ③、不是一个数字：NaN
4、检测数据类型的方法： ①、检测除数组外的数据类型：typeof ②、检测数组数据类型：Array.isArray() ③、检测不是一个数字：isNaN
3.在 js 中，=、==、===有什么区别？
1、=：表示赋值 2、==：只比较大小，不比较数据类型 3、===：既比较大小，又比较数据类型
4、i++ 和 ++i 的区别？
1、i++：先取i的值，作为表达式i++的结果，然后在对i进行+1 【先赋值后加一】 2、++i：先取i的值进行+1,然后取i的值作为++i的表达式的结果 【先加一后赋值】
5、while 和 do while 有什么区别？
1、while是条件成立才执行循环，条件不成立不执行循环
2、do while是先执行一次循环，再判断条件是否成立，成立则执行循环体，不成立不执行循环体
6、break 和 continue 的区别？
1、break：终止当前循环，看到break，后面的呢代码就不执行了 2、continue：跳出当前循环，继续执行下一循环
7、九九乘法表
for (let i = 1,i < 9 , i++){
for（let j = 1 , j < i ,j++ ）{
document.write(i + "*" + j + "=" + i * j + " ");
}
}8、知不知道递归函数？递归函数经常用吗？递归函数的缺点是什么？
1、自己调用自己的函数就是递归函数。
2、公司明文规定禁止使用递归函数。
3、递归函数必须等最后一次的结果出现才能完成逻辑执行，违背了内存管理机制。
9、用过闭包函数吗？什么是闭包函数？闭包函数的优缺点？内存泄漏，js 回收机制？
1、闭包就是能够读取函数内部变量的函数，定义在函数的内部的函数
2、优点：可以在全局重复使用变量并且不会造成变量污染
3、缺点：闭包容易造成内存泄漏，比较消耗内存，内存消耗过多，会导致浏览器很卡。
4、内存泄漏：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
5、JS的回收机制：JavaScript垃圾回收的机制很简单：找出不使用的变量，然后释放掉其占用的内存。js中最常用的垃圾回收方式就是标记清除。比如在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。
10、如何避免闭包引起的内存泄漏？哪些操作会造成内存泄漏？
1、如何避免闭包引起的内存泄漏？
①、注意程序逻辑，避免死循环
②、减少不必要的全局变量，在函数最后将不使用的变量赋值为空
③、避免创建过多的对象
2、哪些操作会造成内存泄漏？
①、意外的全局变量
②、脱离DOM的元素引用
③、未清除的定时器
④、闭包函数
⑤、console.log
11 什么是命名函数？匿名函数？递归函数？回调函数？函数表达式？
1、命名函数：有名字的函数
2、匿名函数：没有名字的函数
3、递归函数：函数中自己调用自己的函数就是递归函数
4、回调函数：被作为参数传递的函数是回调函数，并且可以访问另一个函数内部的变量 5、表达式：带有变量的函数，用变量调用的函数
6、构造函数：用 new 关键字来调用的函数就是构造函数
7、闭包函数：闭包就是能够读取函数内部变量的函数，定义在函数的内部的函数
12 for 与 forEach 的区别？
forEach 不能使用 break 没有返回值。 return 返回的是 undefined
13 什么是全局变量？什么是局部变量
1、全局变量：在函数体外部声明的变量就是全局变量，省略 var 声明的变量也是全局变量。全局变量在函数体内外都可以使用。
2、局部变量：在函数体里面定义的变量叫做局部变量，只能在函数体内部使用，函数体外部不能被使用。
14 什么是预解析？
在预解析中，变量的提升，只会在当前作用域中提升，提升到当前作用于的最上方。函数的变量只会提到函数作用域的最前方。
15 请说一下数组常用的方法有哪些？
1、push()：添加到数组的最后
2、splice()：删除指定的元素，并在删除的位置添加元素
3、String()、toString()：将数组转为字符串
4、join()：拼接字符串，将数组用什么符号转为字符串
5、split()：将字符串转为数组
6、shift()：删除数组的第一项
7、pop()：删除数组的最后一项
8、unshift()：将内容添加到数组的开头
9、sort()：正序排序，从小到大
10、concat()：合并数组
11、reverse()：反转
12、indexOf()：方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1
16 请说获取 dom 方法有几种？
1、*document.getElementById("id选择器")：获取单个元素
2、document.getElementsByTagName("标签名")：获取的是一组数据，伪数组，注意s
3、document.getElementByName("name名称")：获取的是一组数据，伪数组。注意：s 4、document.getElementsByClassName("类名选择器")：获取的是一组数据，伪数组。注意：s
5、*document.querySelector("选择器")：通过选择器获取单个节点
6、*document.querySelectorAll("选择器")：通过选择器获取多个节点。伪数组，可以通过下标取值。
7、parentNode：父节点 8、children：子节点 9、兄弟节点、事件委托等
17 dom 操作的方法？
1、appendChild：添加节点到最后
2、insertBefore：在某个位置插入
3、removeChild：删除子节点
4、replaceChild：修改子节点
5、cloneNode：复制克隆节点
18、获取设置类名的方法？
1、*className：获取或者设置类名，其中设置的类名会覆盖原来的类名。所以设置类名的时候要把之前的类名也加上
2、.classList.add("")：添加类名
3、.classList.remove("")：移除类名
19 innerHTML 和 innerText 的区别？
1、相同点：都可以获取或者设置内容
2、不同点： ①、innerHTML：以代码的形式设置/获取内容 ②、innerText：以文本的形式设置/获取内容
20 js 获取或者设置属性的方法
1、通过dom进行获取或者设置属性.dom.属性
2、通过getAttribute()：获取自定义属性
3、通过setAttribute()：设置自定义属性
21 怎样提升浏览器的加载速度
1、文件的外部引入
2、减少冗余代码，将代码进行封装
3、使用事件委托代替dom获取，减少dom操作
4、图片的懒加载
5、压缩文件
22 什么是事件冒泡？怎样阻止事件冒泡？
1、两个div两两嵌套，都添加点击事件，我点击里面的div的时候，外面的div事件也会触发
2、js中阻止事件冒泡的方法：e.stopPropagation()；jq中阻止事件冒泡的方法return false
23 事件绑定，解绑的方法
1、addEventListener：事件绑定
2、removeEventListener：事件解绑
24 什么是 window 对象？什么是 document 对象？
1、window对象也就是BOM，也就是浏览器对象：window对象封装了窗口标题，工具栏按钮，地址栏，状态栏等等。都是window的成员对象。（window就是BOM也就是浏览器） 2、document对象也就是DOM，代表的是html整个的文档，可以用来访问网页中的所有元素，dom属于window对象的一部分。（document就是dom，也就是网页）
25 for in 和 for of 有什么区别？for of 为什么遍历对象会报错？
1、for in遍历数组得到的是索引，遍历对象得到的是属性，不能遍历map对象；
for of遍历数组得到的是值，遍历对象会报错。
2、for of因为没有引入iterable，需要加上Object.keys()，Object.values()才能使用，遍历map对象得到的是属性和值。
26 说一下你对 this 的理解：
1、在浏览器中，在全局范围内，this指向的是window
2、在普通函数中，this指向的是调用者
3、在构造函数中，this指向的是new出来的那个新对象
4、call、apply、bind中的this被强绑定在那个对象中
call：
立即执行函数。
第一个参数是this的值，后续参数依次传递。
apply：
立即执行函数。
第一个参数是this的值，后续参数以数组形式传递。
bind：
不立即执行函数，返回一个新函数。
第一个参数是this的值，可预设后续参数。
新函数的this指向固定。
5、在箭头函数中this属于当前所处的最大的对象，而不是执行时的对象。箭头函数没有自己的this，它的this是继承而来；默认指向在定义它时所处的对象（宿主对象），此处指父级作用域，而不是执行时的对象。
27 用过深拷贝，浅拷贝吗？深拷贝和浅拷贝的区别？如何实现深拷贝？浅拷贝？JSON 深拷贝的弊端及解决方案。
1、深拷贝：就是b复制了a，当修改a的时候，b不会随着a的变化而变化，拥有独立的内存。将数据中的所有数组拷贝下来，对拷贝之后的数据进行修改不会影响到原数据。
2、浅拷贝就是b复制了a，当修改a的时候，b中的子元素不会随着a的变化而变化，但是b中的子对象中的元素会随着a的变化而变化。原数据和复制后的数据的第一层不会改变，第二层或者深层会改变
3、浅拷贝的方法： ①、slice ②、concat ③、es6剩余运算符
4、深拷贝： ①、JSON.parse()、JSON.stringify() ②、jq的extend方法 ③、通过递归去拷贝所有的层级
5、JSON弊端
①、如果obj里面存在时间对象，通过JSON方法会导致时间对象变成了字符串。
②、如果obj里面有RegExp、Error对象，转化后的结果是空对象。
③、如果obj里面有函数，undefined，则序列化的结果会把函数，unedfined丢失。
④、如果obj里面有NaN，Infinity和-Infinity，则序列化的结果会变成null。
⑤、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
⑥、如果对象中存在循环引用的情况也无法正确实现深拷贝。
6、解决：递归实现深拷贝
28前端的三个层次
通常指的是结构层、表示层和行为层
29 什么是面向对象？面向对象的特点？
1、面向对象是一种编程思想，是由属性和方法组成的。
2、面向对象的特点：封装、继承、多态。
30 什么是构造函数？构造函数帮我们干了哪两件事？
1、用new关键字调用的函数称为构造函数
2、 ①、帮我们创建了一个空对象 ②、将结果返回出去
31 面向对象的继承方式？
1、call或apply方法 2、原型链prototype 3、利用空对象作为中介
32 什么是异步什么是同步：
同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，只有接收到返回的值或消息后才往下执行其他的命 令。 具有等待功能
异步，执行完函数或方法后，不必等待返回值或消息，就可以直接执行下一个命令。不用等待
33知道promise对象吗？promise有几种状态？什么情况下进 入catch，封装过接口吗？
promise对象，处理异步函数的，就是将异步改成同步执行。
pending(未待定状态)
fulfilled(成功状态)
rejected(失败的状态)
方法：then 、catch、 finally
当状态是失败的时候，会触发then的第二个参数, 实际开发中一般使用catch单独处理失败的情况，而不使用then 的第二个参数
promise 三个常用静态方法
Promise.all()
Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例，当所有Promise实例都变为fulfilled状态后，才返回新的Promise实例；其中任何一个Promise实例变为rejected状态，都会直接返回rejected状态的Promise实例。
Promise.race()
Promise.race()方法同样是将多个Promise实例包装成一个新的Promise实例，但是只要有一个Promise 实例状态发生变化，就将新的Promise实例的状态改变，且终值由第一个完成的 Promise提供
Promise.any()
Promise.any()方法会对多个Promise进行竞争，直到有一个Promise进入Fulfilled状态，Promise实例返回该Promise的结果。如果所有Promise都进入Rejected状态，则返回失败状态，其中维护Promise及其状态的任何提示返回数组都是必需的。
34、http定义？http的三次握手？
http是一种网络传输协议，浏览器作为http客户端通过url向http服务器发起请求，服务器接收的请求向客户端发送响应信息
1 客户端向服务端发送请求
2 服务端接收到请求需要进行核对操作，发送的请求服务端能不能接收到，如果接收到，就向客户端返回接收到的请求信息
3 客户端拿着服务器返回成功接收到的这个信息再去向服务器发送请求，两者才能建立联系
35 请求的方式有哪些？post和get的区别？
delete put post get等等等
1 安全性问题：
get请求参数会被拼接到地址栏上，信息会暴漏
post请求参数不可见
2 数据传输量：
get有长度限制的
post没有
3 缓存问题
get数据会被缓存
post是不会
36 常见的状态码:
**200 请求成功**
301 资源被永久转移到其他url
**400 客户端请求语法错误**
401 发送请求需要被认证
**403 请求的资源被服务器拒绝**
**404 表面服务器无法找到指定的资源**
**500 表示服务端在执行请求的时候发生了错误**
**502 服务器网关出现了错误**
503 服务器处于停机维护 现在无法处理请求
37 创建ajax的步骤
1 创建XMLHttpRequest对象，也就是创建一个异步调用对象
2 创建一个http请求，并指定请求方法 （建立连接）
3 发送http 请求
4 获取返回的数据
38 mouseover与mouseenter的区别？
mouseover:鼠标指向的时候触发,当鼠标指向被选元素及其后代元素时触发，会产生事件冒泡
mouseenter:鼠标指向的时候触发,当鼠标指向被选元素时触发，不会产生事件冒泡
39 什么是防抖？什么是节流？
防抖就是多次执行变为最后一次执行，实现函数的防抖：延时器
节流就是多次执行变成每隔一段时间执行。实现函数节流的方法：定时器和时间戳
40、sessionStorage，localStorage，cookie区别：
共同点：都是保存数据
① sessionStorage生命周期是当前窗口或者标签页，一旦窗口或者标签页关闭，所有的存储的数据也会被清空
② localStorage生命周期是永久的。除非用户手动清除信息，否则这些信息永久存在
③ cookie是浏览器与服务器之间来回传递，cookie浏览器关闭数据一直保存，只在过期时间内有效，可以设置过期时间。
cookie存储数据不能超过4k, sessionStorage，localStorage存储的数据可以是5M，甚至更多。
41、var let const的区别？
1 var声明的变量属于全局变量，属于window,var声明的变量可以声明多次，可以修改，并且var声明的变量存在变量的提升
2 let只在块级作用域中使用即{}，不存在变量提升，let只能声明一次不能重复定义，let声明的变量存在暂时性死区。
3 conts声明的是一个只读常量，声明之后不允许改变，而且必须初始化，const定义的基本数据是不可以改变的，但是定义的对象或者是数组可以通过下标或者属性来修改
为什么const可以修改对象或者数组？
const指针指向的地址是不可以改变的，但是地址的内容是可以改变的
42、es6中如何实现数组去重？
用new Set(数组)实现去重 ，再使用 Array.from() 将set类型的类数组转回标准数组
怎样将伪数组转为数组？
Array.from或者剩余运算符去将类数组转成数组
然后用数组的方法去实现逻辑
43、es6的新特性
新的声明方式
结构性赋值，剩余运算符
数组的遍历方式for of，find等方法
箭头函数
symbol，set去重，map方法，字符串模板，promise，模块化
class和extends,super调用父类的方法
map方法：
callback：生成新数组元素的函数，可以接收三个参数：
currentValue：数组中正在处理的当前元素。
index（可选）：数组中正在处理的当前元素的索引。
array（可选）：map 方法被调用的数组。
thisArg（可选）：执行 callback 函数时 this 的值。
44 谈谈async/await 的使用方式和场景
async 是用来修饰函数的声明, 使用async修饰的函数会变成一个异步函数.可以使用then来接收参数
await 用来修饰函数的调用, 被 await 修饰的函数返回一个promise 异步对象, 使用 await 修饰后, 就会将 promise 异步对象转 换成一个同步操作。其中直接提取resolve里面的值
45 .箭头函数有什么作用及实际应用场景?
箭头函数的作用：
①箭头函数的语法比函数表达式更简洁。
②箭头函数可以解决this指向问题。箭头函数不会创建自己的this，它只会从自己的作用域链向上一层继承this。
箭头函数的使用场景：
①简单的函数表达式，内部没有thi引用，没有递归，事件绑定，解绑定。
②需要调用this，且this指向和上一层作用域链保持一致时。如保证指向vue实例对象。
46.class 类的如何实现继承,简单实现?
子类继承父类|语法：class 子类 extends 父类，在子类的构造方法中使用super调用父类的构造方法。
47 什么是跨域？解决跨域？
跨域指的是：浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制
解决：①设置跨域代理、在vue中的config.js中proxy设置
②jsonp
③后端处理
④借调
48 事件循环机制
js是单线程语言，一次只能完成一个任务，如果同时完成多个任务怎么办？js把任务分为同步和异步任务，
把所有的同步放到主线程上去执行，把所有的异步任务放到事件队列里去，
当所有的同步任务都执行完之后，去事件队列中看看有没有没有执行的异步任务，如果有把需要先执行的异步任务拉到主线程上去执行，当这个任务执行完后，再去事件队列里看有没有没完成的
任务，如果有再把任务拉到主线程去执行，这样就形成一个事件循环。
49 宏任务和微任务?
浏览器的事件循环（event loop）中分成宏任务和微任务。JS 中任务分成同步任务和异步任务。
宏任务
JS 中主栈执行的大多数的任务，例如：定时器，事件绑定，ajax，回调函数，node中fs操作模块等就是宏任务
微任务
promise, async/await, process.nextTick等就是微任务。
50图片的懒加载
懒加载也就是延迟加载。有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到
1000并发，即同时有1000个人访问，就会产生1个G的带宽。
51 懒加载原理
一张图片就是一个 标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给 的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
52 懒加载思路及实现
实现懒加载有四个步骤，如下：
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片
53、常用方法
转数字：Number()
转字符串：toString() String()
保留两位小数：toFixed()
数组转字符串方法:Sting()、toString()、join()
字符串转数组:split()
字符截取：substring() substr()
字符串修改：replace()
json字符串转json对象：JSON.parse()
json对象转json字符串：JSON.stringify()
检测字符串开头：startWith
检测字符串结尾：endWith
字符串前面填充：padStart()
字符串后面填充：padEnd()
vue2
1、什么是MVVM，MVC，请简单的说一下？
M是model：指的是后端传递的数据。
V是view：指的是视图，也就是所看到的页面。
VM是view Model：视图模型。他是连接view和model的桥梁，主要处理业务逻辑。
MVC:M模型，V视图，C控制器，逻辑处理
2、vue的特点与功能？
①数据的驱动，数据的双向绑定
②组件化开发
3、vue的双向绑定的原理，vue的响应式原理，数据的响应式？
数据的响应式是就是：
vue采用的是数据劫持结合开发者订阅模式的方式，通过Object.defineProperty()来劫持
set，get，在数据变动的时候发布给订阅者，触发响应式回调。
nextTick： 如果你需要在数据变化后立即访问更新后的 DOM，可以使用 Vue 的 this.$nextTick() 方法。$nextTick() 会在 DOM 更新完成后被调用，因此你可以在其中安全地访问最新的 DOM 元素。
vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新.
nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的 DOM
你说一些响应式？你说的是数据的响应式还是页面的响应式？那你都说一下吧
数据的响应式是就是：3
页面的响应式就是：
媒体查询，检测屏幕在多大尺寸的时候干什么事情。
vue双向绑定除了Object还有什么方法？
用addEventListener给元素添加input事件，当数据发生变化的时候进行相应的操作
v-model底层原理:实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1、v-bind绑定一个value属性；
2、v-on指令给当前元素绑定input事件。
4、vue中的修饰符有哪些？
.stop 阻止事件冒泡
.prevent 阻止默认行为
.number 确保为数字
.enter （非标准修饰符）enter键
.lazy 用于改变数据同步的时机。默认情况下，v-model会在每次输入事件触发时同步数据。使用.lazy修饰符后，数据同步会改为在change事件发生时才进行，通常这意味着在输入字段失去焦点或按下回车键后
.trim 删除两端空白字符
.once 只触发一次
5、vue中常用的指令有哪些?
v-model
v-text
v-html
v-once
v-if
v-show
v-for
v-on
v-bind
6、v-if和v-show的区别？
v-if和v-show都是判断元素显示或者隐藏的
本质上区别，v-if判断的是是否加载，可以减轻浏览器的压力，在需要的时候载。
v-show一定会加载，只不过改变的只是dispaly:none的显示隐藏样式
7、v-for中的key的作用？
key属性用作Dom的唯一标识，当对象或数组发生增删时，默认是把数组全部元素重新绘制，当有了唯一标识以后，重新绘制节点之前会先和以后节点比较，看是否有相同的key 如果相同则复用 提高了Dom更新效率
8、v-for与v-if能在一起使用吗?
能但是不建议使用，因为v-for优先级比v-if要高，带来性能方面的浪费。
9、vue中阻止事件冒泡的方法？
方法一：js中原生的方法，e.stopPropagation()
方法二：修饰符,.stop
vue阻止默认行为方法？
方法一：js中原生的方法，e.preventDefault()
方法二：修饰符,.prevent
10、什么是生命周期（钩子函数）？生命周期有什么作用？说一 下生命周期有哪些？第一次加载页面会触发几个生命周期（钩子 函数）？
生命周期就是：vue实例从创建到销毁的过程。
生命周期的作用就是可以帮我们在什么时间段干什么事。
生命周期最初有10个，废弃了2个，还剩下8个
beforeCreate：vue实例创建之前
**created：vue实例创建之后**
这个阶段常用于发送异步请求（如Ajax请求）以获取数据
beforeMount：vue实例dom加载之前
**mounted：vue实例dom加载之后**
这个阶段常用于执行依赖于DOM的初始化操作（如使用jQuery插件）。
beforeUpdate：数据更新之前
updated：数据更新之后
beforeDestroy：实例销毁之前
destroyed：实例销毁之后
工作中用的最多的是created和mounted这2个
第一次加载页面会触发4个生命周期，分别是
beforeCreate：vue实例创建之前 --可以在这里面加个loading事件加载动画
created：vue实例创建之后
-- 初始化完成，loading动画加载结束
beforeMount：vue实例dom加载之前
mounted：vue实例dom加载之后 --dom操作
11、什么是计算属性computed，什么是监听器watch？两者的 区别，使用场景?
computed计算属性：就是用来计算的。
watch监听器：用来监听数据的变化。
computed支持缓存，不支持异步，当计算属性中存在异步操作的时，无法监听数据的变化。使用场景就是购物车
watch不支持缓存，支持异步，可以监听一个数据的变化，返回两个参数，第一个参数是新数据，第二个参数是旧数据。
使用场景：监听路由的变化，监听id发生变化的时候调接口
12、什么是过滤器？
在不改变原数据的情况下，对数据进行处理然后在显示到页面上，说白了就是不破坏原来的数据的基础上生成一个新数据。
使用场景：处理时间戳
13、正常情况可以监听的到
监听不到数据变化的第一种情况：直接修改数组或者对象的值
解决办法：this.$set(要修改的数组/对象，要修改的下标/属性,要修改的值)
监听不到数据变化的第二种情况：数组长度为0，清空数据
解决办法：直接赋值为空或者用splice删除
14、请说一下父传子，子传父？父传子，子传父的传值方式？ （组件的通讯方式有哪些？）
*父传子：挂载全局，给子组件绑定一个自定义属性，到子组件内部通过props进行接收渲染数据。
给子组件绑定一个自定义属性，到子组件内部通过{{$attrs.属性}}接收渲染数据。他是vue新出的祖辈
传参方式
或者利用{{this.$parent}}可以直接获取父组件的示例
*子传父：子组件通过this.$emit发送数据，然后给子组件绑定一个自定义方法，值为接收参数的函数。函数接收的值就为子组件传递的参数。
祖辈传参：关联孙子和爷爷的
v-bind="$attrs"
v-on="$listeners"
后代传参
发送数据
provide() {
return {
houdai: this.msg
};
},
接收数据
inject:["houdai"]
15、vue组件为什么要return一下变量？为什么data是一个函 数？
因为不使用return包裹数据，会在项目中变为全局可见，会造成变量的污染。
使用return包裹后的数据变量只能在当前组件中使用，不会影响其他组件。
为什么data是一个函数因为组件可能被用来创建多个实例，
当我们的data是一个函数的时候，每一个实例的data都是独立的，不会相互影响了。
16、父子组件调用加载顺序？
组件调用的顺序都是先父后子。渲染完成的顺序是先子后父。
组件销毁的顺序是先父后子，销毁完成的顺序是先子后父亲
17、单页面开发与多页面开发的优缺点。
单页面开发是指整体网站是由单个页面组成的；而多页面开发则是一个网站有多个页面。
1.单页面开发的优缺点；
优点：网站所有功能呈现于一整张页面中，用户体验较好，节省了用户时间，提高了用户的查找效率，对服务器请求较少，减
轻了服务器的压力，只需要一次加载，维护成本较低。
缺点：网站功能复杂；网站优化相对困难；构建困难，需要单独的方案。
2.多页面开发的优缺点；
优点：多个页面之间跳转，用户可以清晰的了解整个网站的内容构成；实现简单，开发成本低。
缺点：页面跳转时，要重新执行css，js等文件，页面片段之间跳转较慢，需要用到页面跨页面传值的几种方法。维护成本
高。
18、怎么解决组件的样式污染？
在scss中加入scoped,然后深度监听一下::v-deep或者/deep/
为什么需要穿透scoped？
scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第
三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染（污染全局样式）。此时只能通过特殊的方式，穿透scope
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>
通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。（注意：只作用于css）
/deep/在vue 3.0会报错，如果/deep/报错，可采用::v-deep。（注意：只作用于sass/scss/less）
19、vue-router有两种模式：hash和history两种模式
history 即地址栏没有#号.history是最常用的但是有bug（vue部署时使用这个模式刷新页面会报404页面，配合后端修改路由刷新时的bug）
解决404问题最好的方法一般是在web服务器【nginx】上进行配置： try_files $uri $uri//index.html;
hash 即地址栏有#号，（vue部署时刷新不会报404，但是影响美观，多了#号）
20、非父子传参方式
一、给vue的原型添加一个$observer挂载到main.js中，
用this.$observer.$emit发送数据
用this.$observer.$on接收数据
二、vuex
21、$router与$route的区别？
$router对象是全局路由的实例，里面有很多路由实例方法。比如跳转方法push、go、back...
$route表示的是当前组件路由的信息。包括了url地址信息，当前的路径，路由传递的参数
22、路由跳转方式，以及路由传值的方式。传值两种方式的区别？
路由跳转方式：
router-link中的to跳转
事件函数：this.$router.push({path})
路由跳转传值方式：
parmas方式：通过路由的name进行传参，接收的时候通过this.$route.parmas接收
query方式：通过路由path进行传参，接收的时候通过this.$route.query接收
区别：
parmas传参不会显示到地址栏上，安全性高，并且页面刷新数据就丢失。解决办法：本地缓存存起来
query传参会显示到地址栏上，并且页面刷新数据不会丢失。
23、什么是路由守卫？路由守卫有几种？路由中的钩子函数？
路由守卫：路由守卫又称导航守卫,指是路由跳转前、中、后过程中的一些钩子函数。路由跳转前做一些验证,比如登录验证,是网
站中的普遍需求
全局守卫：
beforeEach:全局路由前置守卫，即路由进入之前, 一般的使用场景是判断是否登录
afterEach: 全局路由后置钩子，即路由进入之后
局部守卫,组件内守卫有三种：
①进入路由前的验证，beforeRouteEnter -- 不以直接访问this，需要next回调中获得
②离开路由前的验证，beforeRouteLeave --可以直接访问this
③路由更新前的验证，beforeRouteUpdate
其中路由守卫钩子函数都有三个参数：
to: 想去哪个路由
from: 从哪个路由过来的
next: 跳转到哪,执行跳转
第三种 路由独享守卫
beforeEnter 路由进入之前
24、vue怎样实现缓存？vue项目列表跳转详情再返回列表还在原 位置
keep-alive缓存组件，有个include属性表示要缓存的组件名.
缓存组件有两个生命周期：组件打开时触发,组件离开时触发。
activated，deactivated
25、vue的混入？
Vue的混入将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可。
26、知道vuex吗？vuex有几种状态？分别是干什么的？
vuex是一种最好的非父子传参的方式，vuex就是状态存储
有五种状态
1 state 存储公共状态或者存储公共的数据
2 actions 用来处理异步数据
3 mutations 用来处理同步数据
4 getters 计算属性
5 modules 导入vuex子模块
你用vuex做过什么东西？
左侧导航菜单
27、vuex的工作流程
当组件想要修改state里面的数据，
1. 首先需要调用this.$store.dispatch来触发actions里面的方法，在这个方法中会返回两个参数，一个是commit方法，一个是传递过来的值，
2. 然后在这个方法内部调用commit方法去触发mutations里面的函数，mutations这个函数是专门修改存储state里面的数据，当mutations里面的函数触发后state里面的数据就会发生变化。就会存储到state中。
28、怎么给vue中data添加一个属性
对象中添加少量的新属性，可以直接采用Vue.set()
对象中添加多个新属性，则通过Object.assign()创建新对象
如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新
29、vue虚拟dom？
通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。创建虚拟DOM就是为了更 好将虚拟的节点渲染到页面视图中，
为什么需要虚拟DOM，
DOM是很慢的，虚拟dom用来解决频繁操作dom而引发的浏览器 卡顿问题，vue中虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。
30、 keep-alive 组件有什么作⽤？
1. 如果你需要在组件切换的时候，保存⼀些组件的状态防⽌多次渲染，就可以使⽤ keep-alive 组件包裹需要保存的组件。
2. 对于 keep-alive 组件来说，它拥有两个独有的⽣命周期钩⼦函数，分别为 activated 和 deactivated 。⽤ keep-alive 包裹的组件在切换时不会进⾏销毁，⽽是缓存到内存中并执⾏ deactivated 钩⼦函数，命中缓存渲染后会执⾏ actived 钩⼦ 函数
1.属性控制
●include：通过include属性，可以指定哪些组件应该被缓存。这个属性可以接收一个字符串、正则表达式或字符串数组，用来匹配组件的name选项或注册时的名称。
●exclude：与include相反，exclude属性用来指定哪些组件不应该被缓存。同样可以接收字符串、正则表达式或字符串数组作为参数。
●max：max属性用于指定缓存的组件实例的最大数量。当缓存的组件实例数量超过这个值时，Vue会按照“先进先出”（FIFO）的原则删除最早的缓存实例。
2、生命周期钩子
activated：当组件被激活时（即组件从缓存中取出并重新渲染时），会调用activated生命周期钩子。这个钩子可以用来执行一些初始化操作或数据获取操作。
deactivated：当组件被停用时（即组件被缓存起来不再显示时），会调用deactivated生命周期钩子。这个钩子可以用来执行一些清理操作或保存组件状态的操作。
从地址栏输入地址到页面的渲染都经历了哪些步骤
从地址栏输入地址到页面的渲染，主要经历了以下几个步骤：
1. URL解析
当用户在浏览器的地址栏中输入一个URL（统一资源定位符）并按下回车键时，浏览器会首先对URL进行解析。解析过程包括识别URL中的协议（如http、https）、主机名（域名或IP地址）、端口号（默认为80或443）、路径以及查询参数等。
2. DNS解析
如果URL中包含的是域名而非IP地址，浏览器需要将其解析为对应的IP地址，以便建立网络连接。这一过程通过DNS（域名系统）完成。
浏览器首先会检查本地缓存（包括浏览器缓存、操作系统缓存、路由器缓存等）中是否有该域名的解析记录。
如果没有找到，浏览器会向配置的DNS服务器发送查询请求。
DNS服务器会递归查询，直到找到对应的IP地址并返回给浏览器。
3. 建立TCP连接
浏览器通过解析得到的IP地址和端口号，与Web服务器建立TCP（传输控制协议）连接。
TCP连接建立过程包括三次握手：
第一次握手：客户端发送SYN报文给服务器，表示请求建立连接。
第二次握手：服务器回复SYN+ACK报文给客户端，表示同意建立连接。
第三次握手：客户端回复ACK报文给服务器，表示确认连接建立。
4. 发送HTTP请求
TCP连接建立后，浏览器会向服务器发送HTTP（超文本传输协议）请求，请求特定的资源（如HTML文件、CSS文件、JavaScript文件等）。
5. 服务器响应
服务器接收到HTTP请求后，会处理请求并返回相应的HTTP响应。响应中包含了请求的资源内容，以及状态码、响应头等信息。
6. 浏览器解析与渲染
浏览器接收到响应后，开始解析HTML文档，并构建DOM（文档对象模型）树。
同时，浏览器会解析CSS文件，计算各个元素的样式，并将其应用到相应的DOM元素上，形成CSSOM（CSS对象模型）树。
浏览器将DOM树和CSSOM树合并成渲染树（Render Tree），用于计算每个可见元素的布局
浏览器根据渲染树和布局信息，绘制页面内容，并将其显示在用户界面上。
7. JavaScript执行
如果HTML文档中包含JavaScript代码，浏览器会在DOM构建完成后执行这些脚本。JavaScript可以修改DOM结构、样式或处理用户交互。
8. 页面加载完成
当所有资源加载完成、DOM构建完成、样式计算完毕并且页面渲染结束后，页面加载完成。此时，用户可以开始与页面进行交互。
这个过程涉及了多个网络协议和浏览器内部机制，确保了从地址栏输入地址到页面渲染的顺利完成。
小程序
1、用过小程序吗?xxx问你问题把你难住了?
用过，有些我忘了，因为做小程序项目的时候，基本上都是去看微信开发者文档。那里面比较详细，框架里面的东西太多了记不住那么多。
2、小程序生命周期？
onLoad:当页面页面时触发（接收一个参数），这个参数是路由跳转过来的时候携带的参数，这个参数是对象。
onShow:监听页面显示
onHide:监听页面隐藏
监听用户下拉动作
页面上拉触底事件的处理函数
用户点击右上角分享
监听页面卸载
监听页面初次渲染完成
3、小程序跳转
wx.navigateTo():跳转到内页
wx.redirectTo
wx.switchTab()：跳转到tabar页面
4、获取数据变量
this.data.变量名 修改数据变量重新赋值的方法
this.setData({变量名:'修改的值'})
5、小程序的点击事件？阻止事件冒泡
点击事件：bindtap="函数名"
阻止事件冒泡：catchtap="函数名"
事件传参形式：在点击事件标签上使用自定义属性 data-*
事件参数接收：事件对象e中的currentTarget.dataset中
6、wx:if与hidden区别与vue v-if/v-show 区别相同
wx:if判断是否加载,可减轻浏览器的压力,在需要时加载。
hidden是否隐藏，hidden改变的只是display，的显示/隐藏样式
7、微信小程序记住下一次登录
1. 在app全局中获取用户的appid，然后拿着appid，去获取用户信息。使用本地的数据缓存，将获取到的信息缓存起来，
在需要的时候取出来，判断缓存中有数据就跳转到首页否则跳转到登陆页面
2. 每次进入小程序，都需要调用登录接口，来检查登录状态，但是只需要打开小程序才需要调用，所以可以把登录接口放在app里面的onLaunch方法里执行。
8、小程序支付如何实现？
1 小程序注册，要以公司的身份去去申请微信公众号及支付功能申请
2 绑定商户号，并且在小程序中填写合法域
3 wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
然后就可以用token去做一些登录判断，没授权的，先让他去授权，再存入缓存，有授权的，直接拿缓存。
4 在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器
5 调用微信支付api，wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付，填写相应的签名等信息。获取成功的回调即可支付成功
9、小程序的发布流程（开发流程）
注册微信小程序账号
获取微信小程序的openID
去微信公众号配置域名(微信开发者工具勾选校验合法域名，域名必须是https的，且不能是ip地址)
创建demo项目
代码上传
提交审核
小程序发布
小程序上线
先配置合法域名https,检查下包的大小，点击上传，若未出现错误，小程序官方平台此时已出现上传内容。点击审核，然后按照提示补充信息。
10 页面之间的通讯
1.跳转页面时拼接在地址上，然后在onload获取
2.wx.setStorage或wx.setStorageSync(区别 以sync 结尾的都是同步缓存，异步缓存不会阻塞后面的任务，但是同步缓存会等待缓存完毕在执行后续代码)
同步会能保证数据的准确性，异步可以提升速度提高用户体验
3.取值 const app = getApp（） 然后app.globalData.xxxx 获取
存储 const app = getApp（） 然后app.globalData.xxxx ="xxx" 存储
4.通过getCurrentPages() 获取所有页面 返回的是一个数据
比如想获取或修改上一个页面的实例，则
let pages =getCurrentPages();
let before = pages[pages.length-2]
before.setData({}) 修改上一个页面的值
before.data.xxx获取上一个页面的值
before.fun()调用上一个页面的方法
11 微信登录
1.wx.getUserProfile获取用户信息 wx.login 获取用户code(登录凭证)
2.wx.request 将获取到的userInfo 和 code 发送给后端----，后端会利用这些信息再去请求微信的服务器获取openid 和session_key，拿到openid以后 后端会在数据库中查找是否有相同的openid，如果没有则说明该用户没有注册，可以根据实际需求提示用户注册
3.后端通过wx.request返回数据 比如token 和用户的一些信息
12 微信支付
1.用户点击商品 选中规格和数量进行下单
2.下单前配置用户地址码，然后我们将用户的下单商品的id数量 地址等数据还有wx.login 获取的code发送给后端
3.后端接收数据， 向微信官方服务器发送请求，生成预付订单（perpay_id)，同时生成相应的签名，等一些数据，然后返回给前端
4.前端拿到相应数据后，调用wx.requestPayment()发起微信支付，唤醒支付工作台
uniapp
1、简单说一下uniapp?
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序 （微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
2、uniapp生命周期？
uniapp应用的生命周期
onLaunch:初始化完成时触发，全局只触发一次
onshow:当uniapp启动，或从后台进入前台显示
onHide:当uniapp从前台进入后台
onError:当uniapp报错时触发
uniapp页面的生命周期
onLoad:监听页面加载，参数为上个页面传递的参数，传递的类型为对象
onReady:监听页面首次渲染完成
onShow:页面监听显示
onHide:监听页面隐藏
onUnload:监听页面卸载
onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新
onReachBottom：页面滚动到底部的事件，上拉加载
3、uniapp优缺点
优点
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5条用原生能力的限制
缺点
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限
4、小程序、uni-app中的本地数据存储和接收？
微信小程序：
存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，
uni-app：
存储：uni.setStorage({key:“属性名”，data:“值”})
接收：uni.getStorage({key:“属性名”,success(res){res.data}})
5、简述 rpx、px、em、rem、%、vh、vw的区别
rpx 相当于把屏幕宽度分为750份，1份就是1rpx，100rpx=50px
px 绝对单位，页面按精确像素展示
em 相对单位，相对于它的父节点字体进行计算
rem 相对单位，相对根节点html的字体大小来计算
% 一般来说就是相对于父元素
vh 视窗高度，1vh等于视窗高度的1%
vw 视窗宽度，1vw等于视窗宽度的1%
6、js、vue、uni-app、小程序的页面传参方式区别
1、 js传参
通过url拼接参数进行传参。
接收通过location.href
2、 vue传参
vue可以通过标签router-link跳转传参
也可以通过事件里的this.$router.push（{}）跳转传参，传参有两种parmas和query
接收this.$route.parmas、this.$route.query接收
3、 小程序传参
通过跳转路径后面拼接参数来进行跳转传参
7、uniapp解决跨端兼容问题？
<!-- #ifdef MP-WEIXIN -->
代码只在微信小程序显示
<!-- #endif -->8、uniapp适配刘海屏
https://www.cnblogs.com/moranjl/p/15739275.html
vue3
1、vue3.0响应式原理?
vue3是通过es6语法中的proxy把目标对象变成代理对象，然后通过Reflect把值返回回来的操作，将数据变成响应式
2、vue3的生命周期有几个?与vue2生命周期的区别?
vue2的生命周期有八个,vue3的生命周期有六个
因为vue3.0的beforeCreate和created被setup替代了
3 组合式api方法?
ref：定义一个基础数据类型的数据响应式
用于创建响应式的基础类型数据（如数字、字符串等）。通过.value属性来访问和修改其值。
reactive：定义一个复杂复合型数据类型的数据响应式
用于创建响应式的对象或数组。直接通过属性名来访问和修改其值。
watch：数据监听
用于侦听一个或多个响应式数据的变化，并在数据变化时执行回调函数。可以配置immediate和deep选项来控制侦听的行为。
-
watchEffect：与
watch类似，但它不需要指定侦听的具体数据，而是自动侦听其函数体内使用的所有响应式数据。
computed：计算属性
toRefs：是将reactive的响应式对象中的所有属性转换为单独的响应式数据,对象成为普通对象,并且值是关联的
将对象中的所有属性值都转为 ref 对象
toRef：把响应式数据对象中的某个属性变成了ref对象
创建一个ref 对象 将其中的value 指向另一个对象中的某个属性值
// 常用于 将响应式对象中的某一个属性 ，单独提供给外部使用
注意： 使用toRef 生成的ref对象 还是会和源对象保持着联系，
同样的源对象发生修改也会影响到 当前的ref 对象，反之相同4 vue3.0优点？
速度更快，vue3相比vue2，重写了虚拟Dom实现，编译模板的优化，更高效的组件初始化
体积更小，灵活的逻辑组合与复用，如ref、reavtived、computed等，仅仅在用到的时候才打包，去掉了没用到的模块
更易维护，灵活的逻辑组合与复用，更好的Typescript支持
Vue 3组件现在支持有多个根节点，瞬移Teleport等功能
5 vue2.0和3.0区别
1. 生命周期，beforeCreate和created于setup合并
2 多根节点，内部会将多个标签包含在一个Fragment虚拟元素中
3 采用组合式API，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，复用性
4 提供Suspense异步组件，允许程序在等待异步组件加载完成前渲染
5 提供Teleport瞬移 组件可将部分 DOM 移动到 Vue app 之外的位置
6 响应式原理不同，Vue2响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。
7 支持TypeScript
6 Vue 3.0 所采用的 Composition Api 与 Vue 2.x 使用的 OptionsApi 有什么区别？
代码更利于维护和封装
Vue2 中, 我们会在一个 vue 文件的 data，methods，computed，watch 中定义属性和方法，共同处理页面逻辑 ,一个功能的实现，代码过于分散
vue3 中, 代码是根据逻辑功能来组织的，一个功能的所有 api 会放在一起（高内聚，低耦合），提高可读性和可维护性,基于函数组合的 API 更好的重用逻辑代码
Vue3 中用 setup 函数代替了 Vue2 中的 befareCreate 和 created
Vue3 中用 onUnmounted 代替了 Vue2 中的 beforeDestory
Vue3 中用 unmounted 代替了 Vue2 中的 destroyed
7、了解hook函数吗？
相当于vue2的混入，将公共代码封装出去
8. v-if与v-for在vue3.0中的变化？
在vue2.0和vue3.0中不倡议在同一元素应用v-for和v-if
在vue3.0中v-if优先级比v-for高，vue2.0中v-for优先级比v-if高
TypeScript
1、ts中的数据类型有哪些？
string,number,undefined,null,boolean,
any,元组,枚举,void,object
2、什么是联合类型？什么是元组？什么是枚举?什么是接口？什么是泛型?
①联合类型:联合类型可以通过|联合成一个整体.表示赋值可以为多种类型中的一种
②any:类型表示任意类型,用来存储不确定的类型数据
③元组类型:元组类型允许表示一个已知元素的数量和类型的数组
④枚举类型:是ts中的一种基本数据类型,并且分为数字枚举,字符串枚举,复合型枚举.其中数字枚举编号默认是从0开始,依次+1
递增,其中编号是可以修改的,字符串枚举必须初始化
⑤接口：就是为对象添加类型注解，用来约束对象的结构
⑥泛型:指的在定义函数
若有收获，就点个赞吧