1、Token身份鉴权

Token 身份鉴权是一种常见的身份验证方式，常用于 API 接口的安全保护。在这种身份验证方式中，用户在登录后会获取一个 Token（令牌），然后在每次请求 API 接口时需要将该 Token 附加在请求头中发送给服务器进行身份验证。

一般来说，Token 身份鉴权包括以下几个步骤：

用户登录：用户在登录页面输入账号和密码，服务器验证账号密码正确性，并生成一个 Token。

Token 传递：将生成的 Token 保存在客户端，例如浏览器的 localStorage 或者 cookie 中。

身份验证：在每次请求 API 接口时，将保存的 Token 附加在请求头中发送给服务器进行身份验证。

身份验证结果：服务器接收到请求后，会解析请求头中的 Token，并与服务器保存的 Token 进行比对，如果验证通过则返回请求数据，否则返回错误信息。

在基于 Token 的身份鉴权中，Token 的生成方式和存储方式是比较关键的。常见的 Token 生成方式包括 JWT（JSON Web Token）、OAuth2 等，这些方式都可以生成一个安全有效的 Token。Token 存储方式也有多种，包括浏览器的 localStorage、cookie、sessionStorage 等，以及服务端的缓存、数据库等。

2、vue动态路由

vue动态路由是vue.js路由系统（Vue Router)的一种功能，用于根据不同的参数渲染不同的组件。动态路由使得开发者可以在一个路由配置中定义一个模式，匹配多个 URL。通过使用动态路由，你可以避免为每个 URL 单独创建一个路由规则，从而实现更简洁的代码和更好的可维护性。

动态路由的实现方式是在路由路径中使用冒号（:）作为前缀，定义一个参数。这个参数可以在匹配到的组件中通过 this.$route.params 访问。

以下是一个动态路由的示例：

    1.定义一个动态路由规则：

上面的代码中，我们定义了一个动态路由规则 /user/:userId。userId 是一个参数，可以在 URL 中动态改变。

    2.在组件中访问动态路由参数：

在这个组件中，我们通过 this.$route.params.userId 访问动态路由参数 userId。然后使用计算属性将其显示在模板中。

现在，当访问 /user/1 或 /user/42 时，都会渲染 UserComponent，并在模板中显示相应的 userId。

3、vue-router如何响应路由参数变化

（1）使用watch来监听

（2）使用beforeRouteUpdate守卫

4、vue优化首页加载速度

Vue中优化首页加载速度可以从以下几个方面入手：

图片压缩和懒加载：优化图片大小和质量，减少页面加载时间，同时使用懒加载技术，在需要时再加载图片。

骨架屏技术：在页面加载时，先显示骨架屏，等待数据加载完成后再渲染页面。这样可以让用户快速看到页面的大致结构，提高用户体验。

路由懒加载：使用Vue Router的懒加载功能，只在需要时加载路由组件，减少页面初始化时的资源开销。

组件懒加载：将组件按需加载，只有当需要使用组件时才进行加载。可以使用Vue的异步组件功能实现组件懒加载。

静态资源CDN加速：将静态资源存放在CDN上，可以减少请求响应时间，提高加载速度。

静态资源缓存：使用浏览器缓存技术，将静态资源缓存在用户的浏览器中，可以减少请求次数，提高加载速度。

代码优化：减少不必要的代码，优化代码结构和性能，可以减少页面初始化时的资源开销。

5、js哪些操作会造成内存泄漏

（1）意外的全局变量（2）未正确的清除定时器（3）闭包（4）没有清理掉的DOM引用（5）没有正确移除事件监听器（6）循环引用，两个或者多个对象相互引用对方。

6、CSS3新特征

（1）圆角、阴影效果、渐变、过渡、动画、自定义字体、伸缩布局、网格布局、媒体查询、多列布局、背景大小、RGBA颜色模式、伪类和伪元素、计算属性值（calc）、2d转换、3D转换、视口单位。

7、多维数组扁平化去重

（1）多维数组扁平化去重可以使用递归和Set对象来实现。

8、axios常用请求方式

get\post\put\delete\patch

9、ajax技术体系组成部分

（1）js、XMLHttpRequest、css、html、DOM、json。（通过将这些部分相互配合，实现页面与服务器通信）

10、数组去重的方法有哪些

set、filter、reduce

数组的reduce方法会遍历数组的每个唯一元素推入新数组。

11、Vue导航守卫

vue导航守卫是一组用于控制路由跳转的钩子函数，主要用于在路由切换前后进行一些操作，如验证用户登录、判断用户权限。

beforeEach（路由切换前调用）、beforeResolve（组件被解析后调用）、afterEach（路由切换后调用）。

beforeEach(to, from, next)：在路由切换前调用，可以用来进行一些验证操作，比如检查用户是否已经登录。如果验证不通过，可以调用 next(false) 取消路由跳转，或者调用 next('/login') 跳转到登录页面。

beforeResolve(to, from, next)：在所有组件内守卫和异步路由组件被解析之后调用。这个钩子在全局守卫和路由独享守卫之后被调用。这个钩子函数的主要作用是确保异步路由组件被解析完毕后，再进行导航。

afterEach(to, from)：在路由切换后调用，可以用来进行一些页面的操作，比如页面滚动到顶部、埋点等。这个钩子没有 next 函数，因为导航已经完成了。

12、常用的伪元素有哪些

::before、::after、::first-letter、::first-line、::selection、

::before：在元素内容前面插入一个伪元素。

::after：在元素内容后面插入一个伪元素。

::first-letter：为元素内容的第一个字母创建一个伪元素。

::first-line：为元素内容的第一行创建一个伪元素。

::selection：用于选择被用户选中的文本部分。

::placeholder：用于设置表单元素的占位符样式。

::marker：用于设置列表标记的样式。

::backdrop：用于为 元素创建一个半透明的遮罩层。

除了这些，还有一些不太常用的伪元素，如 ::before-page 和 ::after-page 用于在打印页面前后添加内容。伪元素可以使用 content 属性来设置它们的内容，并可以使用 CSS 属性为其添加样式。

13、本地存储有哪些，区别

localStorage、sessionStorage、cookie、IndexedDB、Web SQL

14、vue登录拦截

用户在进行某操作之前，需要验证用户是否已经登录，如果未登录，需要跳转到到登录页面进行登录操作。

15、vue3相对于vue2来说，有以下几个区别

（1）性能优化。vue3中通过重写虚拟DOM和编译器升级，提升渲染性能。

（2）Composition API。Composition API是一种新的API风格，可以更灵活的组织代码，支持更好的代码复用。不是按照生命周期函数进行组织，使代码更清晰，易于维护。

（3）Typescript支持。vue3对ts支持更加完善。

（4）响应式系统。vue3对响应式系统进行了升级。

（5）Tree-shaking。vue3支持Tree-shaking，可以更好的优化打包体积。

（6）vue3新增了，setup()函数和watchEffect()函数。

16、setup语法中，组件导入之后就可以直接使用，不需要再使用components进行局部注册。

17、js中作用域

javascript中作用域就是变量的可访问范围。

18、判断一个变量是否是数组

（1）Array.isArray()方法。（2）instanceof运算符

19、判断一个变量是否是对象

（1）typeof运算符（2）Object.prototype.toString.call() （3）instanceof运算符。

20、js中对象常用的方法

（1）Object.keys()，Object.values()、Object.assign()、Object.entries、Object.create()。

1.Object.keys()：返回对象的所有属性名组成的数组。

2.Object.values()：返回对象的所有属性值组成的数组。

3.Object.entries()：返回对象的所有属性名和属性值组成的二维数组。

4.Object.assign()：将多个对象合并为一个对象。

21、js中创建一个空数组或者空对象有哪几种方法？

（1）使用字面量语法（2）使用构造函数（3）使用Object.create()方法（4）使用Array()构造函数的参数

22、哪些遍历方式会改变原始数组

（1）forEach() 方法（2）map()方法（3）filter()方法

23、Set和Map各是什么

Set 和 Map 都是 ES6 中新增的数据结构，它们可以用来存储数据。

Set 是一种类似于数组的数据结构，它可以存储任何类型的唯一值，不允许重复。Set 中的值是按插入顺序排列的，可以快速地判断一个值是否存在于集合中。Set 有以下特点：

1.Set 中的值是唯一的，不允许重复。

2.Set 中的值是按插入顺序排列的。

3.Set 中的值可以是任何类型的值，包括原始类型和对象。

4.可以使用add() 方法向 Set 中添加新的值。

5.可以使用delete() 方法删除 Set 中的某个值。

6.可以使用has() 方法判断 Set 中是否存在某个值。

7.可以使用clear() 方法清空 Set 中的所有值。

下面是一个使用 Set 存储数据的例子：

Map 是一种类似于对象的数据结构，它可以存储键值对，其中键和值可以是任何类型的值，不允许重复的键。Map 中的键是按插入顺序排列的，可以快速地根据键获取对应的值。Map 有以下特点：

1.Map 中的键是唯一的，不允许重复。

2.Map 中的键和值可以是任何类型的值，包括原始类型和对象。

3.可以使用set() 方法向 Map 中添加新的键值对。

4.可以使用get() 方法根据键获取对应的值。

5.可以使用delete() 方法删除 Map 中的某个键值对。

6.可以使用has() 方法判断 Map 中是否存在某个键。

7.可以使用clear() 方法清空 Map 中的所有键值对。

下面是一个使用 Map 存储数据的例子：

24、介绍下promise

promise是一种异步编程解决方案，提供了一种更优雅的方式来处理异步操作，避免了回调地狱的问题。Promise是ES6新增的语法，其核心是一个对象，用于表示异步操作的最终完成状态以及结果值。

Promise有三种状态：

Pending：初始状态，既不是成功，也不是失败状态。

Fulfilled：意味着操作成功完成，Promise 对象的 then() 方法可以被调用，返回操作的结果。

Rejected：意味着操作失败，Promise 对象的 catch() 方法可以被调用，返回操作失败的原因。

25、如何改变函数的上下文

js中函数上下文是函数执行时所在的环境。可以使用call()、apply() 、bind()方法指定函数的上下文。

26、call和apply有什么区别

call和apply方法类似，可以指定函数执行上下文。但是apply的参数要求以数组的形式传递。

27、302、301状态码

302是HTTP协议中的一个状态码，表示该资源原本存在，但是已经被临时改变了位置。

301永久重定向，表示网页永久性转移到另外一个地址。

28、for...of语句循环遍历可迭代对象的值。

29、 ^是javascript的异或运算符，将两个数字的二进制表示逐位进行比较。

30、javascript中Set对象用法

javascript中Set是一种集合类型，可以存储不重复的值。

Set有下面几种用法：（1）set.add(value)向Set中添加元素。

（2）set.delete(value)从Set中删除元素

（3）set.has(value)判断set中是否包含某个元素。

（4）set.size获取Set中元素的数量。

31、javascript中的pop、push、join等方法

（1）pop方法：用于从数组的末尾移除一个元素。不接收任何参数。

（2）push方法：用于向数组末尾添加一个或多个元素。

（3）join方法：用于将数组中的所有元素连接成一个字符串。

29、javascript的split()方法

实现把一个字符串分割成字符串数组。

30、javascript的splice方法

splice方法用于添加或删除数组中的元素。

31、什么情况加不会造成回流

（1）CSS3的transform属性不回触发回流。

（22）CSS的position:fixed或position:absolute可以将元素从文档流中移除，不会触发回流。

32、HTML规定连续的空白字符视为单个空白字符。

使用

注意：&读（amd表示和的意思）