1. 实习经历
2. 水平垂直居中怎么实现
3. 除了flex还知道什么布局方式？
4. flex和grid的区别
5. 什么是防抖和节流？有什么区别？
6. 分别的应用场景？
7. 在输入框输入内容，请求接口对比是否输入正确，用防抖还是节流？
8. 什么是事件委托？
9. promise是干什么的，可以改变状态吗？
10. vue有什么优势和缺点
11. seo是什么，怎么解决seo不友好
12. ssr是什么，有什么优劣，与前端渲染有什么区别吗
13. vue生命周期
14. vue2和vue3在响应式原理实现上的区别

1实习经历

讲述一下自己的实习经历，在哪实习，参与过那些项目，负责什么，做了什么，学到了什么...

属于开放性题目

2水平垂直居中怎么实现

1. 使用flex布局设置居中。
2. 使用flex 时也能通过给子项设置margin: auto实现居中。
3. 使用绝对定位的方式实现水平垂直居中。
4. 使用grid设置居中。

能说出来三四种就可以了，但是保不齐面试官还会继续问，所以尽可能的多说几种实现方式

果不其然，这一次面试官果然就继续问了

3除了flex还知道什么布局方式？

可以参考我之前写的这一片文章，有多种详细的实现方式： 我已经说了5种css居中实现的方式了，面试官竟然说还不够

4flex和grid的区别

1. flex是一维布局系统，适合做局部布局，比如导航栏组件。

2. grid 是二维布局系统，通常用于整个页面的规划。

5什么是防抖和节流，有什么区别，分别的应用场景

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率

防抖

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

节流

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

有一个经典的比喻:

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

6分别的应用场景？

防抖：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能

7在输入框输入内容，失焦后请求接口对比是否输入正确，用防抖还是节流？

防抖。

函数节流是减少函数的触发频率；

函数防抖则是延迟函数执行，并且不管触发多少次都只执行最后一次。

8什么是事件委托？

事件委托也称之为事件代理（Event Delegation）。 是JavaScript中常用绑定事件的常用技巧。是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。

它的原理是利用冒泡的原理，把事件加到父级上，触发执行效果。

9promise是干什么的，可以改变状态吗？

Promise 是异步编程的一种解决方案

它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

10vue有什么优势和缺点

优点：

1. vue是轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

2. vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

缺点：

1. 不利于SEO优化.
2. 首屏加载速度慢.加载时,将所有的css,js文件进行加载.
3. 不支持IE678

11seo是什么，怎么解决seo不友好

seo是搜索引擎优化。在搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多的流量

单页面的内容是根据路由变化动态生成并展示出来的，很多页面的内容是通过ajax异步获取的,网络抓取工具并不会等待异步请求完成后再行抓取页面内容

解决方式可以使用SSR(服务端渲染)或者是预渲染

12ssr是什么，有什么优劣，与前端渲染有什么区别吗

vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染就是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器

服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬虫可以抓取到完整的页面信息

SSR另一个很大的作用是加速首屏渲染,因为无需等待所有的JavaScript都完成下载并执行,才显示服务端渲染的标记,所以用户会更快地看到完整渲染的页面.

13vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

• beforeCreate：组件实例被创建之初，组件的属性生效之前

• created：组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用

• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用

• mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

• beforeUpdate：组件数据更新之前调用，发生在虚拟 DOM 打补丁之前

• update：组件数据更新之后

• activited：keep-alive 专属，组件被激活时调用

• deactivated：keep-alive 专属，组件被销毁时调用

• beforeDestory：组件销毁前调用

• destoryed:组件销毁后调用

14vue2和vue3在响应式原理实现上的区别

Vue2中通过 Object.defineProperty 实现数据劫持，使得数据实现响应式更新。Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Vue3通过Proxy（代理） 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

Part1最后

欢迎关注公众号：oldCode

回复：面试 获取面试资料