前端面试题整理14

目录

1.什么是同步？什么是异步？

2.localStorage、sessionStorage和cookie的区别？

3.Vue中key的作用是什么？

4.支付流程是什么？

5.Vuex的模块化是如何做的？

6.Vite和webpack的不同？Vite的优势是什么？

7.事件冒泡和捕获？

8.React中的事件合成机制？

9.Map，foreach，for...of区别？

10.组件之间如何自定义实现一个v-model？

---

1.什么是同步？什么是异步？

同步就是调用某个东西时，调用方需等待这个调用返回结果才能继续往后执行。

异步是在调用发出后调用者可用继续执行后续操作，被调用者通过状体来通知调用者，或者通过回掉函数来处理这个调用。

2.localStorage、sessionStorage和cookie的区别？

①存储的有效期不同：cookie在设置的有效期内一直有效；sessionStorage在浏览器关闭后就会失效；localStorage永久有效。

②存储大小不同：cookie的存储量是4kb左右；localStorage和sessionStorage的存储容量是5Mb或更大。

③对浏览器的支持：cookie对所有浏览器都支持；localStorage和sessionStorage对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)。

④与服务端的通信：cookie会参与到服务端的通信中，一般会携带在http请求的头部；localStorage和sessionStorage不参与与服务端的通信。

3.Vue中key的作用是什么？

Vue中key的作用是用于优化组件的渲染，当组件的key发生变化时，Vue会销毁旧的组件并重新创建一个新的组件，从而避免出现组件复用的问题。

4.支付流程是什么？

5.Vuex的模块化是如何做的？

Vuex的模块化是通过将Vuex的state、mutations、actions和getters拆分成多个小模块来实现的。具体来说，可以将Vuex的代码拆分成多个模块，每个模块可以有自己的state、mutations、actions和getters。这些模块可以通过Vuex的模块化注册方式注册到Vuex的store中。

6.Vite和webpack的不同？Vite的优势是什么？

①构建方式：Vite使用ESM原生模块化开发，它不需要预先构建，而是在浏览器端实时编译和构建；Webpack则是通过打包构建生成静态文件，在浏览器端加载。

②构建速度：由于Vite的构建方式不需要预先构建，所以它的构建速度比Webpack更快。在开发过程中，Vite可以实时编译和构建，所以它可以更快地更新更改后的代码。

③插件机制：Vite采用了基于Rollup的插件机制，可以轻松地扩展和定制开发环境；Webpack的插件机制则相对复杂，需要对Webpack的内部机制有一定的了解。

④对开发体验的优化：Vite针对开发过程进行了优化，它支持快速的HMR（热更新）功能，可以在不刷新浏览器的情况下实时更新应用程序，提高开发效率。

⑤静态资源处理：Vite支持在开发环境下直接加载静态资源，而Webpack需要将静态资源打包到输出文件中。

Vite相对于Webpack的优势主要在于构建速度快、开发体验好、支持原生ESM模块化开发以及插件机制简单等方面。因此，对于开发小型应用或者需要频繁调试的场景，使用Vite会更加方便和高效。

7.事件冒泡和捕获？

事件冒泡和捕获是指事件传递的两种方式。

事件冒泡是指事件从子元素向父元素逐级传递，而事件捕获则是从父元素向子元素逐级传递。

事件冒泡将从一个子元素开始，在 DOM 树上传播，直到最上面的父元素事件被处理。

事件捕获是事件传播的初始场景，从包装元素开始，一直到启动事件生命周期的目标元素。

8.React中的事件合成机制？

React中的事件合成机制是指React将浏览器原生事件封装成一个合成事件对象，这样可以屏蔽浏览器兼容性和性能问题。React使用了事件委托的方式处理事件，将所有事件添加到document上，然后通过冒泡机制从目标元素一直到document，寻找最合适的元素来处理事件。React事件合成机制的好处是可以提高性能，减少内存占用，同时也方便了开发者的使用。

9.Map，foreach，for...of区别？

• Map：返回一个新数组，数组中的元素为原数组元素调用函数处理后的值。
• foreach：没有返回值，只是对原数组进行遍历操作，并执行回调函数。
• for...of：遍历可迭代对象，例如数组、字符串、Map等。每次迭代返回一个元素的值。

10.组件之间如何自定义实现一个v-model？

在React中，v-model可以理解为一个双向绑定的语法糖，可以通过props将组件状态传递给父组件，再由父组件修改状态，然后通过props将修改后的值传递回子组件。

实现步骤如下：

1. 在子组件中定义一个value属性和一个onChange事件处理函数。
2. 在父组件中定义一个handleValueChange函数，用于修改value的值。
3. 在父组件中通过props将handleValueChange函数和value的值传递给子组件。
4. 在子组件中绑定value属性和onChange事件处理函数，当value值改变时，调用onChange事件处理函数，并将新的value值传递给父组件的handleValueChange函数。

   // 子组件
   function ChildComponent(props) {
     return (
       
   
         
       
     );
   }
   
   // 父组件
   function ParentComponent() {
     const [value, setValue] = useState('');
   
     const handleValueChange = (newValue) => {
       setValue(newValue);
     };
   
     return (
       
   
          handleValueChange(e.target.value)} />
       
     );
   }