前端实习面试题（自己当笔记用）

一、CSS

01.Flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩

容器属性：

1.flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

2.flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4.justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。space-around为项目之间间距为左右两侧项目到容器间距的2倍；space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

5.align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：center使用最多，自然不会陌生，在纵轴中心位置排列：baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

6.align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似

项目属性：

1.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

3.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

4.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

5.flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

6.align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

02.CSS3新特性

transition：过渡

animation：动画

transform：形状转换

选择器

box-shadow：阴影

border-radius：边框圆形化处理

rgba：颜色

弹性布局Flex

audio 音频

video 视频

text-shadow

03.img中alt和title的区别

alt属性是在图片不能正常显示时出现的文本提示。

title属性是在鼠标在移动到元素上的文本提示。

04.用纯CSS创建一个三角形

<style>div {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;}</style>
</head>
<body><div></div>
</body>

05.CSS的盒子模型

box-sizing:conten-box（标准模型）| border-box（IE模型）

标准盒子模型：宽度=内容的宽度（content）+ border + padding

IE盒子模型：宽度=内容宽度（content+border+padding)

06.div水平居中

a. 已知宽度，block元素，添加添加margin:0 auto属性。

b.已知宽度，绝对定位的居中，上下左右都为0，margin:auto

07.div水平垂直居中

div {

position: relative / fixed; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-top:-150px;

margin-left:-250px;

}

div {

position: relative / fixed; /* 相对定位或绝对定位均可 */

top: 50%;

left: 50%;

transform：translate（-50%，-50%）

}

div {

display:flex;

justify-content:center;

align-content:center;

}

08.清除浮动

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动（需要给父级同级元素添加浮动）

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类清浮动（现在主流方法，推荐使用）

float_div:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .float_div{ zoom:1 }

09.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

10.CSS中 link 和@import 的区别

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载（并行），而@import引用的CSS会等到页面被加载完再加载（串行）

import只在IE5以上才能识别，而link是HTML标签，无兼容问题

link方式的样式的权重高于@import的权重.

11.position的absolute与fixed共同点与不同点

共同点：改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间默认会覆盖到非定位元素上

不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

12.transition和animation的区别

主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始 animation 指定要绑定到选择器的关键帧的名称

13. CSS优先级

!important（优先级最高）

id 选择器

class选择器、属性选择器、伪类选择器

标签选择器、伪元素选择器

通配符选择器、关系选择器（优先级最低）

14.title与h3的区别、b与strong的区别、i与em的区别？

与 用在网页上都能使字体加粗，二者的不同是：是物理元素 ;是逻辑元素。

物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而可以从字面理解知道它是强调的意思，是逻辑标签，强调文档逻辑。

对于搜索引擎（SEO）来说，比重视的多。

和都是斜体，但是是逻辑元素，是物理元素。

15.BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与,

哪些情况会产生BFC:

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

二、JS

0.基本数据类型

null

undefind

Boolean

String

Number

symbol

1.typeof和instance of 检测数据类型有什么区别？

相同点：都常用来判断一个变量是否为空，或者是什么类型的。

不同点：

typeof 返回值是一个字符串，用来说明变量的数据类型

instanceof 用于判断一个变量是否属于某个对象的实例

2.元素消失的方法

opacity:0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发。

visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。

display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。

z-index:-1

3.浅拷贝和深拷贝

浅拷贝只是对指针的拷贝，拷贝后两个指针指向同一个内存空间

深拷贝不但对指针进行拷贝，而且对指针指向的内容进行拷贝，经深拷贝后的指针是指向两个不同地址的指针。

4.es6的新特性

let定义块级作用域变量没有变量的提升，必须先声明后使用 let声明的变量，不能与前面的let，var，conset声明的变量重名

const 定义只读变量 const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改 const声明变量也是一个块级作用域变量 const声明的变量没有“变量的提升”，必须先声明后使用 const声明的变量不能与前面的let， var ， const声明的变量重 const定义的对象\数组中的属性值可以修改,基础数据类型不可以

ES6可以给形参函数设置默认值

数组之前加上三个点（...）展开运算符

数组的解构赋值、对象的解构赋值

箭头函数的特点箭头函数相当于匿名函数，是不能作为构造函数的，不能被new 箭头函数没有arguments实参集合,取而代之用...剩余运算符解决箭头函数没有自己的this。他的this是继承当前上下文中的this 箭头函数没有函数原型箭头函数不能当做Generator函数，不能使用yield关键字不能使用call、apply、bind改变箭头函数中this指向 Set数据结构，数组去重

5.==和===区别是什么？

==返回一个布尔值；相等返回true，不相等返回false；允许不同数据类型之间的比较；如果是不同类型的数据进行，会默认进行数据类型之间的转换；如果是对象数据类型的比较，比较的是空间地址

=== 只要数据类型不一样，就返回false；

6.call bind apply 的区别？

都是用于改变this指向

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。

通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

7.js继承方式

原型链继承核心：将父类的实例作为子类的原型

构造继承核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类

实例继承核心：为父类实例添加新特性，作为子类实例返回

拷贝继承

组合继承核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

寄生组合继承核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

8.闭包的理解

在函数的内部可以访问全局变量，但是在函数的外部无法访问函数内部的局部变量。有时候我们需要获取函数内部的局部变量，此时就要使用到闭包。做法就是在函数内部再定义一个函数，这个函数就可以访问外部的变量，之后我们再把内部函数作为外部函数的返回值，这样就可以在外部函数中读取到局部变量了。闭包就是定义在一个函数内部的函数，是连接内外函数的桥梁。

9.原型和原型链

把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回null

10.浏览器输入网址到页面渲染全过程

DNS解析

TCP连接（三次握手）

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

关闭TCP连接（四次挥手）

11. cookies，sessionStorage 和 localStorage 的区别

相同点：都是保存在浏览器端，且同源的。

不同点：

cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

12.js中跨域方法

jsonp跨域(只能解决get）

document.domain 基础域名相同子域名不同

window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name

服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求

利用h5新特性window.postMessage()

Web Sockets

13. 页面优化方法

减少 HTTP请求数

从设计实现层面简化页面

合理设置 HTTP缓存

资源合并与压缩

合并 CSS图片，减少请求数的又一个好办法。

将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

多图片网页使用图片懒加载。

在js中尽量减少闭包的使用

尽量合并css和js文件

尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片

减少对DOM的操作

在JS中避免“嵌套循环”和 “死循环”

尽可能使用事件委托（事件代理）来处理事件绑定的操作

14.Ajax步骤

创建ajax实例

执行open 确定要访问的链接以及同步异步

监听请求状态

发送请求

15. 数组去重的方法

function unique(arr){

var arr2 = arr.sort();

var res = [arr2[0]];

for(var i=1;i<arr2.length;i++)

{ if(arr2[i] !== res[res.length-1]){ res.push(arr2[i]); } }

return res; }

利用下标查询

function unique(arr){

var newArr = [arr[0]];

for(var i=1;i<arr.length;i++){ if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } }

return newArr; }

16. ajax中get和post请求的区别

get 一般用于获取数据

get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；

get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；

get安全性较低

get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳

post 一般用于发送数据

post传递参数，需要把参数放进请求体中，发送给服务器；

post请求参数放进了请求体中，对大小没有要求；

post安全性比较高；

post请求不会走缓存；

17.ajax的状态码

2开头（成功）

200 : 代表请求成功;

3开头（重定向）

301 : 永久重定向；

302: 临时转移

304 : 读取缓存 [表示浏览器端有缓存，并且服务端未更新，不再向服务端请求资源]

307:临时重定向

4开头（客户端）

400 :数据/格式错误

401: 权限不够；（身份不合格，访问网站的时候，登录和不登录是不一样的）

404 : 路径错误，找不到文件

5开头（服务器）

500 : 服务器的问题

503: 超负荷

18. 常见的异步任务

定时器

ajax

事件绑定

回调函数

async await

promise

19. 作用域

全局作用域

私有作用域

块级作用域

上级作用域

20. Promise处理异步

他是ES6中新增加的一个类（new Promise）,目的是为了管理JS中的异步编程的，所以把他称为“Promise设计模式” new Promise 经历三个状态：padding(准备状态：初始化成功、开始执行异步的任务)、fullfilled(成功状态)、rejected(失败状态)== Promise本身是同步编程的，他可以管理异步操作的（重点），new Promise的时候，会把传递的函数立即执行 Promise函数天生有两个参数，resolve(当异步操作执行成功，执行resolve方法),rejected(当异步操作失败，执行reject方法) then()方法中有两个函数，第一个传递的函数是resolve,第二个传递的函数是reject ajax中false代表同步，true代表异步，如果使用异步，不等ajax彻底完成

21. map和forEach的区别

相同点

都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组），需要用哪个的时候就写哪个匿名函数中的this都是指向window 只能遍历数组

不同点

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后对应的一个新的数组。)

map()方法不会改变原始数组 map()方法不会对空数组进行检测

forEach()方法用于调用数组的每个元素，将元素传给回调函数.(没有return，返回值是undefined）

22.async await函数

异步代码的新方式

基于promise实现的

异步代码更像同步代码

await 只能在async函数中使用，不能再普通函数中使用，要成对出现

默认返回一个promise实例

await下面的代码是异步，后面的代码是同步的

23.this指向

普通函数非严格模式下调用的时候指向于Window,严格模式指向为undefind

构造函数调用this指向于实例对象

对象方法调用this指向与该方法所属的对象

事件绑定方法this指向于绑定事件对象

定时器函数this指向于Window

自执行函数中的this永远指向window

箭头函数没有this，this是指向于外面的一层，如果没有则指向Window

24. 异步回调（如何解决回调地狱）

promise、generator、async/await

promise： 1.是一个对象，用来传递异步操作的信息。代表着某个未来才会知道结果的时间，并未这个事件提供统一的api，供进异步处理 2.有了这个对象，就可以让异步操作以同步的操作的流程来表达出来，避免层层嵌套的回调地狱 3.promise代表一个异步状态，有三个状态pending（进行中），Resolve(以完成），Reject（失败） 4.一旦状态改变，就不会在变。任何时候都可以得到结果。从进行中变为以完成或者失败 promise.all() 里面状态都改变，那就会输出，得到一个数组 promise.race() 里面只有一个状态变为rejected或者fulfilled即输出 promis.finally()不管指定不管Promise对象最后状态如何，都会执行的操作（本质上还是then方法的特例）

25.前端事件流

事件捕获

事件目标

事件冒泡

26.事件如何先冒泡后捕获

在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

27. 如何判断一个变量是对象还是数组（prototype.toString.call()）

千万不要使用typeof来判断对象和数组，因为这种类型都会返回object。

28.cookie、Session和token的区别

Token就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件，Token的状态是存储在客户端。

cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名；

session和cookie差不多，只是Session是写在服务器端的文件，也需要在客户端写入cookie文件，但是文件里是你的浏览器编号。Session的状态是存储在服务器端，客户端只有Session id；

29.JS全局函数

escape( )

eval_r( )

isFinite( )

isNaN( )

parseFloat( )

parseInt( )

unescape( )

30.JS内置可迭代对象

Array

Map

Set

String

TypedArray

函数的 arguments 对象

NodeList 对象

31.数组常用的方法

常用的方法有14个，6个会改变原数组的方法，8个不会改变原数组的方法

改变原数组的方法：

push() ：尾增返回新增元素后数组的长度

pop() ：尾删被删除的项

shift() ：头删被删除的项

unshift() ：头增删除元素后数组的长度

reverse()：反转反转后的新数组

sort(fun(){}) ：排序排序后的新数组

参数为一个函数，该函数有两个形参，对应为before和after，可以这个函数中书写排序的方法，返回值为负值时，升序，正值降序，也可以直接写return a＞b 或者return a＜b前者对应降序，后者对应升序

不改变原数组的方法：

slice(a,b) ：查找查找出的值组成的数组

（n,m）查找下标：[n,m)

（n）查找下标：n到最后一个元素

（0）复制一遍原数组，可用于克隆

（-m,-n）从后往前查，-1表示最后一项，-2表示表示倒数第二项

splice(n,x,m) ：增、删、改对应操作后得到的新数组

（n,x,m）从下标为n的元素开始，删除x个元素，在此位置将m插入

（n,0,m）从下标为n开始，不删除元素，直接插入m

（n,x）从下标为n开始，删除x个元素

join('-')：返回用指定分隔符拼接成的字符串

concat(arr1, arr2, str3...) ：拼接拼接后的新数组

indexOf(item, star) ：从star下标开始查找，第一次出现item元素的索引，未找到返回-1

lastIndexOf(item, star) ：最后一次出现的索引

includes(item) ：是否包含指定元素

forEach(function(item, index, arr){}) ：遍历

item：遍历的每一项

index：索引

arr：当前数组

三、Vue

1.V-model的原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

2.谈谈对生命周期的理解

beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。

created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有

beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点

mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点

beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环

beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件

destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

3. vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。 mutation会修改state中对于的值。最后通过getter把对应值跑出去，在页面的计算属性中通过mapGetter来动态获取state中的值

4.vuex有哪几种状态和属性

state中保存着共有数据，数据是响应式的

getter可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用

mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的

actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。

modules：模块化vuex

5.vue路由的两种模式

hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算） hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法

这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

6.vue中 key 值的作用

key是vue中的 vnode标记的唯一id,通过这个key,我们的df算法操作可以更准确,更快速的算出那个dome元素需要修改。如果不加key,那么vue会选择复用节点vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug

key的作用主要是为了高效的更新虚拟DOM。

7. `$route`和`$router`的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

8.vue-router守卫

全局守卫

router.beforeEach 全局前置守卫

router.afterEach 全局后置守卫

组件守卫

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

9. vue修饰符

stop：阻止事件的冒泡

prevent：阻止事件的默认行为

once：只触发一次

self：只触发自己的事件行为时，才会执行

10.vue项目中的性能优化

不要在模板里面写过多表达式

循环调用子组件时添加key

频繁切换的使用v-show，不频繁切换的使用v-if

尽量少用float，可以用flex

按需加载，可以用require或者import()按需加载需要的组件

路由懒加载

11.V-if和V-show区别

v-if是”真正”的渲染,每次为ture的时候会渲染dome元素出来, v-show页面一初始化的时候就渲染出来,只是根据条件去改变 display的属性,实现显示和隐藏,如果是经常切换的条件不建议使用vⅱ进行条件判断,非常频繁的切换建议,使用 v-show进行判断比较好。

秋招参考

转载：

最新的前端大厂面经（详解答案） - 掘金 (juejin.cn)

转载：

2021年我的前端面试准备 (juejin.cn)

转载：

听说前端面试手写”节流防抖“你不会？用动画带你秒懂！ (juejin.cn)

转载：

前端常考的算法题 (juejin.cn)

[译] 送你 43 道 JavaScript 面试题 - 掘金 (juejin.cn)

前端实习面试题（自己当笔记用）相关推荐

小米前端实习面试题和一些经验
前两天接到了小米的面试邀请,在此之前有个电面,自认为已经初步对小米对前端实习生的要求了解了大概,然后没做过多心里建设准备就去了.(画外音:到了小米,正好赶上当天有许多新员工入职,大厅看起来比较忙碌,拿 ...
亚信科技前端实习面试题
一.Vue的生命周期分为四个阶段: 1. 实例创建 2. DOM渲染 3. 数据更新 4. 销毁实例共有八个生命周期函数: 1.beforeCreate -创建前触发行为:vue挂载的$el和d ...
记一次网易前端实习面试
记一次网易前端实习面试很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在 ...
小米2022校招前端实习一面总结
小米2022校招10月前端实习一面总结 1.盒模型 2.手写样式题,实现三列布局(圣杯布局) 3.宏任务.微任务题 4.原型链题总结牛客网视频面牛客网没有代码提示很不友好,不过面试官人很好会给提 ...
【已收到Offer】小米前端实习面经（一、二面）
面试无非就是考察计算机基础 + 算法 + 语言特性 + 项目.不过呢,根据我的面试题经历,其实每个公司在面试候选人时,侧重点是不同的. 例如你面试腾讯的话,可能网络这块会问的多一些:面阿里时,可能 J ...
66 道前端算法面试题附思路分析助你查漏补缺
大家好,我是漫步. 今天来分享一篇干货,前端关于算法的分析不多,下文列举了66道前端算法面试题,希望对你有所帮助. 作者:Eno_Yao https://segmentfault.com/a/1190 ...
2021年前端校招面试题整理
前言前端校招面试题主要内容包括html,css,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,设计模式,项目等等. 包含了腾讯.字节跳动.小米.阿里.滴滴.美团.58.拼多多 ...
2014年最新web前端开发面试题
2014年最新web前端开发面试题本文是一份非常不错的2014年web前端开发工程师的面试题集锦,并附有参考答案,推荐大家参考下. 试题目录: HTML 部分 CSS 部分 JavaScript 部 ...
2022-6月后两周前端实习面经base北京-已入职滴滴
文章目录 1 两周前端实习面经过程 2 面试内容 3 总结 1 两周前端实习面经过程 1.1 用了两天时间打磨前端实习简历建议简历尽量压缩至1-2页,突出技能,项目,实习工作经历,其他的什么个人总结 ...

前端实习面试题（自己当笔记用）

一、CSS

01.Flex布局

02.CSS3新特性

03.img中alt和title的区别

04.用纯CSS创建一个三角形

05.CSS的盒子模型

06.div水平居中

07.div水平垂直居中

08.清除浮动

09.display:none 和 visibility: hidden的区别

10.CSS中 link 和@import 的区别

11.position的absolute与fixed共同点与不同点

12.transition和animation的区别

13. CSS优先级

14.title与h3的区别、b与strong的区别、i与em的区别？

15.BFC

二、JS

0.基本数据类型

1.typeof和instance of 检测数据类型有什么区别？

2.元素消失的方法

3.浅拷贝和深拷贝

4.es6的新特性

5.==和===区别是什么？

6.call bind apply 的区别？

7.js继承方式

8.闭包的理解

9.原型和原型链

10.浏览器输入网址到页面渲染全过程

11. cookies，sessionStorage 和 localStorage 的区别

12.js中跨域方法

13. 页面优化方法

14.Ajax步骤

15. 数组去重的方法

16. ajax中get和post请求的区别

17.ajax的状态码

18. 常见的异步任务

19. 作用域

20. Promise处理异步

21. map和forEach的区别

22.async await函数

23.this指向

24. 异步回调（如何解决回调地狱）

25.前端事件流

26.事件如何先冒泡后捕获

27. 如何判断一个变量是对象还是数组（prototype.toString.call()）

28.cookie、Session和token的区别

29.JS全局函数

30.JS内置可迭代对象

31.数组常用的方法

三、Vue

1.V-model的原理

2.谈谈对生命周期的理解

3. vuex的流程

4.vuex有哪几种状态和属性

5.vue路由的两种模式

6.vue中 key 值的作用

7. $route和$router的区别

8.vue-router守卫

9. vue修饰符

10.vue项目中的性能优化

11.V-if和V-show区别

秋招参考

前端实习面试题（自己当笔记用）相关推荐

最新文章

热门文章

7. `$route`和`$router`的区别