前端基础知识1

1、CSS中选择器的优先级别

伪类选择器 < 后代选择器 < 子类选择器 < 标签选择器 < 类选择器 < id选择器 < ！important

2、 vue的生命周期

vue的生命周期有创建、挂载、更新、销毁。

创建阶段用到的两个钩子函数是beforeCreate、created

挂载阶段的两个钩子函数是beforeMount、mounted

更新阶段用到的两个钩子函数是beforeUpdate、updated

销毁阶段用到的两个钩子函数是beforeDestroy、destroyed

如果使用了keep-alive将会多两个生命周期钩子函数分别是activated 、deactivated

Vue 实例 — Vue.js 点击这里查看生命周期图示

  

3、v-if和v-show的区别

v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。

v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。

并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。

4、水平垂直居中的三种写法

1、

display:flex; justify-content:center; align-items:center

2、

父元素设置弹性盒display:flex; 子元素可以设置margin: auto; 实现垂直水平居中

3、

定位属性（position）配合位移属性（transform）
  - 父元素设置：position:relative，
  - 子元素设置：position:absolute; top:50%; left:50%; transform:translate(-50%，-50%)

 5、span和div的区别

div和span的区别是:div标签是块级元素,每个div标签都会从新行开始显示,占据一行;div标签内可以添加其他的标签元素(行内元素、块级元素都行)。而,span标签是行内元素,会在一行显示;span标签内只能添加行内元素的标签或文本。

行内元素：1.无法设置宽高；
        2. 对margin仅设置左右有效，上下无效；
        3. padding上下左右有效；不会自动换行
块级元素：1.可以设置宽高
        2. margin和padding的上下左右均对其有效
        3. 超出当前行会自动换行
        4. 多个块状元素标签写在一起，默认排列方式为从上至下

6、var、let、const的区别

 7、为什么vue中Data必须是函数？

vue框架中把data定义成函数，函数里返回真正的数据（引用类型）。每次复用组件时，vue框架都 会调用该函数。当调用该函数时，函数返回新的对象（申请新的空间）。那么不同的组件的内存空间就 是独立的，不会互相影响。

8、常见的HTTP状态码 

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头
字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

9、cookie、sessionStorage、localStorage是什么有什么区别

cookie
存储方式
存储用户信息，获取数据需要与服务器建立连接。
以路径存储，上层路径不能访问下层的路径cookie，下层的路径cookie可以访问上层的路径cookie
作用与特性
可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie 中，以免影响页面性能。
可设置过期时间。
存储数量及大小 将cookie控制在4095B以内，超出的数据会被忽略。
IE6或更低版本 最多存20个cookie；
IE7及以上
版本 多可以有50个；
Firefox多 50个；
chrome和Safari没有做硬性限制。
cookie最大特征就是可以在页面与服务器间互相传递，当发送或者接受数据时自动传递
localStorage
存储客户端信息，无需请求服务器。
数据永久保存，除非用户手动清理客户端缓存。
开发者可自行封装一个方法，设置失效时间。 5M左右，各浏览器的存储空间有差异。
任何地方都可以存都可以取
操作简单
sessionStorage
存储客户端信息，无需请求服务器。
数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。
5M左右，各浏览器的存储空间有差异。
同页面不同窗口中数据不会共享

 10、!DOCTYPE有什么作用

 声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。