2021年前端岗位面试题 “一”（本人亲测）
今年5月份在南京面试 大概三周的时间 面试了二十几家大 中 小型企业
收集了各种面试题 整理了一下 希望给还在面试的兄弟们一点帮助 共三套
null和undefined的区别
null :表示无值;
undefined : 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。
null表示"没有对象"，即该处不应该有值。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
http协议
http是一个基于请求响应模式的无状态的应用层的协议。
http协议特点
支持客户服务器模式
简单快速灵活无连接无状态。
VUE组件怎么封装
vue.extend（）方法创建组件
vue.component（）注册组件
若子组件需要数据，可以在props中接受定义
子传父，用$emit（）方法
调用组件
只需要在调用组件的地方写上组件名字的标签即可
v-for和v-if优先级
v-for优于v-if
路由传参的两种方式
params
query
key的作用
更高效的更新虚拟Dom
另外在vue中相同的标签元素的过渡切换时使用 可以让vue区分它们
还可以管理可复用的元素 减少不必要的渲染
js本身是弱类型语言
按照类型分是没有分类的
但是数据本身是有的
string字符串
number数值
boolean布尔
undefined
null（只有给对象赋值为null时对象才会为null）
function
HTML的标准模式与怪异模式
怪异模式
就是 box-sizing width= padding+border+content 这首先是ie搞的 叫怪异盒模型...
存储方式
1.localstorage本地存储
2.sessionstorage本地存储
3.application cache 离线缓存
4.web sql 关系数据库，通过sql语句访问
5.indexedDB 索引数据库
本地存储
cookie
localStorage
sessionStorage
路由守卫
全局守卫
组件内守卫
路由独享守卫
v-show和v-if的区别
共同点：都能控制元素的显示和隐藏
不同点：v-show:严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那
v-if是真正意义上的“条件渲染”
浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM。
v-show先渲染再判断
v-if先判断再渲染
组件通讯
父子同步：.sync
父传子：props
子传父：$emit
兄弟组件传值：
1.第一种属于比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件的传值方式传递给另一个组件
2.可以使用$bus方法 创建一个bus文件夹，在文件夹中新建。 index.js文件 在main.js中引用 在方法中通过
this.$bus.$emit将值放入setDataToBrather中
通过$on将值取出
vue有哪些组件
router-link
router-view
component
transition
transition-group
keep-alive
slot
vue的两大特点
响应式编程、组件化
vue是什么
是一个js库
为什么用vue
轻量级框架 简单易学 运行速度快
是单页面应用 使得页面局部刷新 不用每次跳转页面都要求所有的数据和dom
这样大大加快了访问速度和提升用户体验
而且他的第三方ui库很多 节省开发时间
vue优点
能够把页面抽象成多个相对独立的模块
实现代码重用，提高开发效率和代码质量
使得代码容易维护
css怎么让div居中
定位（父子容器）
在css中设置宽高，将margin属性设置为
0 auto。可实现居中效果
双向绑定
v-model
什么是双向绑定
首先我们先从单项绑定切入
就是把model绑定到view
当我们用JavaScript代码更新model时
view就会自动更新
而双向绑定就是在此基础上
用户更新了view，model的数据也会自动更新
这种情况就是双向绑定
什么是html
一种超文本标记语言
什么是css
css是指层叠样式表
$nextTick是什么
是用来知道什么时候Dom更新完成的
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
axios交互 调用API
先安装axios插件
然后对插件进行简单的封装
然后使用axios中的get post等方法进行接口访问
然后把axios对象写入到vue中的prototype中
方便以后使用
ajax优缺点
优：页面无刷新，用户体验好
使用异步方式与服务器通信，具有更加迅速的响应能力
缺：不支持浏览器back按钮
不容易调试
对搜索引擎的支持较弱
破坏了程序的异常机制
html的渲染规则
解析html
构建dom
dom与css样式进行附着构造
还有布局和绘制
css的隐藏方式有哪几种
visibility：hidden
opacity：0
display：none
display属性
block
inline
inline-block
none
闭包
在JavaScript语言中 只有函数中的子函数才能引用函数中的变量 简单来说 闭包就是函数中的函数 是函数内外部链接的桥梁
可以读取函数中的变量 另一个是将函数中的变量值存储于内存中
虚拟 DOM 到底是什么
说简单点，就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。
在Vue中computed和watch有什么区别
从属性名上，computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数。
同步和异步区别
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好
get和post区别
1、url可见性：
get，参数url可见；
post，url参数不可见
2、数据传输上：
get，通过拼接url进行传递参数；
post，通过body体传输参数
3、缓存性：
get请求是可以缓存的
post请求不可以缓存
4、后退页面的反应
get请求页面后退时，不产生影响
post请求页面后退时，会重新提交请求
5、传输数据的大小
get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）
post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。
6、安全性
这个也是最不好分析的，原则上post肯定要比get安全，
箭头nim函数
箭头函数this是静态的
箭头函数内的this指向上层对象；始终指向函数声明时所在作用域下的this的值
普通函数内的this指向调用其函数的对象
路由传参（重点了解一下）
params
query
路由模式
同步异步
圆形
border-radius属性可以向div元素添加圆角边框
javascript
==表示相等（值相等）
===表示恒等（类型和值都相等）
JavaScript区分大小写
第一个字符必须是字母、下划线、$
typeof可以上用户知道变量是什么类型
声明函数用function
需要返回 用return
声明数组
var arr = new Array( );
或者用 [ 1,2,3,4,5,6 ]
水平居中
inline、inline-block元素水平居中
在父级元素上设置taxt-aling：center
还可以用margin：0 auto
还可以用flex布局 justify-content：center
html标准模式（又称严禁模式）
浏览器按照最新标准进行解析
html兼容模式
会以向后兼容的方式来模拟老实浏览器的行为
图片格式：gif、png
CSS3新增属性
边框属性
border-color（边框颜色）
border-image（图片边框）
border-radius（边框圆角）
border-shadow（边框阴影）
动画效果 transform
过渡效果 transition
自动换行word-wrap
选择器
基本选择器
属性选择器 element[......]
伪类选择器(:hover :active)
nth选择器(nth-child(n), nth-last-child(n)...)
html5新增特性
语义化标签（<header> <nav>...）
SVG绘图
绘图canvas
音频、视频
本地存储：
local Storage 长期存储 浏览器关闭数据不丢失
sessionStorage 浏览器关闭数据自动删除
ES6新特性
let & const 用于生命变量
模板字符串 ``反引号 可以直接进行变量拼接
箭头函数
Map集合
promis构造函数用于封装异步操作
并且可以回去其结果
ES6允许给函数参数赋初始值
//禁止转载 转载给我说一声 俺是有脾气的
