本文详细解答了前端面试中常见的9道重点题目，包括token与jwt的区别、vue表单参数、移动端300ms延迟解决方案、web性能优化策略、DOM事件模型和事件流、v-model原理、created与mounted的不同、$nextTick的理解以及callback、Promise、async&await的对比。
目录
2、vue 案例当中form 表单中，经常用到的参数有哪些？
7、created和mounted的区别是什么？***重点
9.callback，Promise，async&await三者的区别? ***重点
1、token和jwt存在什么区别？
jwt最大的特点是密码的自我解译，自己分成三段，前后端使用通用的秘钥确认是否正确，按自己的理解jwt是token的一种，现在网上很多人认为token和jwt是不同的，最大的区别点是token可以存在后台的redis中，设置过期时间，作为中心化控制的工具，而jwt由于自身的特点，更灵活。
2、vue 案例当中form 表单中，经常用到的参数有哪些？
| model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | — | — |
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
| inline | 行内表单模式 | boolean | — | false |
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width | string | right/left/top | right |
| hide-required-asterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | — | false |
| show-message | 是否显示校验错误信息 | boolean | — | true |
| inline-message | 是否以行内形式展示校验信息 | boolean | — | false |
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
| validate-on-rule-change | 是否在 rules 属性改变后立即触发一次验证 | boolean | — | true |
| size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
重点：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 model 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px'。支持 auto。 | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
| rules | 表单验证规则 | object | — | — |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息 | string | — | — |
| show-message | 是否显示校验错误信息 | boolean | — | true |
| inline-message | 以行内形式展示校验信息 | boolean | — |
| size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini |
3.移动端300ms延迟问题怎么解决？
方法一、禁用缩放
既然大家都觉得缩放没有意义，那就提供一个属性去控制它。在HTML文档头部添加如下meta标签
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">有一个小小的缺点需要说一下，由于图片和文字都是一比一的比例显示的，而且禁用了缩放功能。在某些情况下，需要放大某张图片或者某段文字，就是无法实现图片的双击放大了。（除非js脚本）
方法二、更改默认的视口宽度
还是在HTML文档头部添加如下meta标签
<meta name="viewport" content="width=device-width">这个方法跟方法一有些许不一样，他将页面的宽度设置成了，与显示屏同宽。需要网站做响应式布局。否则显示效果极易受到影响。还有他没有禁止缩放功能，所以，你可以用双指操作来放大页面。
4.web 页面如何进行性能优化？
HTML优化
CSS优化
JavaScript优化
图片优化
其他优化方法
- 避免目标网页重定向
- 改善服务器响应时间
- 使用浏览器缓存
- 使用异步脚本
- 合并Heads
- 转换Meta标签
- 指定"Vary: Accept-Encoding"标头
- 在服务器端指定字符集
- 去除错误的请求
- 启用Keep-Alive
- 删除静态资源查询字符串
- 最小化请求体积
5 .请你说一下DOM事件模型和事件流 ？***重点
DOM事件模型：分为捕获和冒泡。
事件流：一个事件发生之后，会在子元素和父元素之间传播。这种传播分为3个阶段。
（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段
（2）目标阶段：真正的目标节点正在处理事件的阶段。
（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段
6、 v-model是什么？它的作用及原理是什么？
7、created和mounted的区别是什么？***重点
8、请你描述一下你对$nextTick的理解？
9.callback，Promise，async&await三者的区别? ***重点
1.callback 经过深层次的嵌套，会产生回调地狱，需手动检查err参数。
2.promise 通过链式调用，直接在 then 中返回一个 promise 来进行成功之后的回调函数，用 catch 来做错误处理。
3.async/await 则直接将其变成了同步的写法，既可以用.catch又可以用try-catch捕捉，简洁，可读性强，写法更加优雅 。
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
