面试总结···

vue2、vue3的区别

我认为有四个方面 第一个是vue3在性能方面有了优化，比如使用了proxy替代Ovject.defineProperty实现响应式数据的监听，提高了响应式数据的访问速度，第二个是在API方面进行了改进，比如通过setup函数代替vue2中的created和mounted生命周期；通过composition API提供了更加灵活的API，可以让代码更方便的复用

vue2和vue3的响应式原理的区别

数据劫持方式不同：vue2使用的是Object.defineProperty方法对getter和setter进行数据劫持，在数据改变的时候通知订阅者，订阅者收到消息后进行相应的处理，通过原生JS提供的监听数据的API，当数据发生改变的时候在回调函数中改变dom，vue3使用的是proxy对象对数据进行劫持，它可以直接监听对象数组数据类型等的变化
响应式系统初始化方式不同：vue2是在组件实例化是进行初始化的，在这之后添加的属性不会被监听，vue3是在组件渲染的时候进行初始化的在这之后添加的属性也会被监听

ref

ref和reactive实现的方式不同：vue2使用的是ref和reactive两个API实现的响应式数据，ref可以将基本类型的数据变成响应式，reactive可以将对象变成响应式数据，vue3使用的是ref，reactive和toRefs三个API实现相适应数据的toRefs可以将一个reactive对象变成有多个ref对象组成的响应式数据方便再组件中使用

proxy原理

他是ES6新增的一个特性，它可以在一个对象上添加一个代理层，可以拦截到对象的操作，包括读取、设置、删除等操作，他的原理就是通过拦截对象的操作，将其转发到处理器对象进行处理，并返回处理结果，这样可以实现对对象的全面控制和定制化

composition API

vue3中新增的一个组合式API，它可以帮我们更好地组织和复用逻辑代码，他更好的支持了TS，让代码的可读性、可维护性更好，使用方式有setup函数替代vue2 created和mounted等生命周期函数，使用rereactive和ref函数创建响应式数据

vite为什么不能使用require

require是CommonJS规范中加载方法，是Node.js中的模块加载方法，vite是基于ES模块化方案，两者不能兼容，在vite中可以使用import语句来引入模块

vue常见的指令

v-model、v-if、v-for、v-show、v-bind、v-on、v-text、v-once

ts与js相比，优势在哪里？

TS就是JS的超集，TS是强类型的语言，相对于JS，TS的优势可以在写代码的时候检查代码的类型错误，提高代码的健壮性和可靠性，TS支持类和接口的定义，可以更好的实现面向变成的思想，可以让代码更有结构性和可读性，TS还支持泛型，可以更好的处理不同类型的通用算法，还可以更好的提供代码的不全，提高开发效率

ts中的类修饰符

public修饰符是默认的修饰符可以不写，他的属性和方法可以被任何人访问
private修饰符是用于限制列的属性和方法只能在类的内部访问，在类的内部可以使用this访问private修饰符的属性和方法
protected修饰符用于限制类的成员只能在类的内部和子类中被访问，在子类中可以使用super访问protected修饰的属性和方法

ts中any的含义，用的多吗，什么时候使用

any是一种动态类型，表示任意类型，它可以调用任何属性和方法，也可以进行任何操作，但是编译器不能对他进行类型检查和类型推断，一般在使用的时候是在类型不确定的情况下使用可以作为占位符来过渡

JS请求用什么实现的

JS通过多种方式发送HTTP请求，最常用的就是XMLHttpRequest对象，简称XHR，他是JS中的内置对象，提供程序中发送HTTP请求和接收HTTP响应的功能，可以发送各种类型的请求，例如get、post、put、delete，还可以设置请求头、请求参数、超时时间等，除了XHR，还可以使用axios、jQuery等第三方库发送Http请求

vue2的生命周期

8个阶段，beforeCreate 实例刚刚被创建，都没有初始化，created 实例创建完成，但元素没有生成不能访问dom，beforeMount 实例挂载前，DOM生成，但没有挂载到页面中，mounted 实力挂载完成，dom元素已经插入到页面 ，可以访问元素，before Update，数据更新前的钩子函数，可以对数据进行操作，updated数据更新完成后的一个钩子函数，dom元素已经被更新，beforeDestroy 实例销毁前的一个钩子函数，destroyed 实例销毁后的最后一个钩子函数

登录状态的cookie，session处理？如何缓存？

可以使用浏览器缓存或服务器缓存，浏览器缓存可以使用HTTP控制缓存头，也可以使用CDN内容分发到网络来缓存静态资源，并将其发到全球各地的服务器提高访问速度

编译完的代码如何部署到网页？流程是什么？

首先需要获取一台服务器，可以选择自己租用或使用云服务器提供的虚拟主机或云主机，然后将代码上传到服务器上面，可以使用git等版本控制工具进行代码同步，根据代码的云心个环境们需要配置响应的服务器环境，将域名注册并指向服务器IP地址，可以使用dns服务商提供的控制面板进行配置，部署完成后进行测试和调试，确保网页可以正常运行，然后将网页发布，让用户使用

vue2双向绑定

在模板中使用v-model指令将input元素value值与vue实例中的message属性进行绑定，双向绑定通过数据劫持和发布订阅者模式实现，当数据发生变化的时候 会触发setter getter方法通知订阅该数据的watcher对象进行更新，更新完成后通知视图进行重新渲染，实现双向绑定的效果

自己搭建过项目吗？做了些什么?

首先先安装node和npm，在安装vue脚手架，然后创建vue项目，使用npm run dev 运行项目，在src目录中进行编码，路由配置，状态管理等

v-if ,v-show,.v-for的区别 ？ 分别用来干什么的？

v-if就是根据表达式的值的真假来条件性的渲染元素，值为真则渲染，值为假就不会渲染
v-show 是根据表达式的真假来切换元素的显示和隐藏
v-for 是根据指定的数组或对象来循环渲染元素
v-if和v-show的区别是 v-if是根据条件动态的添加或移除元素，v-show则是通过css来控制元素的显示和隐藏
v-for主要用来循环渲染列表的数据，生成对应的列表元素

说一说你对单向数据流的理解

单项数据流是指在应用程序中流动方向只有一个方向，比如父级组件到子级组件传递数据，但是子组件不能直接修改父组件的数据，只能像父组件发送事件来请求修改数据，避免了数据的混乱和数据变化冲突

前后端接口不一致怎么处理的？

如果后端人员有能力修改接口，可以让后端适配前端的需求，如果后端不方便修改接口的话，可以让前端在前端代码中适配接口，根据后端返回的数据结构进行相应的处理，也可以使用代理服务器在在前后端工作分离比较明显的情况下，使用代理服务器来处理接口不一致的问题

js基础数据类型

number string boolean null undefined symbol：ES6新增的数据类型，表示独一无二的值
复杂类型有Object ，NAN

jQuery $的作用

在jQuery中，$是一个函数，可以接受一个参数，该参数可以是一个选择器 ，html代码，DOM元素，函数等。 $ 函数返回一个包含匹配元素的jQuery对象，可以更方便的操作DOM元素，执行函数

ajax怎么用

ajax是一种通过后台与服务器进行数据交互的技术，先安装axios，然后引入他，发送请求

ajax工作原理

Ajax是一种异步获取数据的技术，他的原理是通过XmlHttpRequest对象来向服务器发送异步请求，类似一个中间层，负责请求数据，而不影响浏览器其他事件执行，等到数据回来之后在通知浏览器，浏览器在进行处理

es6常用方法？

let和const 用于声明变量和常量，取代了Es5的var关键字
箭头函数，用来声明匿名函数
模板字符串，用于拼接字符串 可以使用反引号和${}表达变量和表达式
解构赋值 用于从对象或数组里面提取值赋给变量
Promise，用于处理异步操作，可以改善回调地狱的情况
模块化，用于将代码分离成独立的模块，避免全局变量污染和命名冲突

css怎么做小三角形

设置元素的高度和宽度，同时设置border样式为transparent，这样回显示出一个实心的矩形，然后设置border-top或者bottom、left、right样式为一个实心的边框，这样就可以在某一边生成一个三角形，最后可以使用transform：rotate属性调整三角形的方向和位置，

css过渡怎么实现

transition

低代码平台

低代码平台是无需编码或通过少量代码就可以快速生成应用程序的开发平台。也是一款图形化、拖拉拽方式快速实现企业数字化转型中的创新应用、支持用少量代码扩展实现个性化需求的数字技术
工具平台

媒体查询是什么

是css3引入的一种技术，用于根据不同的媒体类型和设备特性来应用不同的样式，可以根据设备的屏幕尺寸来改变网页的布局，字体大小、颜色等样式

调整过根字号大小吗

rem可以用根据根元素字体大小变化而变化的长度单位，可以在body里面设置

rem

数组常用方法

1. push()：向数组末尾添加一个或多个元素，并返回数组的新长度。
2. pop()：从数组末尾删除一个元素，并返回该元素的值。
3. unshift()：向数组开头添加一个或多个元素，并返回数组的新长度。
4. shift()：从数组开头删除一个元素，并返回该元素的值。
5. slice()：返回指定位置的元素，不会改变原数组。
6. splice()：从指定位置删除或添加元素，可以改变原数组。
7. concat()：合并两个或多个数组，不会改变原数组。
8. join()：将数组中的所有元素转化为一个字符串，并返回该字符串。
9. indexOf()：查找指定元素在数组中的位置，返回其下标，如果不存在则返回-1。
10. forEach()：对数组的每个元素执行一次提供的函数。
11. map()：创建一个新数组，其结果是该数组中的每个元素调用提供的函数后返回的结果。
12. filter()：创建一个新数组，其中包含所有通过所提供函数的测试的元素。
13. reduce()：通过指定的函数将数组的每个元素累加为单个值。
14. reverse()：颠倒数组中元素的顺序。
15. sort()：对数组中的元素进行排序。

对象的常用方法

1. Object.keys()：返回一个由对象的属性名组成的数组。
2. Object.values()：返回一个由对象的属性值组成的数组。
3. Object.entries()：返回一个由对象的每个属性键值对数组组成的数组。
4. Object.assign()：将一个或多个源对象的属性复制到目标对象中，并返回目标对象。
5. Object.freeze()：冻结对象，防止对其进行修改。
6. Object.seal()：封闭对象，防止添加或删除属性，但允许修改属性值。
7. Object.create()：创建一个新对象，并将其原型设置为指定的对象。
8. Object.hasOwnProperty()：判断一个对象是否有指定的属性，不会检查原型链。
9. Object.is()：比较两个值是否相等，与===相比具有更精确的行为。
10. Object.toString()：返回对象的字符串表示形式。
11. Object.defineProperty()：定义对象的新属性，或修改现有属性的特性。
12. Object.defineProperties()：定义多个新属性，或修改现有属性的特性。
13. Object.getOwnPropertyDescriptor()：返回指定对象属性的属性描述符。
14. Object.getPrototypeOf()：返回指定对象的原型对象。
15. Object.setPrototypeOf()：设置一个对象的原型到另一个对象或null。

怎么判断变量是不是数组

可以使用Array.isArray方法来判断一个变量是富士数组，如果是数组返回true 否则返回false

BOM层的对象了解过吗？说几个常用

BOM是浏览器提供的一个JS对象，用于与浏览器窗口和框架进行交互

1. window对象：表示浏览器中打开的窗口或标签页，是BOM中的顶层对象，包含了很多常用的方法和属性，例如alert()、confirm()、prompt()等。
2. location对象：表示当前文档的URL，可以用来获取或设置当前页面的URL。
3. navigator对象：表示浏览器的信息，可以用来获取浏览器的名称、版本号、是否支持某个特性等。
4. screen对象：表示用户屏幕的信息，可以用来获取屏幕的宽度、高度、像素密度等。
5. history对象：表示浏览器的访问历史记录，可以用来在历史记录中前进或后退。
6. document对象：表示当前文档，是DOM（文档对象模型）的顶层对象，可以用来操作文档中的元素和内容。

事件冒泡是什么

事件冒泡是指当一个元素上的事件被触发时，他会他会沿着DOM树向上冒泡知道到达根节点或者被阻止为止，事件冒泡可以通过stopPropagation方法来阻止

vue2和vue3的区别

性能比vue2加快了很多使用了proxy来代替Object.defineProperty，提高了响应式系统的性能和稳定性vue2使用的是选项API，vue3使用的是组合式API，vue3支持tree-shaking，可以更好的优化打包体积，更好的支持TS

文件上传的做法和用的组件？

原生的HTML表单可以使用input标签的type属性为file的表单元素，Ajax上传可以通过FormData对象将文件数据上传到服务器，第三方组件有Plupload、fine、Uploader

特大文件上传处理

可以将大文件分割成多个小文件，分别上传到服务器，最后在服务端合并成一个完成的文件这样可以减少单个文件上传失败的概率，同时也可以减轻服务器的压力。常见的分片上传组件有webUploader

异步请求一般用什么

XMLHttpRquest（XHR）对象：是浏览器提供的原生的Ajax实现方式，通过js向服务器发送异步请求
axios：是一个基于Promise的Http库，可以在node.js和浏览器中发送异步请求

vue中插槽在什么情况下用？

父组件需要向子组件传递内容，但不确定传递的内容是什么，这时候可以使用默认插槽，子组件向父组件传递内容，不确定传递的内容可以使用插槽，子组件向父组件传递多个内容，且这些内容的位置不确定，可以使用具名插槽，父组件需要根据条件来动态传递内容，可以使用作用域插槽

vue中混用mixin的原理

mixin是一种代码复用的机制，可以在组件中共享相同的代码逻辑，他的原理是利用了vue中的选项合并机制。当一个组件使用了一个混入对象时，vue会将混入对象中的选项合并到组件的选项中，按照顺序依次执行

vue2和vue3生命周期的对比

基本上就是在 Vue2 生命周期钩子函数名基础上加了 on
beforeDestory 和 destoryed 更名为 onBeforeUnmount 和 onUnmounted；
然后删了两个钩子函数 beforeCreate 和 created变成了setup函数

如果后端返回给你10000条数据 你怎么处理

分页，可以使用JS等技术对数据进行操作处理，这样可以提高用户体验，可以让用户快速的看到数据，并且可以在页面上进行操作和搜索，先用Ajax向后端请求所有数据，然后计算每页显示的数量和数据总量计算总页数，还有每一页需要娴熟的数据范围，然后把显示的数量分组，让用户点击操作的时候根据用户的操作计算要展示的数据范围显示到页面上

import函数和普通函数的区别

返回值的类型不同import返回的是promise对象，普通函数返回值类型可以是任何类型，他们的作用月也不同import实在模块作用域中执行的，因此在import函数内部定义的变量，函数等都属于模块作用域，普通安徽念书实在全局作用域或者函数作用域执行的，可以访问全局变量和函数

v-for 中key值的作用

v-for指令会生成一组节点，每个节点都需要一个唯一的key值来标识自己

做登录的时候怎么防止用户频繁发送请求

可以使用定时器或者节流函数来限制用户的请求频率，在用户点击登录按钮的时候添加一个定时器，防止用户重复点击，也可以添加一个验证码，在用户输入账号 密码的时候需要输入验证码才能完成登录

对密码的处理

把密码进行哈希处理，可以通过比对哈希值来验证密码是否正确，也可以使用https协议来保护用户的密码不被窃取

如何实现input表单与下拉框内容的绑定

可以使用v-model将input表单和数据进行双向绑定，将下拉框的data中的v-model的属性值进行绑定

数据请求放在哪个阶段

组件创建的阶段放在vue生命周的钩子函数created或mounted来进行数据的请求，也可以放在vuex状态管理阶段，把完成请求的数据保存到vuex的state里面实现共享数据

移动端的高清适配

可以使用rem和viewport适配，rem是相对于html根元素字体大小的单位，移动端高清适配一般是将字体大小设置为屏幕宽度的一定比例，viewport是值浏览器可视区域的大小，可以通过设置viewport的meta标签，控制页面在不同设备上显示的效果

拖拽怎么实现

他主要是三个步骤按下鼠标、移动鼠标、松开鼠标，先获取道拖拽的目标元素，定义鼠标按下的事件处理函数，在计算鼠标再目标元素的坐标，然后在定义鼠标移动时的事件处理函数，最后在松开鼠标的时候，取消鼠标移动的事件处理函数

computed和watch的区别

computed是计算属性，他是根据依赖的数据动态计算出一个新的值，只有在以来数据发生变化的时候才会重新计算
watch是监听指定的数据变化，在数据变化的时候执行指定的回调函数，它可以监听一个复杂的数据结构或者是需要执行异步操作的情况

介绍一下Promise

Promise表示一个异步操作的最终结果，与之交互的方式主要有then方法，该方法主要注册了两个回调函数，用于接受Promise的最终结果和不能执行的原因
Promise三种状态：

1. pending 待定状态 默认值
2. fulfilled 成功状态：表示兑现承诺
3. rejected 失败状态：拒绝兑现承诺
4. 注意：状态一旦一旦改变，就会凝固，不能随意更改

结果值：
5. 如果调用的是resolve(),通过then中第一个回调函数获取
6. 如果调用的是reject(),通过then中第二个回调函数获取

promise的race和all方法的区别

他们都是Promise的静态方法，race方法接收一个数组作为参数，返回一个新的Promise对象，Promise对象的状态由第一个完成Promise对象决定，如果第一个promise对象变为fulfilled，返回的promise对象也是fulfilled，否则返回rejected；all如果所有Promise对象状态都是fulfilled，返回的Promise对象也是fulfilled，并且将Promise对象返回值组成一个数组作为返回值，否则返回rejected，并将第一个rejected状态的Promise对象的返回值作为返回值

怎么持久化存储

可以使用浏览器的localStorage或者sessionStore将状态存储到本地，页面刷新或者关闭的时候再从本地读取状态恢复，但是只能存储字符串类型的，需要将状态序列化为字符串后在存储，也可以使用cookie，当页面刷新或者关系的时候从cooie读取状态恢复，这种方法可以存储非字符串类型的数据，但是需要考虑cookie的大小限制和安全问题，还可以使用第三方库比如vuex-persistedstate，将状态存储到本地并恢复

js中的for除了循环还可以干什么

遍历数组和对象，也可以进行一些计数操作，比如统计数组中某个元素出现的次数或字符串中某个字符出现的位置

get和post的区别

参数传递方式不同：get请求通过URL传递参数，POST请求通过请求体传递参数
数据量大小限制不同：get请求发送的数据通常不能超过1024字节，post请求没有数据量大小的限制
缓存机制不同：get请求可以被浏览器缓存，post请求不会被浏览器缓存，每次请求都是最新的数据
使用场景不同：get适用于获取数据，比如搜索、i获取文章列表，post适用于提交数据，比如登录、注册、发表评论等

谈一谈你对SPA单页面应用程序的理解

SPA翻译过来就是单页面，SPA 是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验
SPA和MPA的区别
MPA就是多页面应用，每个页面都是主页面，都是独立的，每次访问都需要重新加载html,css，js等文件
优点：
具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不需要重新加载整个页面
良好的前后端分离，分工更明确
缺点：
不利于搜索引擎的抓取
首次渲染速度相对较慢

箭头函数和普通函数的区别

this指向不同 箭头函数指向定义函数时候的作用域，没有自己的this，普通函数的this指向调用该函数的对象
arguments对象不同：普通函数中有arguments对象，可以获取到函数的参数，箭头函数没有arguments对象，需要使用rest参数获取传入的参数
构造函数不同：普通函数可以作为构造函数使用并且能通过new创建实例对象，箭头函数不能创建实例对象
语法不同：箭头函数比普通函数更简洁，可以省略大括号、function和return

async和awiat的使用

async函数返回一个Promise对象，可以使用await等待异步操作的结构，他们的使用场景是在需要等待异步操作完成后在进行的操作情况下，避免了回调嵌套和Promise链式调用的问题，await只能在async里使用否则会导致语法错误

npm,yarn,pnpm的优缺点

npm是Node.js官方的包管理工具，npm有大量的开源包可以使用但是他在安装包的时候可能会出现版本冲突的问题，安装时间比较慢
yarn相对于npm，yarn的社区活跃度比较低，但是在安装包的时候速度更快，会通过锁定版本号的方式来解决版本管理的问题，避免冲突
pnpm 更新版本的速度比较慢，社区活跃度也比较低，但是pnpm的缓存机制能让安装包有很好的稳定性，他使用硬链接的方式来管理包，节省了磁盘空间

什么时候使用$nextTick，实现原理是什么

当我们需要在DOM更新之后执行一些操作的时候可以使用$nextTick方法，他的原理是利用JS的事件循环机制，在DOM更新之后执行回调函数，当vue需要更新DOM的时候，会先将DOM更新任务放入一个队列，然后通过JS事件循环机制，等待所有同步任务完成之后在执行所有异步任务，异步任务执行完成后会执行 $nextTick方法中的回调函数，避免出现DOM没有更新的情况

type和interface的区别

type只能定义基本类型，interface只能定义对象类型，type可以使用typeof、keyof和in修饰符，interface不支持，type可以使用类型别名，interface不支持，他俩都是用于定义类型，但是type更加灵活，可以定义更多类型，支持更多操作符和语法，interface更加专注于定义对象类型，让代码的可读性和维护性更高

const和readonly的区别

const用于定义常量，readonly用来定义只读属性；const常量必须在定义的时候立即初始化，readonly可以在构造函数中初始化，const常量只能定义基本类型和对象字面量类型，readonly可以定义任何类型的属性，const常量可以在全局和局部作用域中使用，readonly只能在类和接口里面使用

webscoket的好处和http的区别，可以用来干什么

webscoket是一种基于TCP协议的网络协议，它可以在客户端和服务器之间建立持久性的连接，实现双向通信，不需要像HTTP协议那样每次请求都要重新建立连接，它可以实时聊天、数据展示、多人协作，也可以实现实时的游戏互动的功能等

深拷贝和浅拷贝的区别

深拷贝会复制对象或数组的所有内容，包括在对象或数组内部的所有属性和子属性，深拷贝后的对象或数组不会影响原对象或数组；浅拷贝只复制对象或数组的引用，不会复制对象或数组的内容，如果修改浅拷贝后的对象或数组的时候，原对象或数组也会受到影响

实现深拷贝

利用JSON.stringify和JSON.parse方法将对象或数组转换为JSON字符串，然后再将JSON字符串转换为对象或数组，但是他不能复制特殊对象比如正则表达式、日期、map等无法复制，不能复制函数，如果对象存在循环引用可能会导致死循环

怎么实现数组去重，用双重for循环会出现什么问题

1. 利用set对象，将数组转换为set对象，在将set对象转换为数组

const arr=[1,2,3,1,1,2,3,4]
cosnt newArr=Array.from(new Set(arr))
console.log(newArr)

2. 利用indexOf方法遍历数组，将每个元素和已经存在的元素进行比较，如果不存在重复的元素，就存储到一个新数组中

const arr=[1,2,3,1,1,2,3,4]
const newArr=[]
for(let i=0;i<arr.length;i++){
  if(newArr,indexOf(arr[i])===-1){
	newArr.push(arr[i])
	}
}
console.log(newArr)

如果用双重for许愿实现数组去重的话，会出现事件复杂度较高的问题，在数据量较大时会导致性能下降

= =和 = = =的区别

他们都是js的比较运算符，==比较两个值是否相等，会进行类型转换相等返回true不相等返回false；= = =比较两个值是否严格相等不会进行类型转换，相等返回true，不相等返回false