后端语言java、golang

React

  1. useEffect和useLayoutEffect得区别
    主要区别于他们的触发时机
    useEffect： 在渲染完成后异步执行，不会阻塞浏览器的绘制操作
    useLayoutEffect：比useEffect早一些，在浏览器绘制操作之前同步执行
  2. hooks的了解
  3. useCallBack和useMemo的区别

JS

  1. 判断数据类型有哪些
    什么类型的数据没有constructor

亮点

  1. 低代码
  2. 插件
  3. 公共的业务组件

Vue3 比Vue2提升在哪里 https://blog.csdn.net/weixin_44727080/article/details/112977564

1、性能快了1.2-2倍

    1、diff算法的优化
      vue2的虚拟dom是进行全量比较的
      vue3新增静态标记，在于上次虚拟节点比较的时候，只对比***带有patch flag***的节点
    2、静态提升
      vue2 无论元素是否参与更新，每次都会被重新创建，然后再渲染
      vue3.0 对于不参与更新的元素，会做**静态提升hoistStatic(会这些节点从render中提取出来，变成了全局变量)**，只会被创建一次，在渲染时直接复用即可
    3、事件侦听器的缓存
    4、ssr渲染
       当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态绑定，会通过模板插值嵌入进去，这样会比通过虚拟dom来渲染的快很多很多。
       当静态内容达到一定量级时候，会用_createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

2、支持按需编译、按需导入，比vue2x体积小

    体现在4个方面
      1、更高效的**tree-shaking**https://www.jb51.net/article/282641.htm
      tree-shaking 移除掉项目中永远不会执行的代码dead code; 其实现原理是依赖于ES6的模块特性，因为ES6模块的依赖关系的是确定的，静态的与运行状态没有关系，可以做静态分析
       采用了新的模板编译方式
      2、支持模块化
       Vue3全面支持ES模块化，并且通过使用**ES模块系统来组织和加载代码**。相比之前的Vue2，这种模块化的方式更加轻量化。通过将应用程序拆分为多个独立的模块，可以更好地管理代码，并且在开发过程中可以更方便地共享和复用模块。这样一来，就可以减少重复的代码，并且在构建过程中只需要打包使用到的模块，从而缩小了打包大小。
      3、静态组件提升
    异步加载组件的优化 **suspense内置组件**https://www.jb51.net/javascript/2880700uw.htm
      1、异步请求并行加载
      Vue3 Suspense 中的另一个优化技术是让异步组件懒加载并执行**提前预取**。
        通过**懒加载**，只有在使用时才会加载组件，而不是在页面初始加载时就把所有组件都加载好。
        通过执行提前预取，可以在没有等待用户点击前提前加载组件，以确保在需要时可以立即使用。

3、支持组合式api，类似于react中的hooks

vue中如何把model层的数据更新到view层

watch和computed的区别

webpack和vite的区别

vite: 其实现原理是利用es6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间
构建速度：vite在开发环境有快速的冷启动和热重载能力，基于ES模块导入原理，无需打包就可以实时编译
Webapck 则可以用于更复杂的构建任务
打包方式：vite是通过模块直接引入进行开发的，通过原生ES模块的形式可以直接在浏览器运行；webpack将所有的模块打包为一个或多个静态资源文件。
配置：
vite通过vite.config.js文件作简单的配置
webpack：配置复杂，
mode
entry
output
modules
optimization： 优化配置
webpack4以后会根据mode来执行不同得优化，所有得优化可以手动配置和重写
plugins:

  CleanWebpackPlugin: 打包前会清空build下的目录，避免保留一些不必要的文件
  progress-bar-webpack-plugin： 打包进度条美化
  **MiniCssExtractPlugin**：
  背景：css文件打包到js中，当js文件加载时，会创建一个style标签去生成样式；网络不好的情况下会出现闪屏现象，等js完全加载完以后，才会出来页面
  功能：会将css单独提取到一个文件中，为每个包含css的js文件创建一个css文件，并且支持css和sourceMaps的按需加载
  webpack-bundle-analyzer：打包可视化分析工具
  optimize-css-assets-webpack-plugin：优化css资源，压缩css文件
  CopyWebpackPlugin：单个文件或整个目录复制到构建目录



优化：减少打包时间
优化loader: 1、优化loader文件的搜索范围 include、exclude 
            2、可以将babel编译过的文件缓存下来，下次只需要编译更改过的代码即可
            
1
loader:'babel-loader?cacheDirectory=true'

vue3中ref、reactive的区别

ref和reactive区别：

如果在template里使用的是ref类型的数据，那么vue会自动帮我们添加.value，
如果在template里使用的是reactive类型的数据，那么vue不会自动帮我们添加.value。

vue是如何决定是否需要自动添加.value的？

vue在解析数据之前，会自动判断这个数据是否是ref类型，
如果是就自动添加.value，如果不是就不自动添加.value。

vue是如何判断当前的数据是否是ref类型的？

通过当前数据的**__v_ref**来判断的。如果有这个私有属性，并且取值为true，那么就代表是一个ref类型的数据。

开发人员如何判断当前的数据类型？

isRef和isReactive来分别判断是否是普通函数和对象。

setUp函数的执行时机和注意点

setup函数的执行时机：

 setup函数是在beforeCreate和created之间执行的。
 beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没初始化号；
 created：表示组件刚刚被创建出来，并且组件的data的methods已经初始化好了。

setup注意点：

 ①由于在执行setup函数的时候，还没执行created生命周期方法，所以在setup函数中，是无法使用data和methods的。
 ②由于我们不能在setup函数中使用data和methods，所以vue为了避免我们错误的使用，他直接将setup函数中的this值修改为了Undefined。
 ③setup函数只能是同步，不能是异步的。

flex详细属性解析

flex:1 是三个属性的简写, flex: 1 1 0%;
flex-grow：定义项目的放大比例，默认为0
flex-shrink: 定义项目的缩小比例，空间不足，项目将缩小
flex-basis: 上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

谈谈对组件化的理解

promise是如何实现异步的

结合事件循环去解释

浏览器缓存

useEffect和useState的理解

useEffect是为函数组件处理副作用（dom操作、获取数据）的

封装过的组件

js中apply()、call()、bind()的区别

js中作用域和变量提升的理解

在es6之前没有块级作用域，只有全局作用域和函数作用域
es6提出let和const

为什么html文件中js引入要放到后面

对vuex(redux)的理解，如何实现的 （其实就是结构组成，内部联系）

是js中应用程序开发的状态管理模式， 组件之间用来传递数据的数据中心，
采用集中式存储管理所有组件的状态

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store

利用vue的插件机制
vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store

处理过哪些浏览器兼容问题

前端如何实现响应式布局

1、

babel用来做什么的

是一个js代码编译器，将js中es5以上的语法转化为es5，兼容低版本浏览器的运行
比如es6中的箭头函数
工作流程：三步
解析parse(@babel/parser): 将源代码字符串转成抽象语法树（AST）
AST:以树状形式表现编程语言的语法结构
转换transform(@babel/traverse)：通过@babel/traverse遍历抽象语法树(AST),并调用Babel配置文件中的插件,对抽象语法树(AST)进行增删改
生成generate(@babel/generator)：通过@babel/generator把转换后的抽象语法书(AST)生成目标代码

什么是虚拟DOM

虚拟dom本质就是一个普通得js对象，用来描述视图得界面结构
diff算法的本质就是对比新旧VDOM树的变更差异

防抖和节流

防抖：是指触发事件在N秒内只执行了一次，1、如果在n秒内又触发了事件，则会2、重新计算函数得执行事件（执行最后一次），比如：表单元素得校验、模糊搜索等功能；

节流：一段时间内只能触发一次，如果这段时间内触发了多次事件，只有第一次生效会触发回调函数，一段时间过后才能再次触发；n秒内执行第一次

js实现深拷贝的方式

1、递归函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  //使用递归的方式实现数组、对象的深拷贝
export function deepClone (obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判断ojb子元素是否为对象，如果是，递归复制
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
};

2、JSON.stringify()
如果对象的属性是string、number、Boolean可以使用
缺点：
1、如果对象的属性是Date对象，转换后会变成字符串
2、属性中有RegExp正则或者Error对象，序列化后会变成空对象
3、属性中有function、undefined、symbol,则序列化的结果会把function、undefined丢失
4、JSON.stringify() 只能序列化对象的可枚举的自有属性，例如如果 obj 中的对象是有构造函数生成的，
则使用JSON.parse(JSON.stringify(obj)) 深拷贝后，会丢弃对象的 constructor；
5、如果对象中存在循环引用的情况也无法正确实现深拷贝，并且会导致死循环，最后抛出异常

3、loadsh中的cloneDeep方法
也是通过递归的思路实现的
4、jquery的extend()方法进行深拷贝（推荐在JQ中使用）Jquery自身携带extend

1
2
3
4
let obj = { a: { c: 2, d: [1, 3, 5], e: "哇哇哇" }, b: 4 };
let newObj = $.extend(true, {}, obj1);
//拷贝完成obj.b = 20;console.log(newObj.b); //输出 4

HTTP请求常用请求头以及http缓存方式

前端首屏加载优化方案&首屏空白问题如何解决

Map、Set、WeakMap之前的区别以及使用场景

iframe通信方式以及对应的使用场景