2024前端开发面试题

vue

1. spa 理解

	单页面应用（SPA）	多页面应用（MPA）
组成	一个主页面和多个页面片	多个主页面
刷新方式	局部刷新	整页刷新
url模式	哈希模式	历史模式
SEO	难实现，可使用SSR方式改善	容易实现
数据传递	容易	通过url、cookie、localStorage等传递
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

2. Vue实例挂载的过程

1. new Vue的时候调用会调用_init方法
	定义 $set、$get 、$delete、$watch 等方法
	定义 $on、$off、$emit、$off等事件
	定义 _update、$forceUpdate、$destroy生命周期
	调用$mount进行页面的挂载	

2. 挂载的时候主要是通过mountComponent方法

3. 定义updateComponent更新函数

4. 执行render生成虚拟DOM

5. _update将虚拟DOM生成真实DOM结构，并且渲染到页面中

3. v-for优先级大于v-if

4. data属性是一个函数而不是一个对象

会造成数据污染。创建vue实例会调用data函数 并将返回值作为该实例的数据对象。
如果是一个对象，引用地址（浅拷贝）一致就会造成数据污染；函数则可以避免

5. 动态给vue的data添加一个新的属性时会发生什么

1. 如果为对象添加少量的新属性，可以直接采用Vue.set()
2. 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
3. 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)
vue3 则是通过 set \ reactive refs toRefs toRaw

6. Vue中组件和插件

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

react

生命周期

挂载阶段
	constrouctor
	getDeriveSatetFromprops
	render
	componentDidMount
更新阶段
	getDerviceStateFromProps
	render
	getSnaptshortbeforeUpdate
	componentDidUpdate
卸载
	componentDidUnmount

hooks

[age, setAge] = useState(42);
useEffect(（）=>{ return ()=>{unmounted} }， []/null/基础数据类型/object 使用useRef）	
useContext() 1. createContext  2.注入 .provide包裹传递数据value 3.子组件接收
也可直接使用use读context
ref = useRef(refs) res.current 如果要用在自定义组件需要先用forwardRef 包裹组件
useMemo 每次重新渲染都能缓存计算结果 缓存值
usecallback 减少子组件的渲染次数 缓存函数
useReducer 类似于redux的reducer const [state, dispatch] = useReducer(reducer. init)
dispatch({type: '', key: 1})

纯组件和应该如何实现它

纯组件是一个没有副作用只依赖props的组件，如果props一致则返回最近一次缓存的结果，都是浅比较
1. class组件继承React.PureComponent
2. class组件使用shouldcompontupdate
3. hooks使用react.memo

解释一下React的props和state的区别

props不可修改
state this.setstate(()=>{},cb) 异步修改…
在组件生命周期或React合成事件中，setState是异步
在setTimeout或者原生dom事件中，setState是同步

如何在组件之间传递数据

props refs
回调
context.provide
eventbus
redux

描述一下React的虚拟DOM是如何工作的，以及它与真实DOM有什么不同？

你如何理解React的diffing算法？它如何帮助提高性能？

描述一个你使用React Hooks改进现有组件或功能的经历。

react Router进行路由管理，并处理路由之间的数据传递

1. 动态路由 props.match.param
2. search传递参数 props.location.search
3. to传入对象 props.location

eventbus 发布订阅者模式

hoc

传入一个组件传出一个组件
日常用的比如 redux的connect 自己封装的 权限组件 主要是复用逻辑

React Fiber

采用增量式渲染和异步任务优先级的策略，将任务划分成小块并分散在多个帧中执行，以提高应用性能。通过双缓冲和任务调度，Fiber能够更灵活地处理更新，并支持虚拟DOM的渐进式渲染和复杂应用的性能优化。

super

子类没有this对象，只能通过super继承父类 相当于
sup.prototype.constructor.call(this,name)
React 会在类组件构造函数生成实例后再给 this.props 赋值，在 super() 的情况下，调用 this.props 为 undefined

react 合成事件

React 所有事件都挂载在 document 对象上
所以会先执行原生事件冒泡，然后处理 React 事件
最后执行 document 上挂载的事件

js

var、let、const

变量提升
暂时性死区
块级作用域
重复声明
修改变量

object.assign()方法用于对象的合并 浅拷贝

数据类型

基本数据类型存储在栈中

引用类型的对象存储于堆中

new操作符具体干了什么

创建一个新的对象obj

将对象与构建函数通过原型链连接起来

将构建函数中的this绑定到新建的对象obj上

根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

apply call bind 区别

apply(this, []) 直接执行
call(this, ag1, ag2) 直接执行
bind(this, ag1, ag2)() 需要再次执行

事件循环机制

宏 -> 微 -> 宏
宏： settimeout
微：nexttick then

响应式布局

meta生命viewport
媒体查询
百分比
vw/vh
rem

伪数组 数组

伪数组：长度不可变、不具有数组的方法具有对象的方法、索引是字符串
数组：内置的下标和length、
区分: instanceof 、Array.isArray
伪数组变为数组：解构、Array.from

变量提升？函数变量提升？

变量提升：在作用域定义一个变量的时候，该变量会被提升到作用域的顶端；
函数变量提升类似，只不过函数提升要先于变量提升；

作用域链？如何延长

当前查找变量，在当前作用域找不到便会向上一层作用域查找，一直到作用域的顶部，形成的一条链为作用域链
闭包可以延长作用域链

阻止冒泡

1.event.stopPropogation()
2. addeventListen(click, ()=>(), false)

获取元素位置

dom.getbundingclientRect()