前端基础面试题(js、vue、react)

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ..

已于 2022-04-19 13:55:09 修改

阅读量815

点赞数

文章标签：面试

于 2022-04-17 14:57:47 首次发布

本文链接：https://blog.csdn.net/betterAndBetter_/article/details/124229478

版权

文章目录

vue2面试题
js面试题
react面试题

vue2面试题

vue的双向绑定原理？

双向绑定的原理也叫响应式原理，Vue它是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调，来完成双向绑定。

vue3双向数据绑定使用的是代理，与Vue2相比的好处在于不消耗性能，因为Vue2使用Object.defineProperty()方法嵌套深层的话需要使用递归比较耗性能，而Vue3使用代理则不用。

vue的组件通讯方式？

vue组件通信方式有:props、 $e m i t 、$ on、vuex、$parent 、 $children

vue的生命周期？

1、beforeCreate（创建前）
2、created（创建后）
3、beforeMount（载入前）
4、mounted（载入后）
5、beforeUpdate（更新前）
6、updated（更新后）
7、beforeDestroy（销毁前）
8、destroyed（销毁后）

vue的data为什么是一个函数，而不是一个对象？

如果vue组件中的data是对象，我们在几个地方使用一个组件，那么因为此时的几个组件中的数据引用的都是同一个内存地址，更改一个组件的时候其他组件也会受影响，数据污染产生。所以vue2中组件中的data是函数而不是对象

vue中的created和watch的区别？

created只在new Vue()对象创建完成后触发一次，watch中的函数,只要变量变化，就会触发。反复变化多次，就会自动触发多次。

vue中computed和watch的区别？

computed适用于一个数据被多个数据影响，而watch适用于一个数据影响多个数据。

vue中的路由的原理？
vue中keep-alive的作用？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

vue的指令有哪些？

常用的指令的有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model

vue的修饰符有哪些？

事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.passive 告诉浏览器你不想阻止事件的默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次

v-model的修饰符
.lazy change事件完成后再同步
.number 自动将用户的输入值转化为数值类型
.trim 自动过滤用户输入的首尾空格

vue中路由传承那有哪几种方式？

vue路由传参到底有几种方式

vuex的理解和使用场景以及优缺点？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
优点：状态全局管理，减少组件通讯成本
缺点：比较笨重

js面试题

JavaScript面试题大全之基础面试题（附答案）

react面试题

React类组件和函数组件之间有什么区别？

函数组件是一个纯函数,它接收一个props对象返回一个react元素;而类组件需要去继承React.Component并且创建render函数返回react元素。
函数组件没有生命周期和状态state,而类组件有。

结合生命周期，谈一谈React类组件的运行机制。

componentDidMount() ：组件已经出现在页面

componentDidUpdate() ：组件已更新

componentWillUnmount() ：组件将死

shouldComponentUpdate() ：return false 阻止更新

React中组件间通信，你有哪些方案?

父子通信
跨级组件通信
1.props 逐层传递 (不考虑)
2.context 传递
非嵌套组件通信 (如兄弟组件等)
使用机制：消息订阅与发布
useModel/redux

谈一谈props和state之间的区别。

props是组件对外的接口，用于组件之间的传值，props在组件内部是不可修改，可以看作只读属性。

state可以看作组件的私有属性，用于组件内部的数据传递。

this.setState()有什么特点？

调用 this.setState() 后， this.state 对象中的值不会立刻更新
多次调用 this.setState() 会产生合并效果
this.setState() 的第一个参数可以是函数

有哪些定义React组件的方式？

函数组件、类组件

谈一谈你对React受控组件的理解。

受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据
非受控组件，简单来讲，一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态

什么是组合？组合与继承在实现组件复用上的差别。

是由很多个组件组合使用的，而且每个组件之间或多或少的有些关系，我把这些组件就称作组合组件

谈一谈你对JSX的理解。

1、jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。

2、JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。

描述 Diff运算过程，如何比较两个虚拟DOM的差异？
谈一谈 React Context 上下文的实践应用

跨级组件通信

高阶组件有哪些应用场景？
常用 React Hooks API 及其作用、特点。

useState 建议根据哪些值是一起变化的，将state拆分成多个小的state。而不是一上来就设一个大的复杂state。
useEffect 函数组件没有生命周期，但用useEffect代替
useContext 上下文
useRef 绑定DOM，或者跨useEffect周期读数据
useCallback
useMemo

封装自定义Hooks，有哪些注意事项。

提炼出自己业务中那些公共的逻辑
如提取日/月/季/年=》起始时间的转换逻辑

React技术栈中，有哪些代码复用的技巧？

自定义hooks，高阶组件

React中的refs作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

从React的角度，说一说有哪些性能优化策略。

列表渲染的时候加key；
在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；
合理设计组件，减少props和state

谈一谈你对React服务端渲染的理解。
react-router常用组件有哪些，分别有什么用？

React Router中的组件主要分为三类：
路由器，像和
Route匹配器，例如和
和导航，比如，和

withRouter有什么用？如何自定义封装withRouter？

目的就是让被修饰的组件可以从属性中获取history,location,match,
路由组件可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了。

什么是动态路由？如何使用路由传参？什么是嵌套路由？什么场景下会用到嵌套路由？

react-router v4 中，请把路由看成普通的 React 组件，传递 props 来正常使用（之前会忽略掉这些属性），借助它来控制组件的展现。展示的逻辑及权利回归到了组件本身，回归到了熟悉的 React。这样，没有了静态配置的路由规则，取而代之的是程序在运行渲染过程中动态控制的展现。这便是 v4 中称之为的动态路由。

所谓的嵌套路由就是在某些以及路由下面存在二级路由，这些二级路由除了公用一级路由导航模块外，还公用当前的二级路由的导航模块，也就是部分进行了切换

mobx中有哪些核心概念？常用的修饰器方法有哪些？
说一下redux的工作流程，谈一谈你对redux数据的理解。
谈一谈mobx和redux的区别、使用场景。
react常用生命周期，及其特点、使用场景。
react严格模式下有哪些限制
什么Fiber？谈一谈你对React Fiber架构的理解。
什么是redux中间件？常用的有哪些？谈一谈redux-saga、redux-thunk的理解。
什么是React合成事件？为什么存在合成事件？有什么特点？

React合成事件是React 模拟原生DOM事件所有能力的一个事件对象。
根据 W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原声事件相同的接口。合成事件除了拥有和浏览器原生事件相同的接口，包括stopPropagetion()和preventDefault()；在React中，所有事件都是合成的，不是原生DOM事件

为什么出现这个技术？
浏览器兼容，实现更好的跨平台。顶层事件代理机制：保证冒泡一致性，可以跨浏览器执行。将不同平台事件模拟成合成事件；
避免垃圾回收。React引入事件池，在事件池中获取或释放事件对象。React事件对象不会被释放掉，而是存入一个数组中；当事件触发，就从这个数组中弹出，避免频繁地创建和销毁（垃圾回收）；
方便事件统一管理和事务机制