最新前端面试题（附答案）

设置绝对定位四个属性为零，matgin:auto
left:50%;margin-left:负数宽度的一半 top:50%;margin-top:负数高度的一般
设置绝对定位， left:50%;top:50%; transform:translate(-50%,-50%);
设置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等

十六、什么是页面的回流和重绘？如何避免页面重排和重绘带来的性能问题？

回流：当前元素改变了自身的宽高，布局，显示或者隐藏，或者元素内容结构发生了变化，需要重新构建构建页面的时候就是回流；

重绘：重绘是在一个元素的外观被改变，但是没有改变页面的布局的情况下，比如改变了背景颜色，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 如何布局，并且与这个区

域外部毫不相干。

布局规则

内部的 Box 会在垂直方向，一个接一个地放置
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠
每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往
右的格式化，否则相反)。即使存在浮动也是如此
BFC 的区域不会与 float box 重叠
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算 BFC 的高度时，浮动元素也参与计算

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
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 中，=、==、===有什么区别？

=：表示赋值
==：只比较大小，不比较数据类型
===：既比较大小，又比较数据类型

4、i++ 和 ++i 的区别？

i++：先取i的值，作为表达式i++的结果，然后在对i进行+1 【先赋值后加一】
++i：先取i的值进行+1,然后取i的值作为++i的表达式的结果【先加一后赋值】

5、while 和 do while 有什么区别？

while是条件成立才执行循环，条件不成立不执行循环
do while是先执行一次循环，再判断条件是否成立，成立则执行循环体，不成立不执行循环体

6、break 和 continue 的区别？

break：终止当前循环，看到break，后面的呢代码就不执行了
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里面的值

await 只能在 async 函数内部使用。
await 会暂停函数的执行，直到等待的 Promise 被解决（resolved）或被拒绝（rejected）。
await 后面必须跟一个 Promise 对象，否则会抛出错误。
使用 async/await 时，要确保正确处理异步操作的完成和错误情况。

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：阻止默认事件。

.capture：使用事件捕获模式。

.self：只在当前元素本身触发。

.once：只触发一次。

.passive：默认行为将会立即触发。

按键修饰符

除了事件修饰符以外，在 vue 中还提供了有鼠标修饰符，键值修饰符，系统修饰符等功能。

.left：左键

.right：右键

.middle：滚轮

.enter：回车

.tab：制表键

.delete：捕获 “删除” 和 “退格” 键

.esc：返回

.space：空格

.up：上

.down：下

.left：左

.right：右

.ctrl：ctrl 键

.alt：alt 键

.shift：shift 键

.meta：meta 键

表单修饰符

vue 同样也为表单控件也提供了修饰符，常见的有 .lazy、 .number 和 .trim。

.lazy：在文本框失去焦点时才会渲染

.number：将文本框中所输入的内容转换为number类型

.trim：可以自动过滤输入首尾的空格

.native修饰符在router-link上监听原生点击事件

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属性的情况下，穿透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属性表示要缓存的组件名.exclude属性表示不缓存的组件名

缓存组件有两个生命周期：组件打开时触发,组件离开时触发。

activated，deactivated

25、vue的混入？

Vue的混入将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可。

局部混入（在组件内部使用 mixins 选项）通常比全局混入更加安全和可控

var app = new Vue({
  el: '#app',
  mixins: [myMixin], // 使用局部混入
  data: {
    localData: '这是组件自身的数据'
  },
  created: function () {
    console.log('组件自身的创建钩子')
  }
})

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生命周期钩子。这个钩子可以用来执行一些清理操作或保存组件状态的操作。

31、简述对diff算法的理解

Diff算法的核心功能是比较两个数据结构（如虚拟DOM树）的差异，并基于这些差异生成一个更新指令集（patch对象），用于高效地更新真实DOM。

diff算法的工作原理

深度优先遍历：
- Diff算法首先采用深度优先遍历（DFS）策略，从根节点开始逐层比较新旧虚拟DOM树的节点。
- 这种遍历方式确保每个节点都被详细检查，从而准确找出需要更新的节点。
同层比较：
- 在深度优先遍历过程中，Diff算法仅对同一层级的节点进行比较，避免跨层级操作带来的复杂性和性能开销。
- 如果发现同层级节点顺序不同，算法会通过最小化操作来调整节点顺序，而不是重新创建节点。
键值优化：
- 为了进一步优化性能，Vue.js等框架建议为列表中的每个节点分配唯一的键值（key）。
- 键值帮助算法快速定位节点，减少不必要的比较和更新操作，显著提高渲染性能。

diff算法在vue中的应用：虚拟dom比较，批量更新

32、说明vue中solt（插槽)的用法

默认插槽

子组件：在子组件中使用<slot></slot>定义默认插槽的位置。（具名插槽<slot name="插槽名称"></slot>）(作用域插槽：<slot :数据名="数据值"></slot>）

父组件：父组件在子组件标签之间放置的内容会被传递到子组件的默认插槽位置（具名插槽<template v-slot:插槽名称>或简写为<template #插槽名称>）（作用域插槽<template v-slot:插槽名称="slotProps">）

33、SPA首屏加载速度慢的怎么解决

代码分割、图片优化、按需加载、服务器渲染、数据缓存、使用CDN、骨架屏

34、简述vue初始化过程中（new Vue（options））都做了什么

选项合并：Vue会将传入的options与Vue的默认选项进行合并，形成一个新的选项对象。
数据响应式处理：Vue会对data选项中的数据进行响应式处理，使得当数据发生变化时，视图能够自动更新。
生命周期钩子调用：在初始化过程中，Vue会调用一系列的生命周期钩子，如beforeCreate、created、beforeMount等，允许开发者在这些钩子中执行自定义的逻辑。
模板编译：如果提供了模板（无论是通过template选项还是直接挂载到DOM元素上的HTML），Vue会将其编译成渲染函数。
挂载DOM：最后，Vue会将编译好的渲染函数渲染到提供的DOM元素上，完成挂载过程。

35、vue3为什么要用Proxy API替代definePropertyAPI?

性能更优：Proxy相比Object.defineProperty有更好的性能表现，特别是在处理大量数据或嵌套对象时。
功能更强大：Proxy提供了丰富的拦截方法，可以拦截对象的读取、赋值、删除等操作，更加灵活。这使得Vue 3能够更精确地追踪数据的变化，并触发相应的更新。
解决了一些defineProperty的局限性：例如，defineProperty无法监听数组的变化（需要通过特定的方法如Vue.set来触发更新），而Proxy则可以轻松地监听数组的变化。

36、简述Proxy与Object.defineProperty优劣对比？

	Proxy	Object.defineProperty
性能	更好，特别是在处理大量数据或嵌套对象时	较差，需要为每个属性单独设置getter和setter
功能	更强大，提供了丰富的拦截方法，可以拦截对象的读取、赋值、删除等操作	较有限，只能监听对象属性的读取和赋值操作
语法	相对简洁明了，易于理解和使用	相对繁琐，需要手动为每个属性设置getter和setter
兼容性	不支持IE浏览器及旧版浏览器，但在现代浏览器中表现良好	兼容性更好，支持大多数现代浏览器以及IE9+
稳定性	在某些情况下可能需要额外的polyfill，且无法完全模拟原生对象的行为	在大多数情况下可以可靠地实现对象的响应式

37、为什么vuex的mutation中不能做异步操作

mutation作为Vuex中唯一允许修改state的地方必须是同步；

devtools中的时间旅行功能，如果是异步devtools无法准确捕获到状态的改变

38、请解释axios 是什么，其特点和常用语法?

Axios是一个用于浏览器和node.js的基于Promise的HTTP客户端。它提供了简单易用的API，用于发送各种类型的HTTP请求（如GET、POST、PUT、DELETE等），并处理响应。

axios的特点

基于Promise：axios使用Promise API，使得异步操作更加简洁和易于理解。
支持请求和响应拦截器：可以添加请求和响应拦截器来处理请求或响应数据，实现如认证、日志记录等功能。
自动转换JSON数据：axios会自动将请求和响应数据转换为JSON格式。
取消请求：可以使用CancelToken取消请求。
客户端支持保护免受XSRF攻击。

axios的常用语法

发送GET(POST/PUT/DELETE)请求

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])

39、什么是SSR，它主要解决什么问题?

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，

比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求

40、vue过渡动画实现的方式有哪些

1、CSS过渡：

使用<transition>组件包裹需要动画的元素或组件。

在CSS中定义过渡的类名，如.v-enter-active, .v-leave-active等，这些类名会在元素进入或离开过渡时自动添加。

2、CSS动画：

类似于CSS过渡，但使用<transition>组件并指定type="animation"。

在CSS中定义动画的类名，如.v-enter-active, .v-leave-active等，这些类名会在元素进入或离开过渡时自动添加，但使用的是@keyframes定义的动画。

3、JavaScript钩子函数：

在<transition>组件中，可以添加钩子函数如before-enter, enter, after-enter, before-leave, leave, after-leave等。

可以在这些钩子函数中使用JavaScript来直接控制DOM元素，实现更复杂的动画效果。

4、第三方动画库：

可以结合像Animate.css这样的第三方动画库来实现动画效果。

使用<transition-group>组件对多个元素进行动画处理。

41、vue中 watch怎么深度监听对象变化

设置deep: true。

42、nextTick的作用及实现原理

作用

Vue.nextTick用于在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的DOM。

实现原理

Vue是异步更新DOM的。当你改变了数据的变化，视图不会立刻更新，而是等Vue的异步队列清空，在下一个"tick"中，所有的数据改变后会被应用到DOM上，然后执行在nextTick中指定的回调

43、Vue 与 Angular 以及 React 的区别是什么?

react

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。

AngularJS

Vue 的一些语法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因为 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。

44、如何实现vue项目的性能优化

编码阶段

尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher
v-if 和 v-for 不能连用
如果需要使用 v-for 给每项元素绑定事件时使用事件代理
SPA 页面采用 keep-alive 缓存组件
在更多的情况下，使用 v-if 替代 v-show
key 保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

SEO 优化

预渲染
服务端渲染 SSR

打包优化

压缩代码
Tree Shaking/Scope Hoisting
使用 cdn 加载第三方模块
多线程打包 happypack
splitChunks 抽离公共文件
sourceMap 优化

用户体验

骨架屏
PWA

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启 gzip 压缩等。

45、组件中写name选项有哪些好处

可以通过名字找到对应的组件（递归组件：组件自身调用自身）

可以通过 name 属性实现缓存功能（keep-alive）

可以通过 name 来识别组件（跨级组件通信时非常重要）

使用 vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的

46、从地址栏输入地址到页面的渲染都经历了哪些步骤

从地址栏输入地址到页面的渲染，主要经历了以下几个步骤：

url解析、dns解析、建立tcp连接、发送ppt请求、服务器响应、浏览器解析与渲染、JavaScript执行、页面加载完成

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:监听页面隐藏

监听用户下拉动作

页面上拉触底事件的处理函数

用户点击右上角分享 onShareAppMessage或onShareTimeline

onUnload 监听页面卸载

监听页面初次渲染完成

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全局中获取用户的openID，然后拿着openID，去获取用户信息。使用本地的数据缓存，将获取到的信息缓存起来，

在需要的时候取出来，判断缓存中有数据就跳转到首页否则跳转到登陆页面

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

递增,其中编号是可以修改的,字符串枚举必须初始化

⑤接口：就是为对象添加类型注解，用来约束对象的结构

⑥泛型:指的在定义函数

作者也在找工作，欢迎公司有HC的包子内推，base地：深圳