A 公司的这个岗位职称比较高,所以涉及到的一些原理层面的东西居多,而且面试官在提问的时候,会按照你回答的东西去问下一个问题。
阮一峰老师 ES6 入门教程详解
原生 Promise.all 的实现
对这两个知道倒是都知道,区别还真不太知道。
区别1 ==> 编译时间
Webpack 是将整个项目打包之后再启动一个开发服务器供我们访问开发
Vite 直接启动一个开发服务器,在我们访问项目内的某个模块再对这个模块以及依赖模块进行打包
区别2 ==> 热更新功能(HMR)
Webpack 某个模块内容后是将该模块所有依赖重新编译
Vite 某个模块内容改变时,让浏览器重新去请求该模块
这个是目前比较常问到的一个问题!!!!几乎都必问
这个大家都知道,主要就是把Vue双向绑定的过程说出来,所以在这里也不详细写了。
实现Compile
这个当时懵了,不知道是啥了。后面查询的时候发现,其实就是数据监听通知订阅者模式
在JS中数据的存放位置分为 栈和堆
基本类型的数据大小是固定的所以是存放在栈中
引用类型的大小是不确定的,所以在存放方面会有所不同,它把数据存放在堆中,而指向这个堆中的指针是存放在栈中的,因为指针的大小是固定的
栈是用来存放基本类型的数据比如 Boolean、Number、String...
堆是用来存放引用类型的数据
什么是 虚拟 DOM ?
Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构,之所以需要虚拟 DOM,是因为浏览器中操作 DOM 的代价比较昂贵,频繁操作 DOM 会产生性能问题。
虚拟 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时,Vue 对比更新前后的虚拟 DOM,匹配找出尽可能少的需要更新的真实 DOM,从而达到提升性能的目的。
虚拟 DOM 的实现原理主要包括以下 3 部分:
key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】的差异比较。
tree shaking 的原理?
这个真不知道...敬请留言答复
eventloop 是什么?
JS并非多线程的语言,因此JS中的eventloop是为了不让JS的异步操作阻塞下面代码的运行,会将I/O的操作放入消息队列中等待执行完成的回调,然后会执行主线程中的回调方法,这也是实现异步操作的前提,触发I/O的操作有延时器,定时器,异步操作
什么是 微任务 和 宏任务 ?
在JS中的任务分为同步任务和异步任务,而异步任务又分为微任务和宏任务,微任务和宏任务的执行机制不同,当主线程中的同步任务执行完成后,会去执行微任务,然后去执行宏任务。
父子 组件渲染过程 ?
父beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
因为在 Vue 中的组件化开发中如果data是一个普通对象的话,会造成相同组件中的变量污染问题,我们使用函数暴露出一个对象的时候,这个对象只在组件内部可以访问到,只供当前组件使用。不会有变量/数据污染的问题。
这个考虑的方面也比较多,个人理解可能也不同。就个人理解而言:从开发阶段到代码发布生产环境,包含了以下几个内容:
这家公司的面试过程就很随和,也没有问八股文类的问题。
Vue路由的模式?
主要分为 hash 和history模式
Vue路由模式的区别?
Hash 模式
History 模式
Vue路由的传参方式?
Vue路由的传参方式分为 params 和 query 方式
在params 中传递的参数会保存在浏览器内存中,刷新页面后消失
在 query 中传递的参数会保存在 url 中,刷新页面后仍可用
如何让 params 的参数长久保存下去?
放在本地存储中,页面刷新时读取内容。
Vue路由的全局守卫?
beforeEach 在路由跳转前触发
afterEach 在路由跳转后触发
for 循环中 key 的作用?
在公司A中已解答。
Vue父子传参的方式?
Vuex 的五大模块?
State:存放数据
Getter: 获取数据
Mutation: 修改state中的内容
Actions: 调用mutation中的方法修改state的数据
modules: 将Vuex分成多个仓库存储不同模块的数据
Vuex 的modules 模块是什么?
将Vuex分成多个仓库存储不同模块的数据
Watch 和 Computed 的区别?
使用场景不同
Watch 用于监听一个属性的变化并触发回调函数
Computed 依赖于一个或多个属性并根据这些属性生成新的数据, Computed有缓存, 多次调用时,当依赖的值没有变化时还是使用之前的缓存值
ES6 的新特性?
同 公司A第一题。
ES6 中箭头函数的 this 指向?
在ES6 中箭头函数的 this 指向外部作用域
ES6 中 promise的用法?
使用 new 关键字声明一个Promise对象, Promise对象接收一个回调函数作为参数, 手动调用resolve / reject,可以让这个Promise对象的状态变为成功/失败的状态,在then/catch中可以获取到相应的结果。
ES6 中 promise 有哪些静态方法?
Promise.all
Promise.resolve
Promise.race
Promise.allSettled
Vue2 和 Vue3 的区别?
同公司A第5题
这家公司问的移动端和基础的东西比较多
CSS3 的常用属性?
新增了元素选择、Transition、transform、Keyframes、Flex、Grid、@media、Box-shadow、Text-shadow、渐变...
H5 的新增标签?
新增语义化标签Header、footer等
新增了媒体元素Video、Audio
新增了画布Canvas
拓展了input的type类型,date、email、 url、 search、 range、month、color、number
CANVAS 的用法?
HTML5 Canvas 画布
ES6 中新增的数组方法?
Filter、forEach、Map、some、every、isArray、at、fill、flat、Array.from、reduce...
reduce 方法 的是如何使用的?
Reduce方法接受两个参数回调函数和迭代的初始值, 可以在回调函数中通过形参的方式获取到这个初始值, 在每次循环的时候并对这个初始值处理, 最后返回这个初始值。
数组中 some 和 every 的区别
every是当数组中每一项都满足条件时整体返回一个Boolean值
Some 当数组中有一项满足条件时整体返回一个Boolean值
filter 和 map 的相关用法
他们都是循环的一种方式, 参数接收一个回调函数, 用于对数据的处理,都会基于当前数组返回一个新数组,都需要在回调函数中 return 出来一个内容。
Filter根据筛选条件返回满足条件的数据
Map 根据当前数组生成一个新的数组
CSS3 的选择器
CSS3选择器-30个
Object.defineProperty 和 proxy 的区别
Object.deinfeProperty
是监听对象中的某一个属性
只提供了setter 和getter方法
对于数组的某些操作也监听不到
Proxy
是监听整个对象的变化
提供了丰富的API用于监听数据的变化
可以监听到数组的变化
v-for 和 v-if 的哪个优先级高
当 vue 处理指令时,v-fo r比 v-if 具有更高的优先级,通过 v-if 移动到容器元素,不会再重复遍历列表中的每个值,取而代之的是,我们只检查它一次,且不会再 v-if 为否的时候运行 v-for。
v-for 和 v-if 会有什么问题, 如何处理
永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)
1. 如果避免出现这种情况,则在外层嵌套 template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行 v-for 循环
2. 如果条件出现在循环内部,可通过计算属性 computed 提前过滤掉那些不需要显示的项
Vue 中组件传值的方式
同公司B 第 7 题
webpack 和 vite 的区别
同公司B 第 3 题
什么是回流和重绘
三种情况,会导致网页重新渲染。
1. 修改DOM;
2. 修改样式表;
3. 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)。
重新渲染,就需要重新生成布局和重新绘制。前者叫做"重排"(reflow),后者叫做"重绘"(repaint)。需要注意的是,"重绘"不一定需要"重排",比如改变某个网页元素的颜色,就只会触发"重绘",不会触发"重排",因为布局没有改变。但是,"重排"必然导致"重绘",比如改变一个网页元素的位置,就会同时触发"重排"和"重绘",因为布局改变了。
什么是 diff 算法
这个就不太知道了...
Vue 是如何实现依赖数据更新视图的
简单的说就是Observer + Compile 去处理的, 感兴趣的同学可以去看一下vue的源码。
flex 和 grid 布局的区别
Flexbox 是一维布局系统,适合做局部布局,比如导航栏组件。
Grid 是二维布局系统,通常用于整个页面的规划。
二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局,但是没有 Grid 强大和灵活。二者结合使用更加轻松。
flex 布局和 Grid 布局有实质的区别,那就是 flex 布局是一维布局,Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局,一行或者一列。Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。
什么是 flex 布局
Flex 布局教程:语法篇
什么是 grid 布局
CSS Grid 网格布局教程
H5 中 rem 和 em 的计算方式
Rem 是根据根元素的 font-size计算的
Em 是根据父元素的 font-size计算的
移动端中的 响应式布局 的几种方式
Flex布局
Rem
栅格布局
@media
在文章的结尾就是大家对自己的项目一定要了解,虽然可能确实是自己做的,但是时间长了会忘,建议面试之前再把自己的项目好好看一下,大多数公司还是会看你简历上面写的内容去拓展性的问你相应的问题,这个答不上来大概率会让面试官觉得你项目经历是编的,或者不是自己写的,从而扣分。