大智慧前端一面

自我介绍

1 上来拷打项目

2 vuex存储位置，vuex为什么比storage好

Vuex 存储位置通常是在前端应用程序的内存中。这意味着 Vuex 存储的数据会保存在客户端的内存中，而不是像 LocalStorage 或 SessionStorage 那样保存在浏览器的本地存储中。因此，与存储在本地存储中的数据相比，Vuex 存储的数据更加安全，不容易受到 XSS 攻击或 CSRF 攻击的影响。

Vuex 比起将数据存储在浏览器的本地存储中具有一些优势：

更高的性能：由于数据存储在内存中，访问速度更快，不需要通过网络请求从浏览器的本地存储中读取数据。
更好的数据一致性：由于数据存储在内存中，可以更容易地确保数据的一致性，避免了与异步读取本地存储相关的竞态条件。
更好的安全性：内存中的数据不易受到 XSS 攻击或 CSRF 攻击的影响，因为它们不会暴露给外部的 JavaScript 代码或发送到服务器。

尽管 Vuex 的数据存储在内存中，这意味着页面刷新或关闭浏览器后数据会丢失，但对于大多数前端应用程序而言，这并不是一个问题，因为通常会将重要的数据存储在服务器端，并通过网络请求来恢复数据。

因此，尽管 Vuex 存储的数据不会永久保存，但它提供了更好的性能、数据一致性和安全性，使得它成为管理前端应用程序状态的首选工具之一。

3 token存储位置

Token 存储位置通常有以下几种方式：

Cookies：将 Token 存储在 HTTP 请求的 Cookie 中。这种方式简单，并且在前端和后端之间自动发送，但可能会受到跨域限制，并且存在 CSRF 攻击的风险。
LocalStorage 和 SessionStorage：将 Token 存储在浏览器的本地存储或会话存储中。这种方式不会在每次请求中自动发送，需要手动添加到 HTTP 请求头中，且存在 XSS 攻击的风险。
IndexedDB：将 Token 存储在客户端的 IndexedDB 中。与 LocalStorage 和 SessionStorage 相比，IndexedDB 更安全，但使用稍微复杂一些。
Memory：将 Token 存储在前端应用程序的内存中。这种方式安全性较高，但在用户刷新页面或关闭浏览器后会丢失。
HTTP Only Cookie：将 Token 存储在 HTTP Only Cookie 中，这样可以防止 XSS 攻击，但不能在前端 JavaScript 中访问。

选择存储位置时，需要根据安全性、易用性和应用需求进行权衡。一般来说，推荐使用 Cookies 或 HTTP Only Cookie 存储 Token，以确保安全性，并尽量避免将敏感信息存储在本地存储中，以防止被攻击者窃取。

4 动态路由实现，按钮权限

动态路由实现和按钮权限控制是常见的前端权限管理问题，通常在前端框架中会有相应的解决方案。

动态路由实现

动态路由实现通常涉及以下步骤：

定义路由表：定义一个路由表，包含所有可能的路由信息，但不包括需要权限控制的路由。
获取用户权限信息：从后端获取用户的权限信息，通常是一个包含可访问路由或按钮的权限列表。
根据权限信息生成路由：根据用户的权限信息，动态生成可访问的路由，并将其添加到路由表中。
动态添加路由：将生成的动态路由添加到路由器中，使得用户在登录后可以访问其具有权限的页面。

在 Vue Router 中，可以通过以下方式实现动态路由：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 公共路由，不需要权限控制的路由
    { path: '/login', component: Login },
    { path: '/about', component: About },
    // 动态生成的权限路由
  ],
});

// 动态添加路由
router.addRoute({ path: '/admin', component: Admin });

按钮权限控制

按钮权限控制通常需要在组件级别进行，主要思路是根据用户的权限信息来决定是否渲染或禁用某个按钮。

在 Vue 中，可以通过以下方式实现按钮权限控制：

<template>
  <button v-if="hasPermission('edit')">Edit</button>
  <button v-if="hasPermission('delete')" @click="deleteItem">Delete</button>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      // 根据用户权限信息判断是否有权限
      return this.userPermissions.includes(permission);
    },
    deleteItem() {
      // 删除操作
    }
  }
};
</script>

在上述示例中，hasPermission 方法根据用户的权限信息判断是否有权限，然后根据权限决定是否渲染按钮。

5 按钮的隐藏怎么实现的，几种方式，v-if,v-show的区别

按钮的隐藏可以通过多种方式实现，其中包括使用 CSS、JavaScript 或 Vue 的指令等方法。

使用 CSS 的 display 属性：可以通过设置按钮的 display: none; 样式来隐藏按钮，这样按钮会完全消失，不占据页面空间。

button.hidden {
  display: none;
}

使用 CSS 的 visibility 属性：通过设置按钮的 visibility: hidden; 样式来隐藏按钮，按钮仍然会占据页面空间，但是不可见。

button.hidden {
  visibility: hidden;
}

使用 JavaScript 的 style 属性：通过 JavaScript 控制按钮的 style 属性来隐藏按钮。

document.getElementById("myButton").style.display = "none";

使用 Vue 的 v-if 指令：通过在按钮上使用 v-if 指令，并绑定一个布尔值，根据布尔值的真假来决定按钮是否渲染到页面上。

<button v-if="isVisible">Submit</button>

data() {
  return {
    isVisible: true
  };
}

使用 Vue 的 v-show 指令：与 v-if 类似，但是使用 v-show 指令时，按钮始终会渲染到页面上，只是根据绑定的布尔值来决定按钮是否显示。

<button v-show="isVisible">Submit</button>

data() {
  return {
    isVisible: true
  };
}

区别：

v-if：当条件为假时，按钮不会被渲染到 DOM 结构中，也就是说，按钮的 DOM 元素会完全移除，不占据页面空间。适用于需要频繁切换显示和隐藏的情况。
v-show：当条件为假时，按钮仍然会被渲染到 DOM 结构中，只是样式被设置为 display: none;，因此按钮仍然占据页面空间。适用于需要经常切换显示和隐藏，并且按钮处于频繁重绘的情况。按钮的隐藏可以通过多种方式实现，其中包括使用 CSS、JavaScript 或 Vue 的指令等方法。

使用 CSS 的 display 属性：可以通过设置按钮的 display: none; 样式来隐藏按钮，这样按钮会完全消失，不占据页面空间。

button.hidden {
  display: none;
}

使用 CSS 的 visibility 属性：通过设置按钮的 visibility: hidden; 样式来隐藏按钮，按钮仍然会占据页面空间，但是不可见。

button.hidden {
  visibility: hidden;
}

使用 JavaScript 的 style 属性：通过 JavaScript 控制按钮的 style 属性来隐藏按钮。

document.getElementById("myButton").style.display = "none";

使用 Vue 的 v-if 指令：通过在按钮上使用 v-if 指令，并绑定一个布尔值，根据布尔值的真假来决定按钮是否渲染到页面上。

<button v-if="isVisible">Submit</button>

data() {
  return {
    isVisible: true
  };
}

使用 Vue 的 v-show 指令：与 v-if 类似，但是使用 v-show 指令时，按钮始终会渲染到页面上，只是根据绑定的布尔值来决定按钮是否显示。

<button v-show="isVisible">Submit</button>

data() {
  return {
    isVisible: true
  };
}

区别：

v-if：当条件为假时，按钮不会被渲染到 DOM 结构中，也就是说，按钮的 DOM 元素会完全移除，不占据页面空间。适用于需要频繁切换显示和隐藏的情况。
v-show：当条件为假时，按钮仍然会被渲染到 DOM 结构中，只是样式被设置为 display: none;，因此按钮仍然占据页面空间。适用于需要经常切换显示和隐藏，并且按钮处于频繁重绘的情况。

6 css八股，position，选择器优先级等等

CSS 的 "八股" 通常指的是 CSS 布局中常用的一些属性和技巧，包括盒模型、定位、浮动、清除浮动、flexbox、grid 等等。下面是其中一些常见的内容：

盒模型（Box Model）：指元素在页面中所占的空间，由内容区、内边距、边框和外边距组成。
定位（Positioning）：包括相对定位、绝对定位、固定定位和粘性定位，可以让元素脱离文档流，并按照特定规则进行定位。
浮动（Floating）：通过浮动使元素沿页面流动，常用于实现文字环绕效果或多列布局。
清除浮动（Clearing Floats）：用于解决浮动元素导致的父元素塌陷问题。
Flexbox 布局：通过 display: flex 和相关属性实现灵活的、响应式的布局。
Grid 布局：使用网格布局进行页面布局，通过 display: grid 和相关属性实现。

关于选择器优先级，CSS 选择器根据其特定性来确定优先级。通常来说，选择器的特定性越高，其优先级就越高。一般来说，以下是选择器的优先级规则：

行内样式（Inline Styles）：特定性值为 1000。
ID 选择器（ID Selectors）：特定性值为 100。
类选择器、伪类选择器和属性选择器（Class Selectors, Pseudo-classes, Attribute Selectors）：特定性值为 10。
元素选择器和伪元素选择器（Element Selectors, Pseudo-elements）：特定性值为 1。

此外，还有一些规则用于计算多个选择器的特定性，例如：

对于相同特定性的选择器，后定义的样式会覆盖先定义的样式。
对于相同特定性的选择器，后出现的选择器会覆盖先出现的选择器。
使用 !important 关键字可以提升样式的优先级，但应慎用，因为它会增加样式的难以维护性。

7 js为什么是弱类型，删除数组第一个元素方法，判断数据类型方法

JavaScript被称为弱类型语言是因为在声明变量时不需要显式地指定数据类型，而是根据赋值的数据类型来确定变量的类型。这种特性使得JavaScript具有灵活的特性，但也可能导致一些不可预期的问题，因为它允许变量在运行时随时改变数据类型。

删除数组的第一个元素可以使用数组的 shift() 方法。这个方法会删除数组的第一个元素，并返回被删除的元素。如果数组是空的，shift() 方法返回 undefined。

判断数据类型的方法有多种，其中一种常见的是使用 typeof 操作符。例如：

typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"  注意：typeof null 返回 "object"，这是 JavaScript 的一个历史 bug
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"

此外，还可以使用 instanceof 操作符来检查对象的类型，或者使用 Object.prototype.toString.call() 方法来获取更准确的数据类型。

8 验证码是干什么的

验证码（Verification Code）是一种用于验证用户身份或者确保信息安全的机制。它通常以图像、文字或者数字的形式展示给用户，并要求用户输入正确的验证码才能完成某些操作，比如注册、登录、提交表单等。验证码的主要作用包括：

防止机器人和恶意程序： 验证码可以有效防止自动化程序（如机器人）恶意攻击网站或者进行大规模的注册、登录等操作，保障网站的安全性和稳定性。
保护用户隐私： 在一些敏感操作中，验证码可以确保用户身份的合法性，防止未经授权的用户访问或者篡改用户信息，提高用户的隐私安全性。
防止暴力破解： 通过验证码，可以防止恶意用户使用暴力破解密码的方式尝试登录账户，增加了破解的难度，提高了账户的安全性。

验证码通常会有一定的失真、扭曲或者随机干扰，以增加机器识别的难度，同时还会设置有效期限制，确保验证码的时效性。

反问公司做什么？大数据

感觉没什么意思，不是很想继续面了

作者：我要去大厂0165
链接：www.nowcoder.com/discuss/595…
来源：牛客网

前端面试题详解整理90| v-if,v-show验证码，判断数据类型 按钮权限控制，动态路由实现，按钮权限vuex存储位置，vuex为什么比storage好，