24年最强的前端面试八股文

24年最强的前端面试八股文

在2024年的前端面试中，掌握以下八股文将大大提升你的竞争力。以下是根据当前前端技术趋势和大厂面试要求整理的面试题集，涵盖了Vue、React、小程序、Webpack、TypeScript、Node.JS、GIT以及其他常见面试题。

1. 说说vue动态权限绑定渲染列表（权限列表渲染）

   Vue中可以通过指令（如v-if）结合权限数据动态渲染列表项。

2. Vue用的哪种设计模式

   Vue采用了MVVM（Model-View-ViewModel）设计模式。

3. 说说vue操作真实dom性能瓶颈

   直接操作DOM会导致性能问题，因为每次操作都会触发浏览器的重排和重绘。Vue通过虚拟DOM来减少真实DOM的操作，提高性能。

4. Vue中如何获取dom、操作dom、更新dom

   使用ref属性获取DOM元素，然后通过JavaScript操作DOM。更新DOM通常通过Vue的数据绑定机制自动完成。

5. Vue的双向数据绑定原理是什么

   基于ES6的Object.defineProperty（Vue 2.x）或Proxy（Vue 3.x）实现数据劫持，当数据变化时，自动更新视图。

6. mvvm框架是什么

   MVVM是一种设计模式，Model代表数据模型，View代表视图层，ViewModel是View和Model的桥梁，负责双向数据绑定。

7. 谈谈Vue的token存储

   通常存储在localStorage或sessionStorage中，也可以存储在cookie中，但需要注意安全性和大小限制。

8. 知道nextTick的作用吗，谈谈对它的理解，是什么，怎么用

   nextTick用于在下次DOM更新循环结束之后执行延迟回调。在修改数据后立即使用nextTick可以获取更新后的DOM。

9. nextTick和setTimeout区别

   nextTick是Vue提供的，用于等待下次DOM更新；setTimeout是JavaScript内置的，用于延迟执行代码。

10. vue中为什么用虚拟dom而不操作真实dom

    虚拟DOM可以提高性能，通过比较新旧虚拟DOM的差异，只更新变化的部分，减少真实DOM的操作。

11. Vue如何进行组件传值

    父组件通过props向子组件传值，子组件通过事件向父组件传值，兄弟组件之间可以通过事件总线或Vuex进行通信。

12. 说说vue里面的父子通信

    父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递信息。

13. 谈谈如何实现vue组件通信和传值方式

    同上。

14. 说说vue中Key值的作用

    Key值用于给每个节点一个唯一的标识，在列表渲染时，Vue会根据key值来判断新旧节点是否相同，从而决定是复用节点还是重新渲染。

15. 说说vue中的虚拟dom和diff算法

    虚拟DOM是Vue用于描述真实DOM的JavaScript对象；diff算法用于比较新旧虚拟DOM的差异，从而高效更新真实DOM。

16. vue3.0有了解过吗，你觉得vue3.0好吗，好在哪

    Vue 3.0引入了Composition API，提供了更好的逻辑复用和代码组织方式；性能也有所提升，如更快的响应速度和更小的打包体积。

17. VUE组件如何与iframe通信问题

    可以通过postMessage API实现跨窗口通信，包括Vue组件与iframe之间的通信。

1. 说说React中onClick绑定后的工作原理

   React中的事件处理是通过事件委托实现的，所有事件都绑定在根节点上，然后通过事件冒泡和事件代理机制处理具体事件。

2. 说说react里面bind与箭头函数

   bind用于改变函数内部的this指向；箭头函数不会创建自己的this，它会捕获其所在上下文的this值。

3. 说说react中的性能优化

   包括使用PureComponent或React.memo进行浅比较、避免不必要的渲染、使用懒加载和代码分割等。

4. 高阶组件和高阶函数是什么

   高阶组件是一个函数，它接收一个组件并返回一个新的组件；高阶函数是接收函数作为参数或返回函数的函数。

5. setState和repalceState的区别

   setState用于更新组件的状态，可以合并新旧状态；replaceState（不常用）会直接替换当前状态。

6. redux中核心组件有哪些,reducer的作用

   Redux的核心组件包括Store、Action和Reducer；Reducer是一个纯函数，用于根据当前状态和Action计算新的状态。

7. 什么是受控组件

   受控组件是指其值由React组件的state控制的组件，通常用于表单元素。

8. hooks+context和redux你是怎么选择的，都在什么场景下使用

   Hooks和Context适用于小型应用或组件间的简单状态共享；Redux适用于大型应用或复杂的状态管理。

9. useffect模拟生命周期

   useEffect可以模拟componentDidMount、componentDidUpdate和componentWillUnmount等生命周期方法。

10. setsate更新之后和usestate的区别

    setState是类组件中用于更新状态的方法；useState是函数组件中用于声明状态的Hook。

11. react父组件props变化的时候子组件怎么监听

    子组件可以通过props接收父组件传递的数据，当props变化时，React会自动重新渲染子组件。

12. usememo在react中怎么使用

    useMemo用于在组件渲染过程中避免重复计算，它返回一个记忆化的值。

13. React Hooks各种函数介绍

    包括useState、useEffect、useContext、useReducer、useRef、useCallback、useMemo等。

14. React Component和Purecomponent区别

    Component是React的基础组件类；PureComponent对props和state进行浅比较，如果相同则不重新渲染。

15. hooks相对于class的优化

    Hooks使函数组件能够使用状态和其他React特性，同时避免了类组件的复杂性。

16. hooks父组件怎么调用子组件的方法

    可以通过useRef获取子组件的引用，然后调用子组件的方法。

17. 讲一下react中的通信

    包括父子组件通信（props和事件）、兄弟组件通信（通过父组件或Context）、跨组件通信（Redux、MobX等）。

18. react通过什么方法修改参数

    通过调用setState方法修改组件的状态参数。

19. 说你对react native的了解

    React Native是React在移动端的实现，允许开发者使用JavaScript和React来开发原生移动应用。

20. redux的实现原理

    Redux是一个状态管理库，它通过一个单一的store来管理应用的状态，并通过reducer函数来根据action更新状态。

1. 简单谈谈微信小程序

   微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的无处不在、随时可用，用户扫一扫或搜一下即可打开应用。

2. 小程序的原生组件有哪些

   包括<canvas/>、<video/>、<map/>、<input/>、<textarea/>等。

3. 小程序的安卓版和ios版是怎么开发出来

   使用微信开发者工具进行开发，代码编写一次，可同时在Android和iOS上运行。

4. uni-app弹窗被覆盖怎么解决

   可以调整弹窗的z-index值或使用其他布局方式确保弹窗在最上层显示。

5. 小程序生命周期

   包括onLoad（页面加载）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）等。

6. 小程序路由跳转

   可以使用wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch等方法进行页面跳转。

7. 小程序的兼容问题有哪些

   包括不同版本的微信客户端对小程序的支持差异、不同手机品牌和操作系统的差异等。

8. 小程序框架都学握哪一些,uniapp都会哪一些，平时开发遇到的困难

   需要掌握微信小程序的框架和API，以及uni-app的跨平台开发能力；困难可能包括性能优化、兼容性问题等。

9. 小程序怎么获取手机号

   通过调用wx.login获取用户的临时登录凭证，然后结合后端服务获取用户的手机号。

10. 小程序的登录流程

    用户点击登录按钮，调用wx.login获取临时登录凭证，然后发送到后端服务器进行验证和换取用户信息。

11. 小程序如果版本更新了怎么通知用户

    可以通过微信的消息推送功能通知用户小程序有新版本更新。

12. 小程序嵌入H5页面怎么做