一些其他的面试题一、react中引入组件的情况 1. 用const C = 组件的方式引入组件，再{C}{C}方式使用

一、react中引入组件的情况

1. 用const C = 组件 的方式引入组件，再{C}{C}方式使用组件，页面中的两个组件互相并不会影响

2. 对于同一个组件，在父组件中多处使用，它们之间也不会相互影响

3. 父组件中引入两个子组件，用三元运算符控制显示和隐藏，每次切换都是一次重新挂载，不会保留子组件之前的状态。但如果是同一个组件，只是引入时起了两个名字，那就不是重新挂载了，子组件会一直保留。

4. 用&&的方式来显示组件，切换时就永远都是组件的重新加载了

5 以上只是在react19中试验的结果，如有错误请指出

二、 setState异步与多个useEffect中使用

1. 在同一次任务执行中，如果有多个useEffect要执行，那就会按照写时的顺序，从上到下依次执行。比如组件初始化时，useEffect空数组和有依赖项的时候都会执行，顺序就是写的顺序

2. setState是异步批量更新，可以把它理解成一个微任务。在一次任务执行中，比如用户触发的点击事件，就会是先去执行宏任务，最后再由setState来触发state的更新

3. 函数式组件有闭包的特性，所以在setState紧跟着写代码没有办法获取到最新的state值。比如在组件挂载时写一个定时器，它的回调函数获取到的永远是上一次state值。但是对于setState来说，它的参数可以是一个函数，这样就可以取到最新的state值了

三、 typeof undefined 的值

1. typeof 可以用来获取数据的类型，返回值是一个字符串，具体可以看 MDN 。针对一些特殊的，typeof null 是object，typeof undefined 是 undefined，typeof Function 是 function ，typeof BigInt 是 bigint，typeof Symbol 是 symbol

四、 return console.log() 的类型 unknow和any的区别 Record

的类型推导

1. 一个函数如果return console.log()，那么他的返回值类型是void

2. unknow和any 前者会做类型校验，但是后者不会。具体可以看这个链接。unknow在使用时需要类型断言，any不需要。具体可以看这个链接

3. Record<string,number> 表示当前值得key是字符串，value是数字。即使这个对象的实际值不是数字，后面也会推导为数字

五、 css不能使用像素值选择器优先级

1. z-index，flex，position，transform中的scale等操作都不能用像素值。这个可以直接问ai

2. 对于选择器优先级，ID>class>标签。有一些特殊的，伪元素相当于标签选择器，属性和伪类相当于class选择器。具体可以看 MDN

六、 vue的样式隔离scope 样式穿透实现react中相同的效果

1. vue中的scope可以实现css属性只作用于当前组件，使用属性选择器实现[data-v-]

2. 如果要作用于深层的子类，可以使用:deep()

3. react中实现样式隔离可以用cssModule，.module.css文件导出一个styles，在组件中使用。或者用css-in-js。

七、 vue创建公共组件，公共方法

1. 注册全局组件在 app.component('名称', 组件)

2. 全局的方法可以用 app.config.globalProperties 添加，组件中用getCurrentInstance()访问。也可以用插件，mixin，hooks方式

八、 react获取组件实例

1. react中使用useRef, useImperativeHandle, forwardRef来配合获取子组件实例，子组件用forwardRef包裹，会接收ref属性，useImperativeHandle向外暴露方法。父组件中用ref接收。普通DOM节点可以直接使用ref。

2. react19中不再使用forwardRef，直接用ref

3. vue中使用useTemplateRef来获取组件节点，子组件用defineExpose向外暴露方法属性

九、 0.5px

1. 具体看这篇文章 juejin.cn/post/749155…

十、透明度继承

1. css中的透明度属性 opacity 属性是存在继承的，父元素的透明度会影响到子元素。子元素的透明度会在父元素透明度基础上叠加。

2. 不想要这种效果可以使用rgba

十一、上下左右居中

1. flex布局，transform，position：absolute，margin：0 auto 等

十二、 for循环与forEach break continue return

1. for循环可以用break和continue控制流程，如果在函数中还可以用return

2. forEach并不行，forEach是以数组的初始长度为主，重复执行回调函数，return也不能打破

3. 可以用throw error的方式抛出错误中断

十三、 forin与forof

1. for in 是用来遍历对象的可枚举属性，包括继承的

2. for of 是用来遍历可迭代对象的，可以用break continue 和 return 控制流程

3. 可迭代对象需要满足可迭代协议，有next方法

十四、 set和map

1. set是集合，map是字典，向其他语言靠拢的新数据结构，还有weakSet和weakMap

十五、实现sleep函数

1. 可以用同步的方法，while方法

const sleep = (time) => {    
    const timer = new Date().getTime()    
    while (new Date().getTime() < timer + time) {    }    
    return '等待结束'
}

2. 也可以异步的方法，用promise

const sleep2 = (time) => {    
    return new Promise((resolve) => {        
        setTimeout(() => {            
            resolve('等待结束')        
        }, time)    
})}

十六、 keepalive

1. 缓存组件 react本身没有这样的功能需要自己实现。核心是把组件存在对象的某个属性里，然后组件会在页面中加载在一个div里，用appendChild和removeChild来控制这个div的父级加载和卸载

2. 可以看这些 juejin.cn/post/727343…

juejin.cn/post/727016…

十七、数据持久化

1. 前端数据持久化就是把数据存储在locaStorage或者indexedDB中了

十八、 vue动态添加响应式属性

1. vue3中因为是对整个对象做的响应式，所以直接操作就行，会有相应的变化

2. vue2中需要使用this.$set来操作

一些其他的面试题