VUE常见面试题

总结了一下经常被问到的css、js、vue面试题

HTML标签

1、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：span input img...
块级元素：div h1 p..
空元素：br hr meta head..

如果要设计到元素之间的转换

display:block 块
display:inline-block 行内块
display:inline 行内

2、页面导入样式时，使用link和@import有什么区别？1

1、link是一个标签，@import是css的内容
【重要】2、link先加载，@import后加载
 因为link是标签
3、兼容问题
 ie6以下@import不可用

3、title和h1的区别  b和string的区别  i和em的区别

1、title是网页标题 h1是内容
【重要】2、在网站seo的层面  title > h1

2、b和string区别
(1)语义化
(2)b只是一个加粗的标签，没什么特殊含义
   strong也是一个加粗标签，但是有特殊含义（强调：阅读器,seo）

3、i和em的区别
(1)语义化
(2)都是倾斜，i没有特殊含义，em有特殊含义。 i一般都做图标了

4、img标签中title 和 alt的区别 1

title：鼠标移入显示的文字
alt:图片未显示的文字

在做seo，alt属性可以解决蜘蛛抓取不到图片的问题。

5、png、jpg、gif 这个格式图片解释一下，分别什么时候用？

jpg: 适合大图片  相同图片会比png小一点 压缩会失帧
png：适合小图片   相同图片体积大   不怎么失帧
gif：动图

CSS

6、display:none 和 visibility:hidden的区别

相同点： 都是隐藏元素
display：none  不占位置
visibility:none 占位置

display:none 会造成重绘和回流
visibility:none 会造成重绘

触发回流必定会造成重绘
触发重绘不一定会造成回流

Javascript

7、js中数据类型有哪些

String Number Boolean undefined null

8、null和undefined去区别

作者先设计出来的null  后设计出来的undefined
(1)表格无的值最好别是对象，  typeof null为object
(2)null可以被自动转换为0

作者又设计了undefined，来垫补自己之前设置null的坑。

9、js 作用域

1、作用域链
先去内部找，内部找不到去外部找
不能外部向内部查找。
2、变量提升
3、优先级
   变量 > 声明函数【不看书写顺序】> 参数 > 提升
   
----注意：
1、window.xxx 或者 xxx（前面没有var、let、const）
2、除了函数外，其他的没有作用域（if、for、switch）

10、js对象

1、对象的[key]都是字符串类型。

11、原型  原型链

原型：
 作者设计原型是用来共享属性和共享方法的。
 函数的原型是prototype
 对象的原型是__proto__
 new构造函数的时候，函数.prototype和对象.__proto__是全等的

原型链：
 当我去查找对象的某一个属性
 1、对象本身找
 2、构造函数找
 3、对象原型找
 4、构造函数原型找
 5、向上原型中查找 一直向上找
 原型链顶端是null 对象找不到属性是undefined

12、js微任务和宏任务

微任务：Promise.then()

宏任务：定时器，事件

执行流程：
执行宏任务之前，要保证所有的微任务是清空的。
（1）先执行微任务，等所有的微任务都清空了。
（2）再去执行宏任务。
宏任务里面可能有微任务，就先执行完所有微任务在执行宏任务。

13、new操作符都干了什么

1、创建一个新对象
2、构造函数的this指向新对象
3、执行构造函数中的所有代码
4、返回新对象

14、闭包

（1）闭包是什么？
有2个函数，他们的作用域是连接的。
根据作用域的规则，内部可以访问外部的变量，就证明外面的变量没有被垃圾回收。
（2）优点：
内部可以访问外部的变量。  延伸变量的作用范围，使变量可以常驻在内存中。
例如场景：for里面有事件，但是事件中的值，永远是for的结果。就可以通过闭包的方式去解决。
（3）缺点：
外部函数的变量驻留在内存中，导致性能会下降。内存泄露。
（4）解决
把驻留在内存中的变量，在不用的时候，设置为null
可以加入js严格模式，在一定层次上解决这个问题，但是不是100%可以解决。   use strict
（5）什么时候用到了闭包。【抽奖系统限制次数】
1、封装了一个函数
2、函数的功能是请求数据并且渲染。
3、请求成功后让函数的i+1

15、var let const 的区别

1、作用域
var声明的变量不自带作用域
let、const声明的都有自己的作用于
2、var和let都是变量，const是常量
3、let声明后才可以赋值，const不可以在赋值【引用类型可以修改，但是不能重新赋值】

16、箭头函数和普通函数有什么区别？

1、this指向问题
箭头函数的this，是在箭头函数被定义的时候决定的，不是调用的时候决定的。（在箭头函数定义时，所在的环境决定的）
2、箭头函数不能new
3、箭头函数没有arguments

什么情况下this指向window
1、普通函数
2、普通函数闭包的情况，内部函数this指向window

17、find和filter的区别

find 返回匹配后的第一个值
filter 返回匹配后的数组

18、some 和every的区别

some 检查数组中有没有符合条件的 有返回true 无返回false 【有一个就返回true】
every 检查数组中所有元素符合不符合条件  如果全部符合返回true 有一个不符合就返回false 【所有都符合才返回true】

19、call、apply、bind的区别

共同点：修改函数的this指向

call、apply 返回的是函数的调用
bind返回的是函数

call、apply传参方式不一样， call以逗号分割的字符串  apply传递的是一个数组[]
call(null,1,2,3)
apply(null,[1,2,3])

如果第一个参数是1，则指向1的引用类Number
如果第一个参数是undefined和null，则指向window

20、vue2.X中生命周期有哪些？

系统自带的8个 分为4个阶段，分别有：
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

***如果使用了keep-alive会在多两个：activated、deactivated

当组件初次加载会执行前4个生命周期，分别为：
beforeCreate、created、beforeMount、mounted

**如果使用keep-alive当组件初次加载会执行前5个生命周期，分别为：beforeCreate、created、beforeMount、mounted、activated
**如果使用keep-alive第二次或者第N次进入会执行哪些生命周期：activated

this.$el 和 this.$data分别在哪些生命周期中存在
beforeCreate 啥也没有
created     有$data 没有$el
beforeMount 有$data 没有$el
mounted     有$data 有$el

21、Promise

Promise是异步编程的一种解决方案，比传统的回调函数和事件函数处理更加合理。
为了解决函数嵌套函数导致的回调地狱。

一共有三种状态：pending （等待）
    resolved （成功）
    rejected （失败）
   
状态变化（2种）：
等待 pending => 已完成 resolved   执行primise.then（）
等待 pending => 失败 rejected    执行promise.catch（）
状态一旦改变，就无法再次改变状态

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

22、v-for和v-if

v-for优先级更高

如果v-for和v-if同时出现时，每次渲染都会先去循环再去判断，浪费了性能

如何规避，在外层套个template,在template这层做v-if判断，
如果是根据数据中的字段去判断是否显示，可以用计算属性先过滤掉影藏的数据再去v-for循环数据

23、watch、methods、computed区别

computed是DOM加载完成后马上执行的。
methods则必须要有一定的触发条件才能执行。
watch是监听vue实例上的数据变动。

先computed后watch，不执行methods

如果触发了methods事件 | computed - methods - watch

watch监听器

1、watch监听开始之后立即调用
 immediate:true
2、watch深度监听
 handler函数 + deep:true

computed

1、computed中是属性名不可和data中的属性名同名
因为computed属性名、data属性名、props属性名 都会被挂载到vm实例上，所以这三个都不能同名。

24、Vuex五个核心属性

state、mutation、action、getter、module

25、跨域

jsonp (只能处理get请求，不能处理post请求)
后端cors
反代 （反向代理，在vue.config.js里面 devserver里面配置）

26、hash 和 history 两种模式的区别                                        

27、MVVM原理

Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

28、常见状态码

200 ok
400 请求格式错误
401 请求过期
404 请求失败，没有资源
500 服务器错误
503 服务器超载