前端最最基础面试题

1.localStorage,SessionStorage,Cookies 的区别?

localStorage、sessionStorage和Cookies在前端开发中都是用于存储数据的机制，但它们之间存在一些关键的区别，主要体现在以下几个方面：

1.数据的生命周期：

• localStorage：数据会一直保存在浏览器中，直到用户或脚本显式地删除它。这意味着，即使关闭浏览器或重启计算机，localStorage中的数据也不会丢失。
• sessionStorage：数据仅在当前浏览器会话中有效，当浏览器窗口或标签页关闭时，数据会被清除。因此，sessionStorage适用于存储临时数据，如用户在当前会话中的操作状态。
• Cookies：生命周期由设置的过期时间决定。如果未设置过期时间，则Cookies会在浏览器关闭时失效；如果设置了过期时间，则Cookies会在过期时间到达时失效。

2.存储大小：

• localStorage：HTML5规定每个域名下的localStorage最大容量为5MB。
• sessionStorage：与localStorage相似，也有较大的存储空间，但具体大小可能因浏览器而异。
• Cookies：大小通常受到浏览器的限制，一般不超过4KB。因此，Cookies不适合存储大量数据。

3.存储位置与安全性：

• localStorage和sessionStorage：数据存储在客户端（即用户的浏览器）上，不占用服务器资源。由于数据在客户端，因此安全性相对较低，不适合存储敏感信息。
• Cookies：同样存储在客户端，但安全性也较低。Cookies中的信息可以被用户或恶意软件访问和修改，因此也不适合存储敏感信息。

4.数据共享：

• localStorage：数据可以在同一浏览器的不同窗口和标签页之间共享。
• sessionStorage：数据仅在当前浏览器窗口或标签页中有效，不同窗口或标签页之间的sessionStorage数据是独立的。
• Cookies：对于同一域名下的网站，可以共享Cookies。这使得Cookies在跨页面跟踪用户会话时非常有用。

综上所述，localStorage、sessionStorage和Cookies在数据的生命周期、存储大小、存储位置与安全性以及数据共享方面都存在明显的区别。在选择使用哪种机制时，需要根据具体的应用场景和需求来决定。

2.css定位中relative是基于什么进行定位?

CSS中的相对定位（relative）是基于元素在文档流中的原始位置进行定位的。这意味着，当你为一个元素设置相对定位时，它会相对于其原本在文档流中的位置进行移动。这种移动并不会使元素脱离文档流，也就是说，它仍然会占据原本的空间，并可能影响其他元素的位置。

在CSS中，要实现相对定位，你需要将元素的position属性设置为relative。然后，你可以使用top、right、bottom和left这四个属性来指定元素相对于其原始位置应该移动的距离。

需要注意的是，相对定位的元素虽然移动了位置，但它的显示模式并不会改变。同时，在布局中，相邻元素会参照相对定位元素原来的位置进行布局，这可能会导致位置重叠，其中定位元素会显示在上层。

总的来说，CSS中的相对定位提供了一种灵活的方式来调整元素的位置，同时保持元素在文档流中的原有状态。

3.200px宽度的div中有两个100px宽度div,这两个div设置display:inline-block之后，页面是什么样的布局效果?

当你设置两个div的宽度为100px，并且它们都是display:inline-block时，它们会并排显示，占据的总宽度为200px。然而，你还需要考虑元素之间的间隙。

默认情况下，inline-block元素之间会有一个小的间隙，这是由HTML源代码中的空格或换行符造成的。这个间隙的宽度取决于字体大小和字体家族。所以，即使两个div的总宽度是200px，由于这个间隙的存在，它们可能不会完全填满200px宽度的容器。

为了消除这个间隙，你可以采取以下几种方法之一：

1.移除HTML源代码中的空格和换行：把两个div的元素放在同一行，并且没有空格或换行符。

<div class="inline-block"></div><div class="inline-block"></div>

2.使用CSS的font-size:0：在包含inline-block元素的父元素上设置font-size:0，然后单独设置子元素的字体大小。

.parent {
    font-size: 0;
}

.inline-block {
    font-size: 16px; /* 或者你需要的任何字体大小 */
    display: inline-block;
    width: 100px;
}

3.使用CSS的margin-right: -4px：这是一种经验性的解决方法，-4px通常可以消除默认的间隙，但这不是一个可靠的方法，因为它依赖于特定的字体和浏览器。

注意：使用inline-block时，还需要考虑垂直对齐的问题，因为默认情况下，inline-block元素会按照其基线对齐。如果需要，你可能还需要设置vertical-align属性。

总之，两个100px宽的div设置为display:inline-block后，会并排显示，但由于默认的间隙，可能不会完全填满其父容器的宽度。你可以使用上述方法来消除这个间隙。

4.var,let,const的区别?

var、let 和 const 都是 JavaScript 中用于声明变量的关键字，但它们之间有一些重要的区别。以下是它们之间的主要差异：

1.作用域：

• var：具有函数作用域或全局作用域。在函数内部声明的 var 变量是局部的，在函数外部声明的则是全局的。但有一个“变量提升”的特性，即 var 声明的变量会提升到其所在作用域的顶部，即使它们在代码中的实际位置在更下方。
• let 和 const：具有块级作用域（也称为词法作用域）。这意味着它们只在其被声明的代码块（如 {} 中）内有效。它们没有变量提升的特性，必须在使用之前声明。

2.重复声明：

• var：允许在同一作用域内重复声明同一个变量。
• let 和 const：不允许在同一作用域内重复声明同一个变量。

3.重新赋值：

• var 和 let：声明的变量可以被重新赋值。
• const：声明的变量是一个常量，不能被重新赋值。但是，如果 const 声明的是一个对象或数组，你可以修改该对象或数组的内容（即修改其属性或元素），但不能将其指向另一个对象或数组。

4.暂时性死区（Temporal Dead Zone, TDZ）：

• let 和 const：在它们被声明的块或作用域内，但在实际声明之前的区域，被称为暂时性死区。在这个区域内引用这些变量会抛出一个引用错误（ReferenceError）。而 var 没有这个特性。

5.全局对象的属性：

• var：在全局作用域中声明的变量会成为全局对象（在浏览器中是 window 对象）的属性。
• let 和 const：在全局作用域中声明的变量不会成为全局对象的属性。

6.ES6 支持：

• var：在 ES5 和之前的版本中广泛使用。
• let 和 const：在 ES6（也称为 ECMAScript 2015）中引入，是 ES6 引入的新特性之一。

为了代码的可读性和维护性，现代 JavaScript 开发中推荐使用 let 和 const，并尽量避免使用 var。

5.如何实现const ?

在 JavaScript（ES6及以上） 中，你可以使用 const 关键字来声明一个常量。但是请注意，const 在 JavaScript 中实际上意味着引用的常量，即你不能重新给 const 变量分配一个新的值，但如果你声明的是一个对象或数组，你可以修改该对象或数组的内容（即改变其属性或元素）。

const MY_CONSTANT = 42; // 声明一个常量

// 尝试修改常量的值会抛出错误
// MY_CONSTANT = 43; // TypeError: Assignment to constant variable.

const myObject = { value: 42 }; // 声明一个常量对象
myObject.value = 43; // 可以修改对象的属性，因为对象的内容是可变的

// 但是不能重新给 myObject 分配一个新的对象
// myObject = { value: 44 }; // 

6.箭头函数和普通函数的区别?

箭头函数和普通函数在JavaScript中有一些重要的区别。以下是它们之间的主要差异：

1.this关键字的行为：

• 普通函数：在普通函数中，this 的值取决于函数的调用方式。如果函数作为对象的方法被调用，this 将指向该对象；如果函数作为普通函数被调用，this 通常指向全局对象（在浏览器中是 window）或在严格模式下是 undefined。
• 箭头函数：箭头函数不会创建自己的 this 上下文，所以 this 关键字在箭头函数中指向的是定义函数时的上下文。这意味着，无论箭头函数如何被调用，this 都不会改变。

2.arguments对象：

• 普通函数：普通函数内部有一个 arguments 对象，它是一个类数组对象，包含了传递给函数的所有参数。
• 箭头函数：箭头函数没有 arguments 对象。如果需要访问所有参数，可以使用剩余参数（rest parameters）语法。

3.构造函数：

• 普通函数：普通函数可以作为构造函数，使用 new 关键字来创建新的对象实例。
• 箭头函数：箭头函数不能用作构造函数，使用 new 与箭头函数一起会抛出错误。

4.call、apply和bind方法：

• 普通函数：普通函数有 call、apply 和 bind 方法，这些方法允许你调用函数时指定 this 的值，以及以数组或类似数组对象的形式传递参数。
• 箭头函数：箭头函数没有这些方法，因为它们不创建自己的 this 上下文，而且也不能被当作函数对象的方法。

5.语法简洁性：

• 箭头函数：箭头函数提供了一种更简洁的函数语法，特别是在需要匿名函数或简短回调时。它们不需要使用 function 关键字，并且省略了花括号和 return 关键字（当函数体只有一条表达式时）。

以下是一个比较普通函数和箭头函数的示例：

// 普通函数
function regularFunction() {
  console.log(this.value);
}

const obj = {
  value: 'Hello',
  method: regularFunction
};

obj.method(); // 输出 "Hello"

// 箭头函数
const arrowFunction = () => {
  console.log(this.value);
};

const obj2 = {
  value: 'World',
  method: arrowFunction
};

obj2.method(); // 输出可能是 "undefined" 或全局对象的属性，取决于箭头函数定义时的上下文

在上面的例子中，普通函数 regularFunction 在作为对象 obj 的方法被调用时，this 指向 obj。而箭头函数 arrowFunction 在作为对象 obj2 的方法被调用时，this 不会指向 obj2，而是指向定义箭头函数时的上下文（在这个例子中可能是全局对象）。

7.Vue3和Vue2的区别？

Vue3和Vue2之间存在一些显著的区别。以下是它们之间的一些主要差异：

1.性能：Vue3的性能比Vue2提高了约1.2到2倍。这主要得益于Vue3的底层优化和新的编译策略。
2.响应式原理：Vue2和Vue3的响应式原理有所不同。Vue2底层是通过es5的Object.defineProperty进行数据劫持，而Vue3底层则是通过es6的Proxy代理，使用ref或者reactive将数据转化为响应式数据。Proxy能够更好地支持动态添加属性和删除属性。
3.编译优化：Vue3引入了新的编译策略，包括Tree Shaking支持，允许你按需编译你的代码，使最终的构建包体积更小。
4.组合式API（Composition API）：Vue3引入了Composition API，它类似于React的Hooks，使得代码更加灵活和可复用。Vue2主要使用选项式API（Options API），而Vue3则同时支持选项式API和组合式API。
5.自定义渲染API：Vue3暴露了自定义渲染API，这使得开发者可以更加灵活地控制渲染过程。
6.新增组件：Vue3新增了三个组件：Fragment、Teleport和Suspense。这些组件提供了更多的功能和灵活性。
7.TypeScript支持：Vue3对TypeScript的支持更加友好，使得在Vue3中使用TypeScript变得更加容易和方便。

总的来说，Vue3在性能、响应式原理、编译优化、API设计、自定义渲染和TypeScript支持等方面都有所改进和提升。然而，Vue2仍然是一个成熟且稳定的框架，如果你对Vue2已经熟悉并满意其表现，那么你可以继续使用Vue2进行开发。但如果你追求更好的性能和更多的新特性，那么Vue3将是一个不错的选择。

8.vue2中对象新增一个字段还是响应式吗？如何变成响应式？

在Vue2中，当你直接给对象新增一个字段时，这个字段默认不是响应式的。但是，你可以通过Vue提供的一些方法来确保新增的字段也是响应式的。

一种常用的方法是使用Vue.set（全局方法）或this.$set（实例方法）。这两个方法都可以用于向响应式对象中添加一个属性，并确保这个新属性也是响应式的，且触发视图更新。

以下是使用Vue.set和this.$set的示例：

1.使用Vue.set：

import Vue from 'vue';

let obj = new Vue({
  data: {
    myObject: {
      a: 1
    }
  }
});

// 使用 Vue.set 添加一个新属性
Vue.set(obj.myObject, 'b', 2);

注意：在实际应用中，你通常不会在全局范围内使用Vue.set来修改组件的数据。这里只是为了演示方法的使用。

2.使用this.$set（在Vue组件的方法中）：

export default {
  data() {
    return {
      myObject: {
        a: 1
      }
    };
  },
  methods: {
    addNewProperty() {
      // 使用 this.$set 添加一个新属性
      this.$set(this.myObject, 'b', 2);
    }
  }
};

在上面的示例中，当你在Vue组件的某个方法中使用this.$set时，你可以确保新添加的属性b是响应式的，并且当它的值发生变化时，视图也会相应地更新。

9.vue router的params和query的传参区别？

Vue Router的params和query是两种常见的传参方式，它们之间存在一些明显的区别。

首先，从传参方式来看，params是通过路由的name来传递参数的，也就是说，需要在路由配置中指定name属性，并在跳转时通过this.$router.push({ name: 'routerName', params: { key: value } })的形式传递参数。而query则是通过路由的path来传递参数的，可以在跳转时直接拼接参数到url中，例如this.$router.push({ path: 'routerPath', query: { key: value } })

其次，从参数的获取方式来看，params传参后，参数会出现在路由的url路径中，但不会显示在地址栏中，可以通过this.$route.params来获取传递的参数值。而query传参后，参数会拼接在url地址后面，并在地址栏中显示，可以通过this.$route.query来获取传递的参数值。

此外，从参数的特点来看，params传递的参数是有限的，通常是一个字符串或者一串数字，而query传递的参数没有限制，可以传递任意类型的数据。

最后，从刷新后参数保留的角度来看，使用params传参的数据在页面刷新后会消失，而使用query传参的数据在页面刷新后仍然保留。

总的来说，Vue Router的params和query在传参方式、参数获取、参数特点以及刷新后参数保留等方面都存在明显的区别。在选择使用哪种传参方式时，需要根据具体的业务需求和场景来决定。

10.说一下vuex的使用流程?

Vuex的使用流程主要涉及安装、配置和使用三个阶段。以下是一个简化的Vuex使用流程：

1.安装Vuex：

首先，你需要使用npm包管理工具来安装Vuex。在命令行中输入以下命令：

npm install vuex --save

注意，这里加上- -save是为了确保这个包在生产环境中是可以使用的。

2. 配置Vuex：

接下来，你需要配置Vuex。通常，我们会创建一个新的store文件夹（虽然不是必须的），并在该文件夹下创建一个store.js文件。在这个文件中，你需要引入Vue和Vuex，并使用Vue.use进行引用。示例代码如下：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 定义你的状态数据
    count: 0
  },
  mutations: {
    // 定义修改state的方法
    add(state) {
      state.count++;
    }
    // ...其他mutations
  },
  actions: {
    // 定义异步操作或者复杂逻辑
    // ...actions
  },
  getters: {
    // 定义基于state的计算属性
    // ...getters
  }
});

在这个示例中，我们定义了一个名为count的状态数据，以及一个用于修改count的add方法。你可以根据自己的需求添加更多的状态、mutations、actions和getters。

3. 使用Vuex：

在你的Vue组件中，你可以通过this.$store来访问Vuex的store。例如，你可以在计算属性或方法中调用this.$store.state.count来获取count的值，或者通过this.$store.commit('add')来触发add mutation修改count的值。

另外，你也可以在Vue组件中使用mapState、mapMutations、mapActions和mapGetters等辅助函数来更简洁地访问Vuex的状态和方法。

此外，需要注意的是，Vuex的状态管理应该遵循一定的规范和原则，例如避免在mutations中进行异步操作，避免直接修改state等。同时，Vuex的状态应该是响应式的，即当状态发生变化时，视图应该自动更新。

以上就是一个基本的Vuex使用流程。当然，Vuex的功能和用法远不止这些，你可以根据项目的需求进一步学习和探索Vuex的高级特性和用法。