Vue和react有什么不同？- 必问
1、组件写法：react是把HTML+CSS全部写入JS中，即JSX。Vue是template单文件组件，即HTML、CSS、JS写在同一个文件（vue也支持JSX写法）。 2、核心思想不同：vue主要特点 灵活易用的渐进式框架，进行数据拦截/代理，对侦测数据的变化更敏感、更精确。React函数式编程（纯组件，是UI库），数据不可变并且单向数据流，但可以使用onChange+setState来实现双向数据流。 3、Diff算法：react中的Diff算法是同一层级的一组子节点进行对比，而key值可以确定同一层次中每个节点的唯一性。Vue中采用 双端比较 新旧虚拟dom头尾各有一个节点，有4种方式来对比，头头、尾尾、头尾、尾头；若4种都没匹配，而设置了key，就用其做相关节点的对比。 4、响应式原理不同：vue递归监听data的所有属性，直接修改，数据改变 自动找到引用组件重新渲染。React需要setState手动修改 驱动新的state替换旧的state，数据改变 以组件为根目录，默认全部重新渲染，因此需要shouldComponentUpdate来控制。 5、vue为了更加简单易用，引入了filter、watch、computed等option API。
Vue2和Vue3的区别
1、 响应原理 Vue2使用object.defineproperty()对数据进行劫持，缺点 不能劫持对象+数组。 Vue3使用ES6中proxy对数据进行劫持，优点 可劫持对象成员+数组元素的变化。 2、 Vue3支持碎片化，即可拥有多个根节点，不需要在template标签下包一个div作为根节点。 3、 Vue2选项式API；Vue3组合式API 4、 生命周期API的改变。 5、 Vue3中setup()函数接收props、context(attrs、slots、emit)两个参数，setup函数在生命周期create钩子函数之前，父传子改为setup函数中的第一个参数接收，子传父使用context.emit()，在template上使用需要 return{…}。 6、diff优化，vue3是双端对比方式 头头、尾尾，当遇到不同时立马停止对比，使用最长递增子序列进行移动、添加、删除。
Vue中自定义指令(内部不能直接使用this vue实例对象)
v-on:keyup.enter=”方法” v-指令名:属性名.修饰符=“值“。全局自定义指令、局部自定义指令directives对象，接受2个参数Vue.directive( ‘指令名’，指令定义的对象)。指令对象的5个生命周期，{ bind: 类似于beforeMount, 指令绑定于相应dom时执行，这时未完成渲染；inserted: 指令所在dom添加到父节点时执行，类似mounted，渲染时；update: 更新时，指令所在组件有更新时执行，不保证指令所在dom更新完成；componentUpdated: 更新完成时，指令所在组件包含子组件都更新时执行，类似updated；unbind: 销毁前，类似destroyed，指令所在dom解决绑定时执行，v-if=false或 指令所在组件销毁时执行，指令所在dom销毁时执行。 bind( el, obj【属性 修饰符 指令名 数据】, vnode【指令所在组件的实例对象】) }
Vue中mixins的缺点(因此有hook与Vue3组合式API)
1、多个mixins引入，会导致data来源不明确。2、mixins含有生命周期钩子，会导致冲突。3、逻辑散乱，不利于后期维护。
谈一谈BFC的理解
块级格式化上下文，可看作是 独立容器，容器里面的内容不会影响外面的元素。触发条件float、position脱标、display:flex/inline-block/table-cell。常见场景：父元素高度坍塌、一起浮动、高度固定、外边距垂直方向重合。
前端 性能优化有哪些
1、减少HTTP请求。2、缓存常用的静态资源。3、按需加载，图片、路由懒加载。4、异步加载第三方资源。5、减少重排(添加/删除/位置变化/尺寸大小)、重绘(改变dom样式)，重绘不一定重排，但重排一定重绘。6、函数防抖(最后一次为准，input)、函数节流(time内执行一次，鼠标移动、页面滚动)。
CSS3和H5新增
伪元素选择器、伪类选择器、属性选择器；2D转换、动画、3D转换；浏览器私有前缀。audio、video。
判断数组类型的几种方法及优缺点
1、Array.isArray() 优于instanceof（缺点 只能判断对象类型，原始类型不可以）。2、Object.prototype.toString.call通过原型链的方法去判断。
实现深拷贝方法
1） 递归所有层级属性。2）json方法转换(func、undefined、Symbol会消失；Date时间对象变成str类型；正则对象变成{} )。3）函数库lodash提供的_.cloneDeep方法 function deepClone ( target , map= new WeakMap()) { // if ( typeof target === ‘object’ ) { let cloneTarget = Array.isArray(target) ? [] : {}; if ( map.get( target )) return map.get(target); map.set( target, cloneTarget ) for ( const key in target ) { cloneTarget[key] = deepClone( target[key] , map); } Return cloneTarget; } else { Return target; } }
在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？
1）当输入URL地址时，浏览器会去请求DNS服务器，通过DNS获取相应域名的IP。2）通过IP地址找到对应的服务器建立TCP连接。3）浏览器发送HTTP请求包，服务器接收后返回HTTP响应包。4）浏览器接收响应后渲染包里的主体内容，待接收完全部内容后，断开TCP连接。 TCP与UDP区别：TCP面向连接，而UDP发送数据前不需要建立连接。TCP是点到点连接，UDP支持一对一、一对多、多对一、多对多通信。TCP不会丢包，UDP会出现。 强缓存：根据HTTP 头判断是否命中强缓存。Header中Expires或Cache-Control(优先级高)两个字段控制。 协商缓存：未命中强缓存or强缓存过期，浏览器发送请求至服务器，服务器根据HTTP头中Last-modify/if-Modified-Since或Etag/if-None-Match判断是否命中协商缓存。命中，返回状态码304(本地曾加载过资源且有效)；不命中，返回302临时重定向（资源过期重新加载）。301永久重定向。
如何解决跨域问题
1）后端设置2）JSONP原理 利用script标签中scr不受限制的漏洞。3）利用node作为代理服务器。4）浏览器设置跨域。跨域请求前有options请求，即跨域预检，多个请求优化，首次尽量减少跨域请求，后续的设置缓存。
ES6新特性
1）let和const 2）class类3）箭头函数4）解构赋值5）模板字符串6）proxy代理7）Set()和Map({ ‘key’: any })
React生命周期
挂载时 constructor、render、componentDidMount 更新时 （shouldComponentUpdate）render、componentDidUpdate 卸载时 componentWillUnmount
谈谈this
谁调用就指向谁，不用关心函数、方法、声明在哪里。上下文调用模式，call、apply、bind，bind不会执行，call( _ , params… )，aplly( _ , paramsArr )。
手写Promise async…await
Then()、finally()、catch()，pending等待、fulfilled(resolve)成功、rejected失败。 是generator函数和Promise的语法糖。
Vuex、Redux的特点和区别
Mutation（用于同步）、action（用于异步，commit提交mutation，dispatch触发action方法），mutation直接修改state，state单一数据源，getters类似computed具有缓存能力。 Action（同步，借助中间件thunk事件异步，action不会改变store，只是描述怎样改变store），reducer（纯函数，根据action和旧的store计算出新的store），store（单一数据源）。
Vuex和pinia的对比
后者action支持同步+异步，有良好的TS支持，体积小，支持服务端渲染，pinia中的每个store都是独立的、互不影响。Getters类似computed有缓存能力。
Vue3 proxy解决了哪些问题
对象、数组他们的属性成员、元素的变化无法劫持。
CSS水平垂直居中 1） Display: flex; justify-content: center; align-items: center; 2）display: grid; magin: auto; 3）固定定位，绝对定位；
React17与react18的更新变化
React17基本无新特性，该版本主要渐进式升级，为18版做铺垫。18版放弃对IE的支持，区别是 从同步不可中断更新->异步可中断更新，17通过一些试验性API开启并发模式，而18则是全面开启并发模式。并发模式 可帮助应用保持响应，并根据用户的设备性能+网速进行适当的调整，该模式通过使渲染可中断来 修复阻塞渲染限制。在Concurrent模式中，react可同时更新 多个状态。更新renderAPI、自动批处理、Suspense支持SSR（FWQ获取页面所需数据->将组件渲染为HTML作为响应返回，KHD执行JS生成页面最终内容）。
构造函数继承和原型链继承有什么区别
构造函数继承 使用call( this , params )改变this指向，缺点 只能继承父类构造函数的属性和方法，不能继承父类原型上的方法。原型链继承缺点 数据共享、无法为父函数传参。
Vue组件挂载的过程，比如elementUI的$message是怎么弹出来的
将组件挂载到Vue原型链上，然后可以使用$message直接调用
页面跳转后，原来的请求想取消掉，怎么办？
用abort() 或 不接收response
代码：Array.prototype.contains = function( obj ) { return this.indexOf( obj ) >= 0 }
判断数组中，是否存在该对象，但对象都是引用类型，不能这么判断。
Vue3中ref与reactive的区别
都创建一个响应式对象。Ref可简单数据类型，可复杂数据类型（对象），在script中使用需要.value才能获取值。Reactive只能复杂数据类型（对象）,操作数据不需要.value
Ts联合类型转交叉类型
联合类型 A集合与B集合两者是并集关系；交叉类型 A集合与B集合是交集关系，并且是两者的公共的部分元素。
Ts获取函数参数、常用的高级类型
使用typeof获取函数；交叉类型、联合类型
Ts中any和never的区别
any用于描述任意类型的变量，不受任何约束，编译时会跳过对其的类型检查。 never永不存在的值的类型，常用于表示永不能执行到终点的函数返回值，例如 抛出异常或函数执行无限循环的代码的函数返回值类型。
如何理解ts泛型
类似参数的作用，出现在被多种类型复用。
Ts中interface与type区别
接口可动态新增属性+方法，具有扩展性；type一旦定义，无法修改
Watch和watchEffect的区别和联系
惰性：是否立即执行。抽象or具体：是否需要添加监听的属性。 Watch回调函数可访问最新值和旧值，wartchEffect回调函数只能访问当前最新值。 Watch可添加配置项 deep、immediate
Vue中插槽的使用（比如给一个方法）
默认插槽、具名插槽、作用域插槽、
Vue3中v-model做了什么改变
v-bind和v-on的语法糖，表单数据的双向绑定。 内置组件input和vue2的双向绑定方式 :value + @input=”” 自定义子组件:modelValue + @update:modelValue=”” 还需要在自定义组件中，props:[‘modelValue’], emits:[‘update:modelValue’] 手动接收，vue3中modelValue是默认属性名，可以通过v-model:msg=”” 接收props:[‘msg’],emits:[‘update:msg’]，
Vue2中的vue-router的钩子函数
()=>Import路由懒加载，to.meta.title属性是元信息，是路由对象中的一个属性，可以用来保存自定义的一些属性，全局守卫beforeEach、afterEach，路由独享守卫beforeEnter，组件内守卫beforeRoutEnter、beforeRouteUpdate、beforeRouteLeave。
Vue中父子组件的生命周期
组件的调用顺序是先父后子，渲染完成顺序是先子后父，组件的销毁操作是先父后子，销毁完成顺序是先子后父。加载渲染过程，子组件在父组件的beforeMount和Mounted之间，父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子Mounted->父Mounted；子组件更新过程，父beforeUpdate->子beforeUpdate->子Updated->父Updated；父组件更新过程，影响子组件=父beforeUpdate->子beforeUpdate->子Update->父Updated；销毁过程，父beforeDestory->子beforeDestory->子Destoryed->父Destoryed。
微信小程序的生命周期
App生命周期：onLaunch->onShow->onHide->onError Page生命周期：onLoad->onShow->onReady->onHide->onUnload
微信小程序的rpx与px的转换
1rpx = 0.5px = 1物理像素
浏览器垃圾回收机制
标记清除（函数作用域、块级作用域里的变量）、引用计数（跟踪每个值被引用的次数，当引用次数为0时，就被回收）。
常见响应状态码
301 永久重定向；302临时重定向；304命中协商缓存。400请求失败；401无权限；403禁止访问（无权限），404资源不存在（URL错误）；500服务器内部错误。
TCP三次握手过程
1） 客户端发送包含SYN同步序列的请求报文->服务器 2） 服务器接收后，返回包含ACK确定序列的SYN报文 3） 客户端收到确认后，再次向服务器发送确认信息，完成TCP连接
For foreach哪个性能好
固定长度or长度不需要计算的时候，for效率高于foreach和map，for可通过break终止； 在不确定长度or计算长度有损性能时，用foreach和map比较方便。
