目录
1.什么是同步？什么是异步？
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将修改后的值传递回子组件。
实现步骤如下：
- 在子组件中定义一个value属性和一个onChange事件处理函数。
- 在父组件中定义一个handleValueChange函数，用于修改value的值。
- 在父组件中通过props将handleValueChange函数和value的值传递给子组件。
- 在子组件中绑定value属性和onChange事件处理函数，当value值改变时，调用onChange事件处理函数，并将新的value值传递给父组件的handleValueChange函数。
// 子组件 function ChildComponent(props) { return ( <div> <input value={props.value} onChange={props.onChange} /> </div> ); } // 父组件 function ParentComponent() { const [value, setValue] = useState(''); const handleValueChange = (newValue) => { setValue(newValue); }; return ( <div> <ChildComponent value={value} onChange={(e) => handleValueChange(e.target.value)} /> </div> ); }
