面试经历汇总（Vue）

大丸子zz
126 阅读22分钟

成都臻识科技

笔试题：

  1. 实现一个方法判断回文数字
  2. 实现一个方法寻找字符串中最大的不重复的字符串

面试题：

  1. 元素垂直居中的方法
  2. 三个元素均分空间
  3. 什么情况会引发重排和重绘
  4. translate是重排还是重绘

使用 translate 不会触发重排或重绘，但会触发合成。会使得元素创建一个 GPU 层（图层），这样子位移也只是在你自己的图层上，不会影响整个页面布局。translate 效率更高，绘制时间短，更加流畅。

  1. 原型链
  2. js数据类型有哪些
  3. 判断对象中是否包含某个属性
使用in关键字
使用对象的hasOwnProperty()方法（方法只能判断自有属性是否存在，对于继承属性会返回false）
用undefined判断（o.x!==undefined）
  1. 对象是否有toString方法（有）
  2. 深拷贝实现方式
  1. JSON.parse(JSON.stringify())
  2. 函数库lodash的_.cloneDeep方法
  3. 手写递归
  1. 深拷贝手写递归具体实现
  2. vue2和vue3的响应式原理

vue2：利用ES5的一个API Object.defineProperty()对数据进行劫持，结合发布者订阅者模式的方式来实现的。

vue3：使用了ES6的Proxy API对数据代理。（proxy的实例方法：get()、set()、deleteProperty()等）

  1. vue2计算属性和监听属性的区别
  1. computed是计算属性；watch是监听，监听data中的数据变化。
  2. computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
  3. computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
  4. computed第一次加载时就监听；watch默认第一次加载时不监听。
  5. computed中的函数必须调用return；watch不是。
  1. 为什么vue2中新增属性不是响应式的，有什么解决方法
$set、 Vue.set()
$forceUpdate()
Object.assign()
  1. vue2组件间传值方法有哪些
vue中8种常规的通信方案 
- 通过 props 传递 
- 通过 $emit 触发自定义事件 
- 使用 ref 
- EventBus 
- $parent 或$root 
- attrs 与 listeners 
- Provide 与 Inject 
- Vuex 

组件间通信的分类可以分成以下 
- 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择 ref 
- 兄弟关系的组件数据传递可选择 $bus，其次可以选择 $parent 进行传递 
- 祖先与后代组件数据传递可选择 attrs 与 listeners 或者 Provide 与 Inject 
- 复杂关系的组件数据传递可以通过vuex存放共享的变量

四川观筑数智科技

  1. 自身的职业规划
  2. vue3了解多少，说说看
  3. es的解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

本质上，这种写法属于“模式匹配”只要等号两边的模式相同，左边的变量就会被赋予对应的值

  1. 箭头函数和普通函数的区别？
  1. 箭头函数没有自己的this、会捕获其所在的上下文的this值，作为自己的this值
  2. 箭头函数继承来的this指向永远不会改变
  3. call()、apply()、bind()等方法不能改变箭头函数中this的指向
  4. 箭头函数是匿名函数，不能作为构造函数，不能使用new
  5. 箭头函数没有自己的arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替
  6. 箭头函数没有prototype（原型）
  7. 箭头函数不可以使用yield命令，因此不能用作Generator函数
  1. 箭头函数为什么不能用作构造函数？

构造函数里面初始化操作都是在 this 这个对象上进行的，最后返回 this 对象，箭头函数连自己的 this 都没有，所以不能作为构造函数

new 命令的原理

创建一个空对象，作为将要返回的对象实例。
将这个空对象的原型，指向构造函数的 prototype 属性。
将这个空对象赋值给函数内部的 this 关键字
开始执行构造函数内部的代码。

11. 假设有一个输入框，需要边输入边展示相关搜索，可以做哪些优化？

  1. html5媒体标签属性（例如video的src如何处理高分辨率和低分辨率）

视频和音频标签：video、audio；属性：autoplay、controls、loop、muted、preload等

在浏览器环境下，有两种方式可以切换视频：

  • 直接修改 video 元素 src。

  • 使用 MSE (Media Source Extensions) 播放视频，操作 SourceBuffer。

直接修改 video src 的方式必然会经历视频重新加载的过程，虽然能够实现切换，但无法实现无缝切换。

使用 MSE 的方式，通过操作 SourceBuffer 能够实现无缝切换视频分辨率。遗憾的是 MSE 存在兼容性问题， iOS Safari 不支持 MSE。

  1. 影响GPU进程的操作有哪些？（3D动画、过渡动画、opacity、translate）
  2. 说一下你在项目中遇到印象深刻的项目场景
  3. 宏任务和微任务的执行机制说一下？常见的宏微任务有哪些？
  4. $nextTick原理？

将回调延迟到下次DOM更新循环之后执行

成都方顷科技有限公司

  1. 在哪些情况用到了websockit？websockit怎么重连？
  2. 设计模式了解哪些
  3. node.js用过吗？了解哪些？

node.js是一个基于Chrome v8引擎的javascript 运行环境。Node.js使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。（由c＋＋语言编写的）Node.js的包管理器npm，成为世界上最大的开放源代码的生态系统。 简单说：编写高性能网络服务器的javascipt工具包（用于js开发服务端程序） 单线程、异步、事件驱动。

Express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架

  1. 讲讲事件循环，常见的宏微任务？
  2. 怎么设置垂直居中？
  3. grid布局，2:6:2等份怎么设置
  4. h5标签常用哪些？有助于seo的属性有哪些？
标签：<header>、<nav>、<section>、<article>、<aside>、<footer>等
标签属性：如 alt、title、rel 等，可以帮助搜索引擎更好地理解网页内容，提高搜索引擎排名。
  1. 浏览器进入一个页面以后会发生什么？
  2. 状态码知道哪些？
  3. 浏览器缓存有哪些？怎么设置强缓存和协商缓存？
  4. jquery xxx？（不了解）
  5. 事件绑定有哪些方法？
//在DOM元素中直接绑定
<button id="btn" @click="printMsg">点击</button>
//自定义函数，js中绑定
btn.onclick=function(){};
//绑定事件监听函数
btn.addEventListener("click",printMsg);
  1. vue3了解吗？ts呢？
  2. 响应式布局设置方式？（百分比、rem、vw/vh、flex弹性布局）
  3. 做过其他端的项目吗？
  4. H5项目中遇到的问题？
  5. ios和安卓xxx？（没做过ios）
  6. 平时通过什么方式学习？
  7. 排序算法，快排怎么实现？其他算法呢？
  8. 职业规划
  9. 为一个长列表每一项添加一个点击事件怎么做？
利用事件委托，在外部容器中添加click事件，
给每个子元素添加`data-action`属性，
后续可以在点击事件中通过event.target.dataset.action获取设置的属性值，做对应的处理

image.png

北京人人出彩科技有限公司

  1. html5语义化标签？有什么作用？
  2. css常用哪些布局？flex怎么改变主轴方向？换行怎么设置？grid布局中有哪些单位？

flex布局、grid布局；flex-direction；flex-wrap；单位：fr、px等

image.png

image.png 4. vue2和3的区别

组合式AIP和选项式API；响应式原理；生命周期钩子；定义变量和方法；指令和插槽的使用不同

www.cnblogs.com/heisetiansh…

  1. es6新增属性

symbol、let和const、解构赋值、Map、Set、扩展运算符、Array.from()、Object.assign()、箭头函数、类、导入导出等

  1. 箭头函数特点
  2. computed和watch区别
  3. vue2中data为什么用函数返回？

在生成组件vnode过程中，组件会在生成构造函数时执行合并策略。vue组件中会存在很多个实例，在定义data属性时，若采用对象的形式，改变其中一个组件的data属性，可能导致其他组件中同名属性也发生改变，因为它们共用同一个内存地址。若采用函数形式返回，每个实例对象的数据不会受到其他实例对象数据污染，因为函数返回对象的内存地址并不相同。

  1. 插槽了解吗？

默认插槽、具名插槽、作用域插槽 blog.csdn.net/weixin_5221…

  1. vue3中setup是语法糖还是函数？会return吗？
<script setup>`语法糖`里面的代码会被编译成组件 setup() `函数`的内容，
不需要通过return暴露声明的变量、函数以及import引入的内容，
即可在<template/>使用，并且不需要写export default{}
  1. 箭头函数后可以直接写return吗？
  • 有大括号{} 只有写return才有返回值，不写return无返回值
  • 只有一行语句时，可以省略大括号和return
  1. compounent:()=>import(xxx) ，这里的箭头函数有什么作用？

这里的箭头函数指向的就是这个函数的返回值(对应的组件，这个路由就会显示内容啦)；

  1. ts新增类型有哪些，泛型作用

元组、枚举、any、viod、never blog.csdn.net/weixin_4453…

泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候再指定类型限制的一种特性。

  1. ts接口和类型的区别（interface和type）
1、接口是可扩展的，类型不是
2、接口可以合并，类型不能
3、接口不能扩展原语
4、类型可以创建联合，而接口不能
5、类可以实现接口，但不能实现类型

zhuanlan.zhihu.com/p/565882118…

  1. webpack，loader顺序（style-loader、css-loader等）
loader的解析顺序是`从下到上，从右往左`，编译顺序应该是先用css-loader编译css代码，
再用style-loader放入到网页的style标签里面去。所以css-loader在右，style-loader在左，按照指定顺序排列。
module:{
    rules:[
        {
            test: /\.less$/,
            use: ['style-loader','css-loader','less-loader']
        }
    ]
}
  1. 不用脚手架工具怎么搭建项目，大致流程
  2. diff算法了解吗？
  3. vue3 ref和reactive区别

总的来说，ref 适用于简单数据类型的响应式处理，而 reactive 则适用于复杂数据类型的响应式处理。此外，ref 可以通过 .value 访问值，而 reactive 则可以直接访问对象的属性。

  1. proxy内部怎么写（getter、setter）
  2. 数组方法有哪些？forEach map push这些会改变原数组吗？

forEach、map、push、pop、shift、unshift、slice、splice、reverse、sort

forEach、map不会改变原数组，push会

  1. websocket有哪些钩子？后台返回数据是什么形式的？（JSON）

onOpen、onMessage、onError、onClose、

  1. symbol内部机制？ （Generator、yeild）
  2. 遍历对象有哪些方法？
1、for...in

for (var key in obj) {
    // 执行代码块
    console.log(obj[key])
}

2、Object.keys()，Object.values()，Object.entries()

// 数组不包含symbol属性
var data = { name: 'tim', age: 18, [Symbol()]: 123 };
console.log(Object.keys(data)); // [ 'name', 'age' ]
console.log(Object.values(data)); // [ 'tim', 18 ]
console.log(Object.entries(data)); // [ [ 'name', 'tim' ], [ 'age', 18 ] ]

3、Object.getOwnPropertyNames(obj)

const obj = { foo: 'bar', baz: 42 };
console.log(Object.getOwnPropertyNames(obj)); // [ 'foo', 'baz' ]


4、Object.getOwnPropertySymbols(obj)

5、Reflect.ownKeys(obj)

zhuanlan.zhihu.com/p/566208201

  1. 大屏怎么做响应式布局？rem、em、vh、vw用途

响应式布局的几种方式：rem、百分比%、vw/vh、flex弹性布局

  1. 箭头函数的this指向什么？
  2. es6的Map和Set

image.png image.png

image.png

Map 结构的实例有以下属性和操作方法:

属性：size

操作方法：

  • Map.prototype.set(key, value)
  • Map.prototype.get(key)
  • Map.prototype.has(key)
  • Map.prototype.delete(key)
  • Map.prototype.clear()

image.png

  1. vue2中数组方法push之类的是响应式的吗？如何设置成响应式？

不是，方法：$set()、$forceUpdate()、Object.assign()

  1. 网络协议了解哪些

TCP/IP协议、IPX/SPX协议、NetBEUI协议等

启明星辰

  1. vue自定义指令（比如按钮权限指令）
  2. elementUI下拉框数据量过大时怎么处理（前端设计懒加载）
  3. 已经父元素中有两个盒子，一个已知高度，怎么设置另一个自动撑满
  4. router-link和router-view怎么使用的（layout中菜单和页面内容分区）
  5. var let const区别
  6. computed和watch区别

成都纵横

一面

  1. vue2和3的区别
  2. vue2中new Vue后面的过程
  •   合并配置
  •   初始化生命周期
  •   初始化事件
  •   初始化渲染
  •   调用 beforeCreate 钩子函数
  •   init injections and reactivity（这个阶段属性都已注入绑定，而且被 $watch 变成reactivity，但是 $el 还是没有生成，也就是DOM没有生成）
  •   初始化state状态（初始化了data、props、computed、watcher）
  •   调用created钩子函数。
  1. Vue3的Proxy中用到哪些api（Reflect）
  2. setup中写console.log会执行吗？写一个prop呢？里面可以写$nextTick吗？（可以）
  3. vue2父子组件生命周期顺序
  4. keep-alive用过吗？原理了解吗？
  5. vue2组件中样式隔离怎么写？scope的原理知道吗？

Vue 会为每个使用了 scoped 的组件生成一个唯一的哈希类名

cn.vuejs.org/api/sfc-css…

  1. 项目中图片懒加载怎么处理的？vue-lazyload中的原理了解吗？
  2. diff算法了解吗？
  3. new一个实例对象内部怎么实现的？可以写return吗？return的是什么？

image.png

可以写return。 image.png blog.csdn.net/wangyayun66…

  1. 浏览器渲染页面过程？
  2. CSRF了解吗？

跨站请求伪造 特点：

  • 攻击一般发生在第三方网站，而不是被攻击网站；
  • 攻击利用用户在被攻击网站的登陆凭证(cookie)，冒充受害者提交操作，而不是直接窃取数据；
  • 整个过程，攻击者并不能获取到登录凭证，而是冒用；
  • 跨站请求可以用各种方式：img图片的src、a标签、form表单提交等等；
  1. webgl了解吗？openlayers有扩展过api吗图层之类？在地图上做过动画吗？
  2. 平时学习技术的途径？
  3. 对目前最新的技术了解哪些呢？
  4. webpack5了解哪些？新特性？

blog.csdn.net/Vue2018/art…

  1. 其他框架有了解吗？
  2. 知道vue3更新到哪个版本了吗？

v3.4.21

二面

  1. 你了解的流媒体协议有哪些？

RTSP、RTMP、HLS、MPEG-DASH、WebRTC

avmedia.0voice.com/?id=40580

  1. 大量图片懒加载用的什么技术解决的？

vue-lazyload

如果不使用插件的实现方式：

1、浏览器原生的 IntersectionObserver API，检测元素是否进入可视区域，并在进入时加载内容。

2、手动计算 获取视口宽高：window.innerHeight/innerWidth，document.documentElement.clientHeight/clientWidth

  1. 什么情况适合用客户端渲染？什么时候适合用服务端渲染？

客户端渲染（CSR）：丰富的交互体验、多平台支持和跨平台一致性、较小的网络请求量、较高的动态内容、复杂的交互逻辑和动态内容、高度个性化和定制化、较少的服务器负载

服务端渲染（SSR）：需要更好的SEO（搜索引擎优化）、复杂的页面结构、安全性要求高、首屏加载速度要求高、对旧版本浏览器的支持

zhuanlan.zhihu.com/p/632235828

  1. 三维图形技术有了解过吗？(three.js)
  2. vite了解吗？它为什么比webpack快？

  • 按需编译和热更新：Vite 只编译和更新需要的模块，而不是整个项目，从而提高了开发速度。

  • 使用 esbuild：利用 esbuild 的高性能进行依赖预构建，提升了整体构建速度。

  • 轻量级开发服务器：减少了初始启动时间和内存占用。

  • 现代浏览器支持：减少了兼容性负担，进一步提高了效率。

  1. 个人后续的技术发展方向？
  2. 期望下一家公司从事什么行业？
  3. 后期是否会考虑转行？哪个行业？
  4. 为什么说30岁是个坎？
  5. 转型产品或测试的优势是什么？
  6. 转型做产品或测试是职业发展必经之路？还是因为个人特点的发展形势？
  7. 离职原因，离职期间的经历

腾讯互娱

  1. position各元素分别相对于什么进行定位（relative、absolute、fixed）？
  • 静态定位：static 没有定位，使用静态定位的元素会按照元素正常的位置显示
  • 相对定位：relative 相对于自身定位
  • 绝对定位：absolute 相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对于浏览器窗口来进行定位。
  • 固定定位：fixed 相对于浏览器窗口进行定位
  • 粘性定位：sticky 它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果

2.fixed怎么改变它可以不相对窗口进行定位？

当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

  1. 元素垂直居中方法
  2. calc属性有用过吗
  3. 箭头函数和普通函数区别？为什么不能使用new？
  4. typeof返回值有哪些？

number、string、boolean、object、function、undefined、symbol、bigint

  1. 数据类型的存储方式
  2. symbol的特性？es6中有哪些地方用到symbol？
  3. symbol.iteretor是用来干嘛的？
  4. 判断数组类型的方法有哪些？
  • 从原型入手：Array.prototype.isPrototypeOf(arr); // true
  • 从构造函数入手：arr instanceof Array; // true
  • 跨原型链调用toString()：Object.prototype.toString.call(arr); // '[object Array]'
  • ES5新增的方法：Array.isArray(arr); // true

blog.csdn.net/weixin_4406…

  1. vue中template在运行时的结构是什么？（h函数）
  2. data属性为什么采用函数的形式返回？
  3. 自定义指令了解吗
  4. v-model是什么的语法糖？ image.png
  5. 改变数组中的一个元素是否会导致页面更新？为什么不会？

vue2只能监听到通过变异方法对数组进行的变化，而无法监听到直接修改数组某个元素或使用非变异方法（如filter、concat等）对数组进行的改变。如果需要监听这些非变异的数组变化，可以使用watch选项或$watch方法来手动监听数组的变化。

  1. 用push、splice等方法修改数组为什么可以更新页面？

在vue2中是通过重写数组的原型方法来实现对数组变化的监听。

  1. Object.defineProperty()如何设置数组响应式？
  2. computed属性中写if/else，若第一次只执行了if中的代码，当else中属性变化时是否会重新计算？

不会，computed属性收集依赖之前会先执行一次方法，第一次只执行了if中的方法，说明依赖中只包含if条件中的属性，所以只是else中属性改变时不会重新计算

  1. diff算法了解吗？
  2. 说一说websocket的连接方式，协议层面

使用层面：const websocket = new WebSocket(url);

协议层面： 最核心的请求头是Upgrade、Connection、Sec-WebSocket-Key、Sec-WebSocket-Version www.wanfengblog.com/archives/we…

  1. 什么情况会返回304状态码？ image.png
  2. 强缓存和协商缓存？请求头有哪些？

强缓存：cache-control 和 expires

协商缓存：ETag/If-None-Match 和 Last-Modify/If-Modify-Since

  1. 说一下get和post请求，是否可以用get提交数据？是否可以用post获取服务端数据？
  2. 什么时候会发options 请求，有什么用，会带什么请求头字段？

跨域请求发送post请求之前，由于安全原因，会自动发送一个options预检请求，用于检测服务器允许的http方法，服务器若接受该跨域请求，浏览器才继续发起正式请求。 image.png

立铭科技

  1. 项目描述，介绍自己做的模块
  2. 有用过vue3和ts吗？简单说一下
  3. 说一下ts的优缺点
  4. 做过小程序吗？有了解过吗？
  5. 你知道的http状态码有哪些？
  6. 协商缓存的请求头有哪些
  7. 跨域有哪些解决方法
  8. 非跨域情况下存在预检请求吗？
  9. 按钮被频繁点击场景下怎么处理

贝森创赋

一面：

  1. 在之前的项目中，菜单和按钮权限的处理方式
  2. 直接修改地址栏跳转无权限或不存在的地址怎么处理
  3. vue 的响应式原理
  4. vue 的通信方式
  5. vuex 中 mutation 和 action 的区别
  6. v-model的原理是什么
  7. 组件中 data 为什么是函数的形式返回
  8. 如何监听数组的变化
  9. 在 created 中怎么获取 dom 的值？（$nextTick、settimeout）
  10. $nextTick 的作用及原理
  11. 同步任务和异步任务的区别
  12. Object 是什么数据类型
  13. 深浅拷贝的区别
  14. 职业规划

景行锐创

  1. 代码规范怎么做的
  2. 有自己封装过公共组件吗
  3. 当官方 UI 库更新了某个功能时，内部维护的组件库怎么做的
  4. 你理解的 vue2 和 vue3 都有哪些不同
  5. vue3 中组件通信方式有哪些
  • props（子组件内部使用 defineProps() 方法获取父组件传递的属性）
  • 自定义事件（子组件内部通过 defineEmits() 方法触发父组件绑定的方法并传递参数）
  • 全局事件总线（插件 mitt）
  • v-model
  • useAttrs （子组件内部可以通过useAttrs() 方法获取父组件绑定的属性与事件）
  • ref和$parent（父组件获取子组件的数据或者方法需要通过defineExpose对外暴露）
  • provide与inject
  • pinia
  • slot（默认插槽、具名插槽、作用域插槽）
  1. 在vue3 中定义一个子组件里面包含多个属性和方法，在父组件中是否可以通过 ref 直接访问子组件中的所有属性和方法呢（不行，需要在子组件中使用defineExpose()）
  2. nextTick 作用和原理
  3. 说一下事件循环呢
  4. promise.then是宏任务还是微任务
  5. 你做的 vue3 项目中有用 ts 吗
  6. react 自己学习到了哪些内容
  7. react 是怎么渲染的
  8. 虚拟 DOM 与真实 DOM 怎么进行比较更新的（diff算法）
  9. es6 中 for...in 和 for...of 的区别
  10. 怎么用 for...of 遍历对象 （对对象进行改造，内部使用 obj[Symbol.iterator]）
  11. 如何将对象变成数组（数组里面包含所有 key 或 value、或者键值对）（Object.keys\values\entrys）
  12. 对象深浅拷贝的区别
  13. 深拷贝方法有哪些
  14. 对象中包含function 可以用 JSON 的方法进行深拷贝吗？如果是new Date() 对象呢

image.png

  1. 最近的项目中用的哪种构建工具（webpack 或 vite ）
  2. webpack 和vite 的区别
  3. vite 的热更新机制是用什么实现的（rollup插件）

神州数码

  1. 讲一下最近做的一个项目，你在当中做了哪些
  2. websocket和http的方式有什么区别

image.png

  1. websocket断开连接了怎么办？如果是断网了呢？
  • 对于客户端掉线问题，可以通过心跳包来解决。客户端向服务器发送心跳包，服务器收到心跳包后会检测当前websocket session队列中是否存在同属性的websocket session，有的话关闭以前的session即可。

  1. websocket有三次握手吗

  2. 大量图片懒加载怎么做的？如果不用插件自己会怎么处理？

  3. 如果加载一张很大的图片（如50M）怎么处理

    • 图片压缩：将图片进行压缩，可以减小图片大小，从而缩短加载时间。但要注意图片质量，不要过分压缩导致图片失真。
    • 图片分割：将超大图片分割成多个小图进行加载，从而加快加载速度。这种方式需要在前端进行图片拼接，需要确保拼接后的图片无缝衔接。
    • CDN加速：使用 CDN 将图片缓存在附近的节点上，以便快速访问。
    • 懒加载：也就是一种图片延迟加载的方式，即当用户浏览到需要加载的图片时才进行加载，可以有效避免一次性加载大量资源导致页面加载过慢。
    • WebP 格式：使用 WebP 格式可以将图片大小减小到 JPEG 和 PNG 的一半以下，从而加快图片加载速度。
    • HTTP/2 : 使用 HTTP/2 协议可以并行加载多个图片，从而加快页面加载速度
    • 预加载：是在页面加载完成之后，提前加载下一步所需要的资源，以便用户快速浏览。

  4. http缓存了解吗？

  5. 说一下强缓存和协商缓存

  6. http状态码（301、302、307、308、401）含义

    • 301：资源永久重定向，允许将 POST 改成 GET
    • 302：资源临时重定向，允许将 POST 改成 GET
    • 307：资源临时重定向，不允许将 POST 改成 GET
    • 308：资源永久重定向，不允许将 POST 改成 GET
    • 401：当前请求需要用户验证

  7. Vue2和3区别

  8. Vue2和3双向数据绑定原理有什么不同

  9. Vue3的 Proxy 具体怎样实现深度监听的 详细说一下

在Vue 3中，深度监听是通过reactive API实现的，该API在内部使用ES6的Proxy来代理对象，从而实现响应式系统。Proxy不仅能够直接代理对象，也能够通过Reflect操作原始对象，实现更深层次的封装。

当你使用reactive函数时，Vue 3会递归地为所有嵌套的对象创建Proxy。这样，不仅最初传递给reactive的那一层对象是响应式的，所有嵌套的对象也是响应式的，这就实现了深度监听。

  1. Vue2和3的自定义指令区别

Vue 2 和 Vue 3 的自定义指令的主要区别在于创建和注册指令的方式，以及指令的生命周期钩子。

在 Vue 2 中，可以通过全局 Vue.directive() 方法或在组件中 directives 选项来定义指令。

在 Vue 3 中，指令现在必须通过 directive 函数创建，并通过全局 app.directive 方法或 directives 组件选项来注册。

Vue 3 中的指令还引入了新的生命周期钩子：created 和 mounted 分别替代了 Vue 2 中的 bind 和 inserted，beforeUnmount 和 unmounted 分别替代了 unbind 和 destroyed。

  1. Vue2和3的 provide 和 inject 区别，改变祖先组件中的属性值，孙子组件中对应的属性会同时改变吗？

download.csdn.net/blog/column…

  1. react Hook中 useMemo 作用

useMemo 的作用是在依赖项发生变化时，仅在需要时重新计算值，并且将之前计算的值缓存起来，避免不必要的重复计算。（等同于 Vue 中 computed 的作用）

const memoizedValue = useMemo(callback, dependencies)

其中 callback 是一个函数，用于计算和返回需要记忆的值，dependencies 是一个数组，表示依赖项。当依赖项发生变化时，callback 函数会重新执行以计算新的值。

  1. react中的高阶组件了解吗

高阶组件的参数是一个组件，返回值也是一个组件。高阶函数常用于组件的复用和逻辑的抽象。常见的高阶函数有：Promise、SetTimeout、arr.map() 等

优点：

  • 利用高阶组件可以针对某些React代码进行更加优雅的处理
  • 解决早期React使用Mixin混入，引起的相互依赖，相互耦合，不利于代码维护

缺点：

  • HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难
  • HOC 可以劫持props，在不遵守约定的情况下也可能造成冲突
  1. webpack babel中presets 作用，plugin呢？它们有什么区别？

image.png

image.png

blog.csdn.net/algor123456…

  1. webpack中不用babel 翻译直接打包可以吗？为什么？

  2. 设计模式了解吗？策略模式呢

    策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案。

  3. 快速排序了解吗？时间复杂度和空间复杂度

时间复杂度：

  • 最差：O(n^2)
  • 平均：O(nlogn)

空间复杂度：

  • 最差：O(n)
  • 最优：O(logn)

金信石

  1. Vue2和3的响应式原理有什么区别
  2. vue中是怎么更新 template 模板中的数据
  3. 说说组合式 api 和选项式 api 的区别
  4. Vue2和3中的watch 有什么区别

vue3:

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
  • watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
  • watchPostEffect，是后置刷新的 watchEffect()的别名，回调中能访问被 Vue 更新之后的所属组件的 DOM，也就是回调在Vue更新之后执行。
  • watchSyncEffect，是同步触发的 watchEffect()的别名，它会在 Vue 进行任何更新之前触发。
  1. Vue3的 watchEffect 了解吗？类似 react 中的一个hook（useEffect）

image.png

  1. 说说Vue的diff算法
  2. webpack中的性能优化
  • 基于esm的tree shaking
  • 对balel设置缓存，缩小babel-loader的处理范围，及精准指定要处理的目录。
  • 压缩资源（mini-css-extract-plugin，compression-webpack-plugin）
  • 配置资源的按需引入（第三方组件库）
  • 配置splitChunks来进行按需加载（根据）
  • 设置CDN优化
  1. 搭建公共脚手架需要注意哪些东西
  2. pinia 有用过吗？与Vuex 的区别

pinia的优缺点：

  • 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
  • 极其轻巧(体积约 1KB)
  • store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
  • 支持多个Store
  • 支持 Vue devtools、SSR 和 webpack 代码拆分
  • 不支持时间旅行和编辑等调试功能

Pinia是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

  1. 说说 Vuex 中 mutation 和 action 的区别，pinia 中的 action 呢？
  2. Vuex 中调用 action 中的方法有哪些？（dispatch、mapAction）
  3. ES6 中数组的扩展有哪些？

image.png

  1. 如何把一个一维数组转换成树型结构？
  2. ES6 中函数的扩展有哪些？

image.png

  1. promiseA+ 规范有哪些内容？
  2. 如何判断一个函数是否是promise（有then 方法并且返回一个promise）
  3. promise中 then 方法的作用
  4. VSCode常用哪些插件
  5. 有没有使用过一些AI相关的插件，提问的方式是怎样的
  6. 项目中描述的 RTSP 流媒体协议是怎样应用的
  7. 前端怎样去创建 websocket 连接的
  8. 怎样封装 websocket 方法 提供给所有人使用
  9. 有没有不用低代码平台做地图相关的业务，例如高德地图等

天府市民云

  1. 在vue中，从A页面跳转到B页面，再从B页面返回A页面，会触发哪些生命周期；
从`PageA`跳转到`PageB`：
    beforeRouteLeave -> beforeCreate -> created -> beforeMount -> mounted
从`PageB`返回到`PageA`：
    PageB 的生命周期：
        beforeRouteLeave -> beforeDestroy -> destroyed
    PageA 的生命周期：
        activated（如果使用了`<keep-alive>`组件）
        beforeCreate -> created -> beforeMount -> mounted（不使用页面缓存）
  1. 常见的视频格式有哪些

常见的视频文件格式有“avi”、“mp4”、“mov”、“wmv”、“flv”、“mpeg”和“webm”八种：

  • avi，微软开发的一种常见的视频文件格式；
  • mp4，广泛使用的视频文件格式，支持多种视频和音频编码，同时也支持字幕和元数据信息；
  • mov，苹果公司开发的视频文件格式，通常用于存储电影和其他视频内容，支持多种编解码器；
  • mkv，开放的多媒体容器格式等等。

www.php.cn/faq/646395.…

  1. 说一个在项目中遇到的印象深刻的问题，以及怎么解决的

蜀天梦图

一面

  1. js数据类型
  2. 如何判断数据类型
  3. 说说事件循环
  4. 了解隐式类型转换吗？如何推导的？object类型呢？

object类型进行隐式类型转换会调用的方法及优先级为

Symbol.toPrimitive -> valueOf -> toString

  1. ==和===的区别（隐式类型转换，分别比较的是什么？==比较的是属性值，===不能进行隐式转换，比较的是类型、属性值、内存地址）
  2. es6新特性
  3. 说说promise
  4. promise的实例方法（all、race、allSettled、any）
  5. promise的语法糖 （async/await）
  6. 浏览器首次加载页面的过程
  7. 了解垃圾回收吗？相关的算法了解吗
  8. hash模式和history模式的区别

hash模式是通过location.hash改变路由以及触发hashChange事件，兼容性较好。 history模式是通过调用history.pushState()改变路由，部分浏览器可能不支持history API。

当hash模式改为history模式时，需要在服务器设置重定向，将所有路由都重定向到根目录。不然浏览器会去具体的路径下查找index.html文件，而实际上index.html文件是放在根目录下，这样就会导致浏览器报404的错误，所以需要web服务器配合设置重定向到根目录。

  1. Vue2和3的响应式原理
  2. 说说keep-alive，和其中的两个钩子
  3. 有做过登录验证吗？
  4. 页面文字溢出如何处理？如果要显示完整的文本呢？
  5. 项目中遇到的印象深刻的问题以及怎么解决的
  6. 做大屏页面与普通页面有什么注意的点（响应式布局，页面适配，设置最小宽高）
  7. 用低代码平台开发感觉如何
  8. 有没有主动承担过业务之外的事，具体是什么
  9. 会不会将自己的这些经验进行分享
  10. 之前是如何与后端进行联调的
  11. 在之前的项目中与产品经理的交流多吗
  12. 平时了解算法吗
  13. 宏微任务优先级，常见的方法分别有哪些？
  14. 有处理过跨域吗？
  15. 你做过性能优化，具体有哪些方式？实践过的有哪些呢？
  16. 有没有参与过前端技术选型
  17. 代码版本管理用的是什么？github还是gitlab（gitlab）
  18. 平时会用浏览器的调试工具吗

二面

  1. 函数柯里化，说一下自己的理解

函数柯里化（Currying）是一种技术，将一个接受多个参数的函数转换成一系列接受一个参数的函数。换句话说，柯里化的函数接受一个参数，然后返回一个新函数，这个新函数接受下一个参数，如此反复，直到所有参数都被提供为止。 柯里化的优点包括：

代码重用：通过柯里化，你可以创建更具体的函数，这些函数可以重复使用。

部分应用：你可以部分应用一个函数的参数，然后返回一个接受剩余参数的新函数。

  1. 事件循环
  2. WebGL了解吗？跟svg、canvas的区别 image.png
  3. 对算法的数据结构了解吗？

数组、链表、栈、队列、哈希表、二叉树、图（Graph）、堆

  1. 可以用哪些数据结构处理graph图？

选择何种数据结构取决于应用场景和图的性质。如果图是稠密图，邻接矩阵可能更合适；如果是稀疏图，邻接表或边列表可能更高效。对于需要快速查找邻接顶点的操作，邻接集是一个不错的选择。

  1. 之前做过地图，主要是做的什么呢？图层？瓦片？坐标系？

坐标系： 地理坐标系（经纬度、高度）、笛卡尔坐标系、极坐标系、圆柱坐标系、球坐标系、同构坐标系、局部坐标系

avatar
文章
阅读
粉丝