这个礼拜一直在面试，想着看看能否拿到不错的offer前去实习，从周一到周四，面了将近10家，特收拾此份面经，期望对春招的各位有所协助

A公司

一面

面试官人很好，我答复的时分不会他会笑笑然后提示我

毛遂自荐~

面试官简略问了下项目状况，也没继续深化~

js数据类型

接着又问了原始和引用类型的差异

let，const的差异

const之后的原始类型无法更改

js效果域

大局，函数，块级，eval诈骗词法~

针对小白的js效果域具体介绍 – (juejin.cn)

谈谈效果域链

函数内拜访变量是顺着效果域链查找的，从内往外，可是不能从外往内，这个链状是看函数的声明方位，声明在大局，就往大局找

es6的Promise

先答了Promise三种状况，pending，fulfilled，rejected，然后边试官问我状况能够逆转吗，不可逆，否则处理异步就不可靠了

Promise和async,await差异

Promise能够用.catch或许.then的第二个参数来捕获过错，async需求凭借try,catch来捕获过错，async是经过Promise和generator打造的，generator相当于能够用next操控履行

ref和reactive差异

源码分析ref和reactive的差异 – (juejin.cn)

讲Proxy，依托搜集，依托触发，类型判别，js目标的getter，setter~

怎样调用父组件的函数

组件传参，经过事情或许props

场景题：给你一个类数组，便是key，value对这种，规划一个组件，经过vue去把这些数据烘托出来，不必考虑后端

聊了迭代类数组，父子组件传参，v-for，key

然后期望完成分页处理，每页数据只要10条

写两个点击函数，用计算特点完成，把数据弄成二维数组，假如是往具体页面增加数据便是将那页的数据提取出来进行操作

最终边试官跟我说是校友哈哈哈

二面

毛遂自荐+聊自己的

diff算法

面试官直接拿我最近的文章问

详聊vue的diff算法 – (juejin.cn)

聊项目，项目亮点

二叉树遍历

好久没刷算法题~

// 先序遍历
function preorder(root) {
    if(!root)  return     
    console.log(root.val) 
    preorder(root.left)
    preorder(root.right)
}
// 中序遍历
function minorder(root) {
    if(!root)  return  
    minorder(root.left)
    console.log(root.val) 
    minorder(root.right)
}
// 后序遍历
function backorder(root) {
    if(!root) return 
    backorder(root.left)
    backorder(root.right)
    console.log(root.val)
}

B公司

这家公司电话面……，很不喜爱电话面

处理异步的办法

回调，promise，generator，async,await，发布订阅……

vue数据更新，可是页面没有更新，你怎样排查

考虑数据是否呼应式、考虑数据更新在异步中，能够运用nextTick、也有或许数据被缓存了，考虑运用$set办法直接修正数据

运用vuex的留意点

vuex遵从单向数据流的原则，只能从state流向组件，修正state只能经过action或许mutation来修正，而不是直接拿到state进行修正，别的mutation是同步的操作，action能够包括异步操作，别的一般运用vuex是由于需求办理较大型的状况，关于简略的状况办理，主张直接父子，子父传参

介绍下vue3的生命周期

分为几个阶段，创立阶段，挂载阶段，更新阶段，毁掉阶段，还有捕获过错的阶段。每个阶段都有对应的钩子函数去履行。然后问我一般用哪个钩子去发恳求，我说用onMounted，由于有些数据拿到之后或许会操作dom

vue2和vue3呼应式原理差异

vue2是用得Object.defineProperty，vue3是用得Proxy，Proxy能够捕获更多类型的操作，更灵敏
vue3对ts的支撑更友好，供给了更好的类型判别和过错提示

`Object.defineProperty`的局限性

不能监听数组的改动，不能监听新增特点和删去特点，defineProperty界说的特点不能够枚举，因而无法监听新增的特点或删去的特点，不能监听目标的深层特点，defineProperty功能开支很大，

会用浏览器去打断点调试吗

我说我用过，可是用得很少，都是用log去打印调试的，由于一般打包工具会主动把无关代码剔除去

C公司

毛遂自荐~

你有封装过组件吗，讲讲

聊得进程中谈到了插槽，就问我了效果域插槽

效果域插槽用过吗

效果域插槽答应子组件向父组件传递数据，需求在子组件v-bind绑定对应的数据，父组件经过slot-scope特点来接纳传递的数据

<!-- 子组件 -->
<template>
  <div>
    <slot :item="item"></slot>
  </div>
</template>
<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.item }}</p>
    </template>
  </child-component>
</template>

盒模型

js闭包

面试官：聊聊js闭包。来看这篇，小白也能读懂！（内含调用栈及效果域链的具体解说） – (juejin.cn)

js判别数据类型

深化知道js四大常用数据类型判别，一次性带你搞理解（内含面试热门）！ – (juejin.cn)

event-loop

先履行同步，再履行微使命行列，最终履行宏使命，履行一次宏使命之前会清空掉微使命行列

== 和 === 的差异

== 判别的是值，而且比较时会进行类型转化，=== 判别类型是否一致，这种比较更严厉，防止类型转化

es6的新特性

let，const，解构，箭头函数，set，map，WeakSet，WeakMap，Reflect，Promise，generator，async……

vue2和vue3呼应式

vue生命周期

这个面试官跟我说恳求数据一般放在beforeCreated，由于onMounted得话，等dom加载结束再去恳求数据，会导致数据等候更长的时刻才能展现

keep-alive

将组件缓存起来，像是页面固定的广告组件就能够用这个包裹，这样跳转路由时不需求重新烘托dom，而且还供给了两个钩子activated和deactivated，分别在缓存过的组件加载时和脱离时触发

后边聊了聊项目难点，面试官自己介绍了公司的业务相关内容

D公司

毛遂自荐~

为什么挑选前端

项目难点

session，cookie，localStorage的差异

三者都是web开发用于在客户端和浏览器端之间存储数据的机制，不过各有特点

存储：session存在服务器，cookie和localStorage存储在浏览器

生命周期：session与用户会话相关联，即用户翻开浏览器和封闭浏览器的时刻段，cookie能够设置过期时刻，localStorage永久，除非显现删去

存储容量：session最大，cookie一般4Kb，用于寄存登录令牌，localStorage一般5Mb

安全性：session安全性最高，由于存储在服务端，客户端无法直接拜访，cookie和localStorage容易受到XSS和CSRF等安全攻击

总得来说，session合适存储敏感信息和大数据，安全性高，cookie合适存储少量数据，用于客户端和服务端之间的通讯，localStorage合适存储耐久化数据，cookie最大特征便是任意恳求都会把cookie带上

大文件上传

将大文件分割成多个小块，然后逐个上传这些切片，最终在服务端将这些切片组合成完整的文件

追问：后端怎样确保这个次序

前端将文件切片时，为每个切片增加一个序号或许仅有标识符，上传到服务端时，将这些切片依照序号或标识符的次序进行上传

koa结构相比较于其他的node结构有何优势

koa运用了依据Promise的中间件机制，相比较Express等结构愈加轻量级和灵敏，而且中间件的写法愈加简洁明了，运用async,await防止回调地狱。

Koa供给了一个集中的过错处理机制，经过try，catch语法捕获异步过错

Koa答应开发者更细粒度地操控http恳求和相应的进程，比方经过洋葱模型能够准确地操控呼应的次序~

浏览器的线程和进程

进程包括多个线程，一般浏览器有一个主进程和多个烘托进程，主进程便是负责办理用户界面，网络恳求，烘托进程负责处理网页的烘托和交互

浏览器的线程用于履行不同的使命，首要的线程如下

GUI线程：负责烘托用户界面，处理用户交互事情，比方点击

烘托线程：负责解析html，css和js，将页面烘托成可视化的页面

js引擎线程：履行js代码

事情触发线程：用于办理事情行列

定时器线程：用于办理定时器线程，处理定时器回调

追问：js引擎线程能否和htm烘托线程一起进行

答：不能，js履行会堵塞html的烘托，由于js能操作dom，若能一起进行，就会造成不安全的烘托

引进第三方库一般有什么办法

cdn引进，也便是用script标签的src
经过npm装置
本地文件引进，下载到本地然后script的src引进
模块化引进，import, from

追问：script堵塞能够用defer处理，加了defer还有什么影响

加了defer后，除了处理script的堵塞问题，还会让script异步加载，假如有多个defer的script，依照从上到下的次序履行，遵从的宏使命行列；defer特点会让script推迟履行，直到dom构建完履行，由于defer的script会让DOMContentLoaded事情触发前履行；别的便是IE9极端以下版本不兼容

css的伪类

hover：鼠标悬停在元素上的状况
```
a:hover {
    color: red;
}
```

focus：被选中时的状况

input:focus {
    border-color: blue;
}

active：鼠标点击不放时的状况

button:active {
    background-color: yellow;
}

visited：挑选现已被拜访过的链接的状况
```
a:visited {
    color: purple;
}
```
first-child：某个子元素的第一个子元素
```
li:first-child {
    font-weight: bold;
}
```
last-child：某个子元素的最终一个子元素
```
li:last-child {
    color: green;
}
```

nth-child：某个子元素的指定方位的元素

li:nth-child(odd) {
    background-color: #f2f2f2;
}

nth-of-type：某个子元素的指定类型的子元素
```
p:nth-of-type(2) {
    color: blue;
}
```

es6新增的数据类型

Symbol：表明仅有值，一般用作目标的key，确保特点的仅有性，像是set的迭代特点就放在symbol中，symbol值一般在操控台不会显现描绘符

BigInt：能够表明任意精度的值，不受Number的64位双精度浮点数规模的约束，在数字后边加一个n就能够表明为大整型

Promise和async,await的差异

追问：await报错后边是否还会履行

答：不会

继续追问：假如想要继续履行，怎样做

我答复的是try,finally，或许一个try,catch

js有哪些监听事情的办法

addEventListener

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

on事情特点

document.getElementById('myButton').onclick = function() {
    console.log('Button clicked!');
};

html事情特点

<button onclick="console.log('Button clicked!')">Click me</button>

事情委托

document.getElementById('parentElement').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        console.log('Button clicked!');
    }
});

jQuery事情

$('#myButton').on('click', function() {
    console.log('Button clicked!');
});

vue2，vue3的差异

功能优化。vue3在VDom上有许多改善
Composition API。贴近原生js的函数式写法
支撑ts。vue3对ts的支撑愈加完善
呼应式。Proxy替代了Object.defineProperty，进步了功能
Tree-shaking支撑。vue3更好地支撑了Tree-shaking，打包后代码愈加精简
更小的体积。

子组件怎样监听父组件传值的改动

子组件能够经过watch来监听props的改动

computed，watch的差异

二者都是用于监听数据的改动，可是computed有缓存特点，watch在用法上更灵敏，适用于监听特定数据走一个回调，处理异步

vue初始化页面有了解它底层的烘托进程吗

先经过new Vue()来创立一个vue实例目标，然后会将数据进行呼应式处理，这样数据产生改动时，相关的视图就会主动更新，之后vue会将模板template解析生成VDom，然后将VDom进行挂载烘托到页面上，最终数据产生改动时，diff算法会比照新旧dom，只更新改动的VDom到实在Dom，这样保证了页面的高效更新

最终介绍公司业务

E公司

这个面试官挺好的，句句有回应，便是说话有丢丢结巴

毛遂自荐~

vue3呼应式原理

追问：数据代理为什么比数据阻拦好

答(这是面试官说的)：数据阻拦便是vue2的defineProperty，Proxy功能会更好，能够目标嵌套目标，数据阻拦只会代理第一层，是懒代理，defineProperty会把目标进行一个深层次的递归，功能短缺，proxy只需求for循环第一层，后边的目标在你运用的时分才会履行代理，因而vue3有个缺陷便是，当你对一个目标增加特点时，vue不会主动呼应这个改动，这便是目标新增特点不呼应的问题，能够用$set处理这个问题

watch，watchEffect的差异

二者都是用于监听数据改动，watch接纳三个参数，监听的数据，回调和一些参数，而watchEffect包括了watch的功能，无论是否监听呼应式数据，watchEffect都会在初度进入页面时或许更新页面时立即履行一次，而且里边能够写调度函数，不会二次履行相冲突

说说Pinia

然后聊到了ts，面试官说ts不仅仅是给数据类型加了个约束，还有便是多人协作时的一个标准性，许多es6的高级语法是ts才具有的

你关于组件的主意

组件就相当于一个模块化的思想，规划好一个组件能够拿去重用，进步代码的复用性

组件传参怎样双向绑定

我先说了父子组件是不主张去双向活动数据的，面试官说有时分需求这么干，还是在emit里边，写个语法糖updata-，这样props变量就看也i支撑在外面v-model双向绑定

display：table设置为1列时，占多少分之一

没答上来，面试官说默许状况屏幕被划分为24块，也便是1/24

恳求办法get，post差异

这儿忘记了，全程都是面试官在解释

恳求办法都是前后端一起标准好的，办法中delete就不说了，便是作删去用得，一般用户操作便是一个增删改查，增得话便是用post恳求，查一般便是get恳求，而且get恳求是没有恳求体body的，就相当于一切的参数都放在url中，所以不安全，而且url的长度是约束的。post恳求是有body的，比方用户填一个form表单便是用post放到body中

因而便是get经过url传参，有长度约束，而且不安全，post恳求有恳求体，长度没有约束

后边聊了聊说现在写vue，一般都是用ts写的，而非template，而且他们公司是用低代码渠道搭建前端应用，低代码能够更好地处理路由和菜单的办理，前后端配合

F公司

毛遂自荐+项目~

还问我前端学了多久……

组件通讯

父子：父组件v-bind绑定特点用于传值，子组件props接纳

子父：父组件订阅一个事情，子组件经过$emit发布该事情，且带着事情参数，让父组件订阅收效

vuex，pinia

vue组件通讯【父子，子父，vuex】 – (juejin.cn)

eventbus

eventbus便是用于vue组件通讯的形式，它是一个大局总线，能够用来在不同的组件之间进行传递信息和触发事情，不需求明确地经过父子组件传递props或许走回调的形式来完成

先创立一个vue实例目标，用它来触发和监听事情，一般这个写在入口文件或许根组件，让后将其挂载到vue的原型上，这样一切的组件都能够拜访到它

比方下面的组件A和组件B凭借eventbus进行通讯，A组件点击按钮发送信息，B组件监听到该消息

// EventBus.js
import Vue from 'vue';
// 创立一个空的Vue实例作为事情总线
const EventBus = new Vue();
export default EventBus;

// ComponentA.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
import EventBus from './EventBus';
export default {
  methods: {
    sendMessage() {
      // 发送名为 'message' 的事情，附带一些数据
      EventBus.$emit('message', 'Hello from Component A');
    }
  }
}
</script>

// ComponentB.vue
<template>
  <div>{{ receivedMessage }}</div>
</template>
<script>
import EventBus from './EventBus';
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    // 监听名为 'message' 的事情
    EventBus.$on('message', message => {
      this.receivedMessage = message;
    });
  }
}
</script>

经过运用eventbus就不需求了解组件的层级联系，当然也不能滥用，过多的大局事情会导致代码难以保护

抛开vue，怎样用js完成组件通讯

界说大局变量：一切组件都能够直接拜访和修正这些数据
发布-订阅形式：自界说事情，组件能够订阅某个事情，事情被另一个组件发布时，订阅者收到告知并履行相关操作
回调函数：一个组件将自己的函数传给另一个组件，在恰当的时分调用这个函数

vue源码看过吗，说下

只看过呼应式和路由……

输入url到页面烘托的整个进程

自行吟唱~

dns缓存在哪里

dns(Domain Name System)缓存一般存在于操作系统和浏览器中

操作系统的dns：本地保护一个dns缓存，用于存储最近解析过的域名和对应的ip
浏览器的dns缓存：现代浏览器也会保护自己的dns缓存，同样存储解析过的域名和ip，这样能够防止重复的dns查询

怎样处理js堵塞烘托

js堵塞烘托是由于js线程和烘托线程不能一起进行，能够用async和defer特点处理

async和defer的差异

二者都是能够异步加载script标签，可是defer最终是有一个履行次序的，这个次序便是代码次序，async履行次序不确定，取决于哪个脚本先加载完成

因而脚本之间互相独立而且次序不重要时能够运用async特点，若有依托联系则运用defer特点

规划形式有了解多少

单例形式：确保一个类只要一个实例目标，并供给一个大局拜访点

工厂形式：将目标的创立进程封装在一个工厂办法中，依据不同的条件创立不同类型的目标

观察者形式：界说目标之间一对多的依托联系，一个目标的状况产生改动时，其一切依托者都会收到告知并主动更新

发布订阅形式：至今不理解和观察者形式什么差异，发布者能够有多个订阅者，它发布信息并告知一切的订阅者，订阅者收到信息能够去履行相应操作

闭包

因提到了GC，有了后边的问题……

废物收回机制你了解吗

废物收回机制Garbage Collection 简称GC，是一种主动内存办理的技能，在程序运转中主动收回不再运用的内存，也便是办理内存的分配和释放

js的GC首要有两种：

标记清除：这是最常见的战略，GC会周期性的扫描程序中的目标，标记那些仍然被引用的目标，GC会清楚那些没有被标记的目标，然后释放它
引用计数：实际上很少用这个，GC会依据每个目标的引用计数，目标被创立时，计数为1，被引用时，计数加1，不在被引用时，计数减1，计数为0时，释放它

异步你了解吗

event-loop

先同步，后履行微使命，再履行宏使命，宏使命和微使命都有相应的行列履行，履行一次宏使命之前掏空前面的微使命行列~

用户翻开首页，加载5s才看到了内容，优化计划都能够说说

这么久才看到页面有或许是由于数据资源大，用户网速慢，服务器呼应慢

优化如下：

对css，js和图片等静态资源进行紧缩处理，减小文件大小，加快下载速度；
将页面的非要害资源设置成推迟加载，使页面首页加载时只加载必要的内容，后再加载其他资源；
不影响页面烘托的资源能够运用异步的办法进行加载；
将静态资源布置到CDN上，利用cdn的分布式节点加速资源的传输
利用浏览器缓存机制和服务端缓存机制，削减重复恳求
对前端代码进行优化，削减重复逻辑

大文件上传

你项目跨域是怎样处理的

跨域便是由于浏览器的同源战略，后期单独出篇文章来讲，我答的是cors，还有josnp

简略恳求和非简略恳求

简略恳求是浏览器向服务器发送的一种特定类型的跨域恳求，满足如下条件就不会触发浏览器的预检恳求

运用以下办法：get,head,post
恳求头只包括以下字段：accept,accept-language,content-language,content-type(有约束)

满足这些条件浏览器会将其视为简略恳求，直接发送给后端，不会触发预检恳求，服务器收到恳求后，若答应跨域，则会回来呼应

不满足那些条件便对错简略恳求，这些恳求会触发浏览器的预检恳求，服务器接纳到预检恳求后，需求回来相应的cors头部信息来确认是否答应跨域

强缓存和洽谈缓存了解吗

强缓存和洽谈缓存是浏览器在缓存资源时运用的两种不同战略

强缓存：强缓存是经过设置http呼应头的cache-control和expires字段来完成的，当浏览器发送恳求时，会先查看缓存中是否存在资源以及是否过期，若没有则直接从缓存中获取资源，不会向服务器发送恳求。

洽谈缓存：洽谈缓存是经过http呼应头中的etag和last-modified字段来完成的，当浏览器发送恳求时，会先向服务器发送一个验证恳求，询问资源是否有更新，服务器收到验证恳求后，会依据资源的内容来生成一个仅有标识etag和最终修正时刻last-modified，若资源没有产生改动，则服务器回来304状况码，告知浏览器能够继续运用缓存中的资源，若资源产生了改动，则服务器回来新的资源内容和相应的状况码

强缓存和洽谈缓存能够结合运用，浏览器在接纳到服务器的呼应时会依据cache-control和expires字段判别是否运用强缓存，假如强缓存失效，则会发送一个带有if-none-match或if-modified-since字段的恳求，进行洽谈缓存验证。

keep-alive源码看过吗，描绘下

先创立一个缓存目标，中心逻辑是获取第一个子组件的VNode，然后获取组件的仅有key，假如缓存中存在该组件实例，那么直接回来缓存中的实例，若没有则创立一个实例并存入缓存中，最终还要经过mixin来监听组件的毁掉事情，在组件毁掉时从缓存中移除

mixin

mixin是一种在vue中用于复用组件选项的办法。经过mixin，能够将一组组件选项合并到多个组件中，mixin一般是一个js目标，能够包括任意组件选项，比方data,methods,computed等，当一个组件运用mixin时，mixin中的选项会被合并到组件的选项中

前后端通讯

http恳求
ajax，js异步与服务器进行通讯
websocket，答应前端和后端树立耐久衔接，并进行双向实时通讯，比方在线聊天
SSE(Server-Sent Events)，答应服务器向客户端推送实时更新的数据，与websocket不同，sse只能从服务器向客户端发送数据，不能双向通讯

axios

axios依据Promise，让咱们能够轻松地发送异步恳求，依据XML和Fetch，而且运用promise对http恳求进行封装，还能够进行阻拦操作，能够在恳求或呼应在发送或许接纳前进行阻拦和处理，比方弹出框能够凭借它来完成，别的还能够撤销恳求，防止不必要的资源浪费，别的axios供给了丰富的过错捕获机制，能够自界说大局的过错处理函数

回来一个数字的千分位

比方数字123回来字符串123，数字1234回来字符串1.234，数字123456回来字符串123.456……

先将数字转字符串，然后3个字符串一起作为数组的元素，最终数组join时带个点

let n = 1234 // 输出"1.234"
function getThousandSign (n) {
    const str = n.toString()
    const arr = []
    let len = str.length
    for(let i = len; i > 0; i -= 3) {
        let block = str.substring(i - 3, i)
        arr.unshift(block)
    }
    return arr.join('.')
}
console.log(getThousandSign(n)); // 1.234

G公司

这家公司是做uniapp开发的

uniapp怎样完成下拉改写，上拉加载

下拉改写：运用页面钩子onPullDownRefresh处理逻辑，页面中运用refresh-view组件展现下拉改写的效果，并监听refresh事情

上拉加载：运用页面钩子onReachBottom处理逻辑，页面中运用scroll-view组件，并监听scrolltolower事情

怎样完成多端适配

经过# ifndef 来包裹顶部电量信息view盒子

vue和nvue

vue.js：vue时uniapp中首要的开发办法，适用于多个渠道的开发

nvue.js：nvue时uniapp中的一种新的开发办法，专门为小程序端而规划的一种开发办法，经过运用原生组件和原生烘托办法来进步小程序端的功能和体验

封装过组件吗

定位的缺陷

position用absolute，fixed会导致元素脱离文档流，而且二者依托最近的先人元素产生改变会导致定位不准

后边一直在闲聊……

H公司

这个面试官一直拿着我的往期文章来问

毛遂自荐+项目

深浅复制

面试官：手写一个浅复制和一个深复制（复制详解） – (juejin.cn)

自己写的文章当然有形象，不过关于深复制我没处理函数，因而他接着问我怎样深复制函数

函数得话应该便是直接回来即可，可是假如是箭头函数，那么就不能有实例目标，因而或许需求用上eval()生成一个新函数

类型判别

深化知道js四大常用数据类型判别，一次性带你搞理解（内含面试热门）！ – (juejin.cn)

闭包

面试官：聊聊js闭包。来看这篇，小白也能读懂！（内含调用栈及效果域链的具体解说） – (juejin.cn)

手写防抖节省

面试官：手写下防抖节省 – (juejin.cn)

localStorage，cookie，session的差异

js事情触发

面试官：请问js事情触发进程是怎样的 – (juejin.cn)

为什么0.1 + 0.2 !== 0.3

由于浮点数精度问题，这些数被转化成二进制时，二进制是无法准确表明一些十进制小数，0.1和0.2在二进制中是无限循环小数，会产生精度丢掉

追问：怎样处理

将浮点数乘以10，使其最终转化成整数再进行比较

es6新特性

call，apply，bind差异

三者都是去显现改动this指向，call和apply的差异是apply能够以数组的形式进行传参，bind会回来一个新的函数，需求再次进行调用

new操作的进程

在结构函数中创立一个this目标，然后结构函数中的内容就相当于往this里边挂特点，别的还会放一个实例目标的隐式原型，也便是结构函数的显现原型，最终return出这个this目标

js中this究竟指向哪里？现在终于搞定了！ – (juejin.cn)

css垂直水平居中

元素躲藏

最新css面试题汇总【助力金三银四】 – (juejin.cn)

削减重排重绘

输入url到页面烘托后半段：回流，重绘，优化【一次性带你搞理解】 – (juejin.cn)

这个时分我就笑着说面试官拿着我的文章来问，面试官说这些八股其实在开发中确确实实是会用上的

谈谈你对vue的知道

mvvm，呼应式，组件化，生态……

vue的插槽

默许插槽，子组件未命名的插槽，父组件传递内容到子组件时，子组件经过一个不带特点的slot标签来界说默许插槽的方位

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<!-- 父组件 -->
<template>
  <my-component>
    <div>默许插槽内容</div>
  </my-component>
</template>

签字插槽，答应父组件向子组件传递特定称号的内容，并指定插入到子组件的特定方位，子组件经过slot标签的name特点来界说签字插槽的方位

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot> 
    <div>子组件内容</div>
    <slot name="footer"></slot> 
  </div>
</template>
<!-- 父组件 -->
<template>
  <my-component>
    <template v-slot:header>
      <h1>头部内容</h1>
    </template>
    <template v-slot:footer>
      <p>底部内容</p>
    </template>
  </my-component>
</template>

效果域插槽，答应子组件将数据传递给父组件，并在父组件中进行烘托，子组件经过slot标签中运用签字插槽的办法来传递数据，父组件经过slot指令来接纳数据并进行烘托

<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot> 
  </div>
</template>
<!-- 父组件 -->
<template>
  <my-component>
    <template v-slot:item="slotProps">
      <div>{{ slotProps.item }}</div>
    </template>
  </my-component>
</template>

nextTick

细聊vue的nextTick – (juejin.cn)

前端路由

面试官：谈谈前端路由的完成原理【hash＆history】 – (juejin.cn)

map和weakmap的差异

Iterator-Set-Map-WeakSet-弱引用详解 – (juejin.cn)

git切换分支用什么指令

将修正的文件暂存起来
git add myfile.txt
保存改变到仓库中
git stash
切换到其他分支进行作业
git checkout other-branch
在其他分支上完成作业后，能够恢复之前保存的改变
git stash apply

手写个ajax

详谈ajax发展进程 – (juejin.cn)

vuex和pinia的差异

vuex依据vue2的OptionsAPI，pinia依据vue3的CompositionAPI，而且更兼容ts……

最终

假如你对春招感兴趣，能够加我的个人微信：Dolphin_Fung，我和我的小伙伴们有个面试群，能够进群讨论你面试进程中遇到的问题，咱们一起处理

别的有不明白之处欢迎在谈论区留言，假如觉得文章对你学习有所协助，还请”点赞+谈论+收藏“一键三连，感谢支撑！

复盘最近的面试

A公司

一面

js数据类型

let，const的差异

js效果域

谈谈效果域链

es6的Promise

Promise和async,await差异

ref和reactive差异

怎样调用父组件的函数

场景题：给你一个类数组，便是key，value对这种，规划一个组件，经过vue去把这些数据烘托出来，不必考虑后端

然后期望完成分页处理，每页数据只要10条

二面

diff算法

二叉树遍历

B公司

处理异步的办法

vue数据更新，可是页面没有更新，你怎样排查

运用vuex的留意点

介绍下vue3的生命周期

vue2和vue3呼应式原理差异

Object.defineProperty的局限性

会用浏览器去打断点调试吗

C公司

你有封装过组件吗，讲讲

效果域插槽用过吗

盒模型

js闭包

js判别数据类型

event-loop

== 和 === 的差异

es6的新特性

vue2和vue3呼应式

vue生命周期

keep-alive

D公司

为什么挑选前端

项目难点

session，cookie，localStorage的差异

大文件上传

koa结构相比较于其他的node结构有何优势

浏览器的线程和进程

引进第三方库一般有什么办法

css的伪类

es6新增的数据类型

Promise和async,await的差异

js有哪些监听事情的办法

vue2，vue3的差异

子组件怎样监听父组件传值的改动

computed，watch的差异

vue初始化页面有了解它底层的烘托进程吗

E公司

vue3呼应式原理

watch，watchEffect的差异

说说Pinia

你关于组件的主意

组件传参怎样双向绑定

display：table设置为1列时，占多少分之一

恳求办法get，post差异

F公司

组件通讯

eventbus

抛开vue，怎样用js完成组件通讯

vue源码看过吗，说下

输入url到页面烘托的整个进程

dns缓存在哪里

怎样处理js堵塞烘托

async和defer的差异

规划形式有了解多少

闭包

废物收回机制你了解吗

异步你了解吗

event-loop

用户翻开首页，加载5s才看到了内容，优化计划都能够说说

大文件上传

你项目跨域是怎样处理的

简略恳求和非简略恳求

强缓存和洽谈缓存了解吗

keep-alive源码看过吗，描绘下

`Object.defineProperty`的局限性