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

1实习经历

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

属于开放性题目

2水平垂直居中怎么实现

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

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

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

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

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

4flex和grid的区别

flex是一维布局系统，适合做局部布局，比如导航栏组件。
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有什么优势和缺点

优点：

vue是轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

缺点：

不利于SEO优化.
首屏加载速度慢.加载时,将所有的css,js文件进行加载.
不支持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

回复：面试 获取面试资料