阅读 1082
2021带答案的最全de面试题

2021带答案的最全de面试题

这篇文章花了一周,天天凌晨睡,感觉身体被掏空。不过总算写完了vue,其中,我觉得自己的理解比较好的,直接写了。但有些东西,大牛们写的十分透彻,,而且我理解的没有大牛透彻。所以我在下面给了链接。等过段时间会把剩下的补齐。

**开始的开始。请给一个赞,鼓励一下累死在键盘上的我。这很重要**

最全前端面试真题汇总

一:CSS面试题

1.盒模型

标准模型的宽度就是content image.png IE模型的宽度是content+padding+border image.png

2.如何让一个盒子水平垂直居中?

浮动

绝对定位

flex布局

表格布局

网格布局

详见页面布局

3.css 优先级确定

权重大,则优先级高

!important>行内样式>id选择器>class选择器/属性选择器>标签选择器>通配符(*)

详见菜鸟,这是基础

4.解释下浮动和它的工作原理,清除浮动的方法?

1.浮动的基本原理

浮动-----主要是为了让一些标签并排显示

浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流(文档流),即脱离了文档流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素。

2.如何清除浮动

  • 结尾空元素或者after等伪元素或者 来clear
  • 父元素同样设置浮动
  • 父元素设置overflow为hidden或者auto
  • 父元素display:table

5.CSS隐藏元素的几种方法

  • display: none

这个是用的比较多,直接把元素隐藏了,不占据任何空间,也不响应任何事件。

  • visibility:hidden

visibility属性规定元素是否可见,会触发页面的重绘,不会触发重排

  • opacity: 0

设置元素的不透明度。 默认值是1(不透明),最小值是0(全透明)。

给元素设置0,元素不可见,但是还会占据空间,而且,需要注意,此时给它绑定事件,它会触发

会触发页面的重绘,不会触发重排

  • transfrom: scale(0)

transfrom是css3新增的元素转换,scale代表缩放,1为不缩放,0为缩放最小。 会触发页面的重绘,不会触发重排。

  • width和height设置为0

对元素的宽度和高度都设置为0, 如果它有子元素,还得设置overflow设置为hidden 。

width和height设置为0会触发页面的重排和重绘

属性表现
display:none不占据空间,不会触发事件,触发重排和重绘
visibility:hidden占据空间,不会触发事件,只触发重绘
opacity: 0占据空间,会触发事件,只触发重绘
transfrom: scale(0)占据空间,不会触发事件,只触发重绘
width和height设置为0不占据空间,不会触发事件,触发重排和重绘

6.如何实现浏览器内多个标签页之间的通信?

方法一:使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

方法二:使用cookie+setInterval HTML

7.简要说一下CSS的元素分类

按照显示元素分类:

  • 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变;其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置。a,span,strong
  • 块级元素 (block-element):总是独占一行,元素占据的高度,顶底左右边距可以人为设置;其宽度缺省为所在容器的100%,可人为设置;div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form
  • 空元素(void-element):即没有内容的HTML元素,例如:br、meta、hr、link、input、img

按照元素是否可替换分类:

  • 替换元素:浏览器根据其标签的元素与属性来判断显示具体的内容。

    比如:<input   type="text" />,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

(X)HTML中的img、input、textarea、select、object都是替换元素,这些元素都没有实际的内容。

  • 非替换元素: (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。比如<p>wanmei.com</p>浏览器将把这段内容直接显示出来。

  • 备注:行内替换元素的属性和行内块元素一致,竖直方向也能产生效果,几乎所有的可替换元素都是行内元素,例如<img>、<input>等等

8.link @import 导入 css

link引入形式:

<link href="styles.css" type="text/css" />
1
复制代码

@import引用形式:

<style type="text/css">@import url("styles.css");</style>
复制代码

两者差别:

  • 适用范围不同

@import可以在网页页面中使用,也可以在css文件中使用,用来将多个css文件引入到一个css文件中;而link只能将css文件引入到网页页面中。

  • 功能范围不同

link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义rel连接属性,定义RSS等,@import就只能加载CSS。

  • 加载顺序不同

页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)。

  • 兼容性

由于@import是css2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

  • 控制样式时的差别

使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。

  • 使用DOM控制样式时的差别

当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的

9.画三角形

/* 等腰三角形(箭头朝上); */
    #div1{
        width: 0;
        height: 0;
        border-bottom: 100px solid cyan;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
复制代码

额这个东西怎么说呢?我都不知道怎么解释,,宽高为零,哎呀,说不好。不说了大家看代码吧,cyan,青绿色。transparent是透明。

10.BFC(Block Formatting Context) 是什么?应用?

块级格式化上下文。它是指一个独立的块级渲染区域,只有Block-level BOX(块级盒子参与)参与, 该区域拥有套渲染规则来约束块级盒子的布局,且与区域外部无关

从一个现象开始说起

一个盒子不设置height,当内容子元素都浮动时,无法撑起自身。 那么就可以说这个盒子没有形成BFC

详见 BFC的理解运用(CSS)

二:JavaScript基础面试题

1.栈和堆的区别?

堆(heap)和栈(stack)

栈(stack)会自动分配内存空间,会自动释放。堆(heap)动态分配的内存,大小不定也不会自动释放。

基本类型和引用类型

基本类型:简单的数据段,存放在栈内存中,占据固定大小的空间。

引用类型:指那些可能由多个值构成的对象,保存在堆内存中,包含引用类型的变量实际上保存的不是变量本身,二十指向该对象的指针。

基本数据类型包括Undefined,String,Boolean,Null,Number

传值和传址

从一个向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终指向同一个对象。即复制的是栈中的地址而不是堆中的对象。

从一个变量复向另一个变量复制基本类型的值,会创建这个值的副本。

2.Javascript实现继承的几种方式?

1.原型链继承

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

2.构造函数继承

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

4.原型式继承

基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

JavaScript是如何实现继承的六种方式

3.Javascript创建对象的几种方式?

1- new操作符 + Object创建对象

2- 字面式创建对象

以上两种方法在使用同一接口创建多个对象时,会产生大量重复代码,为了解决此问题,工厂模式被开发。

3- 工厂模式

工厂模式解决了重复实例化多个对象的问题,但没有解决对象识别的问题(但是工厂模式却无从识别对象的类型,因为全部都是Object,不像Date、Array等,工厂模式得到的都是o对象,对象的类型都是Object,因此出现了构造函数模式)。

4-构造函数模式

  • 对比工厂模式有以下不同之处:

    1、没有显式地创建对象

    2、直接将属性和方法赋给了 this 对象

    3、没有 return 语句

  • 以此方法调用构造函数步骤:

    1、创建一个新对象

    2、将构造函数的作用域赋给新对象(将this指向这个新对象)

    3、执行构造函数代码(为这个新对象添加属性)

    4、返回新对象 ( 指针赋给变量person ??? )

可以看出,构造函数知道自己从哪里来(通过 instanceof 可以看出其既是Object的实例,又是Person的实例)

构造函数也有其缺陷,每个实例都包含不同的Function实例( 构造函数内的方法在做同一件事,但是实例化后却产生了不同的对象,方法是函数 ,函数也是对象)

5-原型模式

原型模式的好处是所有对象实例共享它的属性和方法(即所谓的共有属性),此外还可以如代码第16,17行那样设置实例自己的属性(方法)(即所谓的私有属性),可以覆盖原型对象上的同名属性(方法)。

6-混合模式(构造函数模式+原型模式)

构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性

详见js创建对象的6种方式总结

4.Javascript作用链域

这个题不好弄,我查了资料,结合自己写的,尽力描述吧

作用域

作用域就是变量与函数的可访问范围。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说,下面情况的对象会在全局作用域中:

  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域

var a = 1  //最外层变量
function fn1(){  //最外层函数
  function fn3(){  //内层函数
    var a = 4  //内层变量
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn()

复制代码
  • 所有末定义直接赋值的变量自动声明为拥有全局作用域
function bar() {
   fn1 = "未定义直接赋值的变量";
   var fn2 ="内层变量";
}
bar();  //要执行这个函数
console.log(fn1); //未定义直接复制的变量
console.lof(fn2);  //fn2 is not defined
复制代码
  • 所有window对象的属性拥有全局作用域

window对象的内置属性都拥有全局作用域,例如 window.name、window.location、window.top 等。 局部作用域 又被称为函数作用域(Function scope),所有的变量和函数只能在作用域内部使用。 途中var a = 4和fn2 都只拥有局部作用域。

作用域链

作用域链的原理和原型链很类似,如果这个变量在自己的作用域中没有,那么它会寻找父级的,直到最顶层。执行过程如下:

  • 任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.

  • 在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.

  • 在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

看个例子吧

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少
复制代码

作用域如下:

image.png 根据作用域的叠加得输出的值为"2",

  1. 首先求fn的值,fn = fn1(),为fn1的值

  2. function fn1()下的function fn2()为console.log(a),

  3. 找到 function fn3()存在函数fn2(),再往上一级fn()下到声明a的值为2,输出2

5.什么是闭包(closure),为什么要用它?

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。

闭包的特性:

1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收 # 闭包的底层理解

6. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?

use strict是一种ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的条件下运行, 使JS编码更加规范化的模式。

  • 消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的 Javascript 做好铺垫。

区别:

1.禁止使用 with 语句。

2.禁止 this 关键字指向全局对象。

3.对象不能有重名的属性。

7.深拷贝和浅拷贝

浅拷贝:创建一个新对象,有着原始对象属性值的一份精确拷贝。 如果属性是基本类型,拷贝的是基本类型的值。 如果属性是引用类型,拷贝的就是内存地址,如果其中一个对象改变了这个地址,就会影响到另一个对象

深拷贝:将一个对象从内存中完整的拷贝一份出来,放到从内存中新开辟的区域,且修改新对象不影响原对象

详见深拷贝和浅拷贝

8.JS延迟加载的方式有哪些?

- 1.defer属性

- 2.async属性

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载。

缺点:不能控制加载的顺序

- 3.动态创建DOM方式

- 4.使用jQuery的getScript()方法

- 5.使用setTimeout延迟方法

- 6.让JS最后加载

把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

详参 JS延迟加载的方式?

9.什么是跨域问题 ,如何解决跨域问题?

1.跨域资源共享(CORS)

2.通过jsonp跨域

3.通过修改document.domain来跨子域

4.使用window.name来进行跨域

5.使用HTML5的window.postMessage方法跨域

6.通过WebSocket进行跨域

7.图像ping(单向)

8.使用片段识别符来进行跨域

详参JS中的跨域问题及解决办法汇总

10.模块化开发怎么做?

这个模块化,说实话我也没理解太深,所以找了几篇好评居多的文章供大家一起学习。

JAVAScript:前端模块化开发

JS前端模块化原理与实现方法详解

11.DOM操作

这个问题搞得我很懵,不知道它在问什么。查了很多文章,试着写了点。

我第一种猜测DOM事件

鼠标事件
  • onclick 事件——当用户点击时

  • onload 事件——用户进入

  • onunload 事件——用户离开

  • onmouseover事件——鼠标移入

  • onmouseout事件——鼠标移出

  • onmousedown事件——鼠标按下

  • onmouseup 事件——鼠标抬起

键盘事件

onkeyup,onkeydown,onkeypress...

表单事件

onsubmit,onblur,onfoucs,onchange..

页面事件

onload,onunload,onreload...

第二种猜测获取?

  • 通过ID获取(getElementById)
  • 通过name属性(getElementsByName)
  • 通过标签名(getElementsByTagName)
  • 通过类名(getElementsByClassName)
  • 通过选择器获取一个元素(querySelector)
  • 通过选择器获取一组元素(querySelectorAll)
  • 获取html的方法(document.documentElement)
  • document.documentElement是专门获取html这个标签的
  • 获取body的方法(document.body)
  • document.body是专门获取body这个标签的。
传统事件绑定方法
window.onload=function(){
    alert("页面加载完毕");
}
document.getElementById("btn").onclick=function(){
    alert("按钮被点击");
}
document.onmousemove=function(){
    console.log("鼠标在移动");
}
复制代码
事件监听
document.getElementById("myBtn").addEventListener("click", displayDate);
复制代码

DOM这个问题我实在不知道问的是啥,,所以就写了这么点。

12.什么是Cookie 隔离?

或者说:请求资源的时候不带cookie

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,
所以不如隔离开。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,
这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server,也减少了Web Server对cookie的处理分析环节,
提高了webserver的http请求的解析速度。

复制代码

详参 什么是 Cookie 隔离?

13.响应事件

1.按键触发

  这种事件响应很常见了,也是一开始就接触的。这一类方法的核心就是在button的标签内加入onclick+函数名去触发函数实现功能。

2.鼠标触发或enter触发。

 第一种方法的缺点其实是很明显的。比如我要对一批数据进行处理,有很多的输入框,难道我每个框后面都得加个确认键吗?这样对用户的输入时十分不合理的,所以在填写表单或者多输入框时用到鼠标或者enter键触发的效果会效率很多。

核心是:在输入框用onchange调用函数,填写完后鼠标点击任意地方或者按下enter函数就会调用,根据不同的处理出现不同的效果。

3.随时触发

这样的用法还是比较好的,生活中的实例可以去试试看网页的在线进制转换,那个就是不需要你按确认键也不需要你按enter,你随时输它随时转换。包括手机上的计算器也是,实时的计算输入的值。 使用方法的核心是oneKeyUp+方法名。除了这个还有关键字onkeypress,oneKeyDown等。个人认为oneKeyUp比较实用。

14.flash和js通过什么类如何交互?

Flash提供了ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法:call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。

Flash已经停止,所以大概这道题,凉了

15.JS垃圾回收机制

1.js中的内存回收

在js中,垃圾回收器每隔一段时间就会找出那些不再使用的数据,并释放其所占用的内存空间。

以全局变量和局部变量来说,函数中的局部变量在函数执行结束后这些变量已经不再被需要,所以垃圾回收器会识别并释放它们。而对于全局变量,垃圾回收器很难判断这些变量什么时候才不被需要,所以尽量少使用全局变量。

2.垃圾回收的两种模式

1.引用计数

引用计数的判断原理很简单,就是看一份数据是否还有指向它的引用,如果没有任何对象再指向它,那么垃圾回收器就会回收,举个例子


// 创建一个对象,由变量o指向这个对象的两个属性
var o = {
    name: '听风是风',
    handsome: true
};
// name虽然设置为了null,但o依旧有name属性的引用
o.name = null;
var s = o;
// 我们修改并释放了o对于对象的引用,但变量s依旧存在引用
o = null;
// 变量s也不再引用,对象很快会被垃圾回收器释放
s = null;

复制代码

引用计数存在一个很大的问题,就是对象间的循环引用,比如如下代码中,对象o1与o2相互引用,即便函数执行完毕,垃圾回收器通过引用计数也无法释放它们。

function f() {
    var o1 = {};
    var o2 = {};
    o1.a = o2; // o1 引用 o2
    o2.a = o1; // o2 引用 o1
    return;
};
f();
复制代码

标记清除

标记清除的概念也好理解,从根部出发看是否能达到某个对象,如果能达到则认定这个对象还被需要,如果无法达到,则释放它,这个过程大致分为三步:

a.垃圾回收器创建roots列表,roots通常是代码中保留引用的全局变量,在js中,我们一般认定全局对象window作为root,也就是所谓的根部。

b.从根部出发检查所有 的roots,所有的children也会被递归检查,能从root到达的都会被标记为active。

c.未被标记为active的数据被认定为不再需要,垃圾回收器开始释放它们。

当一个对象零引用时,我们从根部一定无法到达;但反过来,从根部无法到达的不一定是严格意义上的零引用,比如循环引用,所以标记清除要更优于引用计数。

从2012年起,所有现代浏览器都使用了标记清除垃圾回收算法,但老版本的IE6除外。

三:Vue框架面试题

1.对于MVVM的理解

MVVM分为Model、View、ViewModel三者。

  • Model:代表数据模型,数据和业务逻辑都在Model层中定义;
  • View:代表UI视图,负责数据的展示;
  • ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

简单的说,ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。

vue的双向绑定原理及实现

2.Vue的生命周期

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。 image.png

3.Vue组件间的参数传递

1. 父组件与子组件传值

image.png

  • 1.父组件--->子组件:父组件传值给子组件使用Props属性
  • 2.子组件--->父组件:子组件传值给父组件使用Emit事件。
2.非父子组件间的数据传递(兄弟组件传值)
  • 1.eventBus(主要是现实途径是在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。)\
  • 2.当组件比较复杂需要传递的数据比较多的时候可以使用vuex来管理。
参数同步问题

如果父子间传递的参数需要实时的进行双向绑定,该如何做?

如果修改了props中的值,父组件中的内容不会修改。Vue不推荐在子组件中直接修改props的值。

如果需要修改props中的值,可以在子组件中创建一个data或者computed副本

使用@input事件实现双向绑定

子组件代码:

1、在子组件中声明props,由父组件传递。

2、创建props的副本,当props的副本

3、使用v-model绑定props副本的值

4、监听控件的@input,当值发生改变,修改参数值,并且将值弹回父组件

4.Vue实现数据双向绑定的原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

image.png

5.Vue的路由实现:hash模式 和 history模式

区别:

  hash模式url带#号,history模式不带#号

hash模式:

  在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;

特点:

hash模式:   hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。

  hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:

  history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

  history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

6.vue-router的钩子函数

vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容。 类似于a标签,实际上在页面上展示出来的也是a标签,是锚点。

全局守卫

1 . beforeEach(function (to, from, next) {}:一个路由跳转到另一个路由(还没到)的过程中触发

2 . afterEach(function (to, from) {}:一个路由已经跳转到了另一个路由后触发

3 . 参数: 

  to 你要去哪里

  from 你从哪里来

  next 你接下来要做什么

  1. next的参数详解

  next(function) 一定要调用这个方法来resolve这个钩子函数。执行效果依赖next方法的调用参数

  next() 什么都不做继续执行到调转的路由

  next(false) 中断当前导航 没有跳转 也没有反应

  next("/") 参数是路径 调转到该路径

  next(error) 如果next参数是一个Error实例 导航终止该错误,会传递给router.onError()注册过的回调中

7. v-if 和 v-show 有什么区别?

v-if:

  • 元素隐藏时,会在dom节点中把该元素移除
  • v-if不停地销毁和创建
  • v-if更适合于带有权限的操作,渲染时判断权限数据;

v-show

  • 元素隐藏时,会在dom节点中把该元素设置css属性为display : none,元素依然保留在dom节点中
  • v-show只编译一次
  • v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作。

8.对于Vue是一套渐进式框架的理解

分成两部分解答

vue.js的两个核心是什么

1. 数据驱动,也叫双向数据绑定。

Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

2、组件系统。

.vue组件的核心选项:

1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
4、方法(methods):对数据的改动操作一般都在组件的方法内进行。
5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
等等。

2问题二:对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解

渐进式代表的含义是:没有多做职责之外的事。

vue.js只提供了vue-cli生态中最核心的组件系统双向数据绑定

vuexvue-router都属于围绕vue.js开发的库。

比如说,你要使用Angular,必须接受以下东西:

  • 必须使用它的模块机制
  • 必须使用它的依赖注入-
  • 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。

Vue与React、Angular的不同是,但它是渐进的

  • 你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;
  • 也可以整个用它全家桶开发,当Angular用;
  • 还可以用它的视图,搭配你自己设计的整个下层用。
  • 你可以在底层数据逻辑的地方用OO和设计模式的那套理念,
  • 也可以函数式,都可以,它只是个轻量视图而已,只做了最核心的东西。

9.Vue 组件间通信有哪几种方式?

1. 父子组件

props

emit/emit/emit/on

parent/parent /parent/children

ref

attrs/attrs / attrs/listeners

2. 兄弟组件

$parent eventbus vuex

3. 跨层级关系

provide/inject

$root

eventbus

vuex

10.vue中子组件调用父组件的方法

第一种:通过this.$parent调用父组件的方法

image.png

第二种:通过this.$emit()去触发父组件中子组件标签上的自定义事件,可以传值过去,用的比较多

image.png

第三种:父组件中定义自定义属性,将该方法传递到子组件中,子组件中通过props接收,再进行调用,这里也可以进行传值

image.png 想省事就使用第一种方法

第二种方法使用的最多,数据流向比较清晰,和非父子组件传值的this.observer.observer.emit()  this.observer.observer.on()使用方式类似(this.emit()可以传多个值,this.emit()可以传多个值,this.observer.$emit()只能传一个值

第三种方法定义自定义属性,这种一般用来传递属性的,不用来传方法,别人看起来不太好理解(自定义事件一般用来传函数,自定义属性一般用来传属性)

11.怎么定义vue-router的动态路由?怎么获取传过来的值?

动态路由是什么??

适用场景:比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。

你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:

看不懂?有点迷糊?没关系,我们亲自上手试一试,实践出真章嘛。

  • 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue

test.vue

  • router文件夹下 》index.js文件 》打开并输入

③ 再到test.vue组件中敲:

在这里需要说明一下$route.params.testId是什么意思了,大概你也猜得出来,就是获取当前路由的参数。

④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:

以上这就是动态路由的第一个模式了。 更多请参考: 3.vue-router之什么是动态路由

12.请介绍一下你对vue-router的理解?

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。

“更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式:

  • 利用URL中的hash(“#”)
  • 利用History interface在 HTML5中新增的方法

vue-router是Vue.js框架的路由插件,下面我们从它的源码入手,边看代码边看原理,由浅入深观摩vue-router是如何通过这两种方式实现前端路由的。

详参 【源码拾遗】从vue-router看前端路由的两种实现

13.vue-router有哪几种路由守卫?

1、全局守卫: router.beforeEach

2、全局解析守卫: router.beforeResolve

3、全局后置钩子: router.afterEach

4、路由独享的守卫: beforeEnter

5、组件内的守卫: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

导航表示路由正在发生改变,vue-router 提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的单个路由独享的, 或者组件级的

注意:参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察 $route 对象 来应对这些变化,或使用 beforeRouteUpdate的组件内守卫。

14.vuex有哪几种属性?

1、state:vuex的基本数据,用来存储变量(后四个属性都是用来操作state里面储存的变量的)。

2、getters:是对state里面的变量进行过滤的。

3、mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。

4、action:和mutation的功能大致相同,不同之处在于:

            4-1.Action提交的是mutation,而不是直接变更状态。  也就是action是用来修改mutation并提交的  而  mutation是通过修改state

             4-2.Action可以包含任意异步操作。(一般比较复杂的数据都在action中操作)

             4-3.action先会执行异步操作再去调用mutation,随后才跟新state

5、modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

image.png dispatch与commit区别

dispatch:是跟action一块用的,含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutation的方法名',获取值)

commit:是跟mutation一块用的,同步操作 ,写法: this.$store.commit('mutation的方法名',获取值)

详参 VueX的五种属性

15.vuex的State特性是?

  • state提供唯一的公共数据源,所有共享的数据都要统一放到store中的state属性中存储

  • 如果只是想使用state中的一个数据直接通过$store.state.xxx的方式使用 如果我在一个组件中想要使用的数据很多,那通过mapState的方式一次性把所有的属性都映射为计算属性

16.vue-cli如何新增自定义指令?

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {},
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
复制代码

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
复制代码

3.指令的使用

<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
复制代码

17.vue等单页面应用及其优缺点

单页面应用(SPA) ,通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

多页面(MPA) ,就是指一个应用中有多个页面,页面跳转时是整页刷新。

单页面的优点和缺点:

优点:

  • 用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小。

  • 前后端分离,比如vue项目

  • 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改 和调整;

缺点:

  • 首次加载页面的时候需要加载大量的静态资源,这个加载时间相对比较长。

  • 不利于 SEO优化,单页页面,数据在前端渲染,就意味着没有 SEO。

  • 页面导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

四:浏览器面试题

1.跨标签页通讯

2.浏览器架构

3.浏览器下事件循环(Event Loop)

4.从输入 url 到展示的过程

5.重绘与回流

6.存储

7.Web Worker

8.V8 垃圾回收机制

9.内存泄露

五:服务端与网络

1.http/https 协议

2.常见状态码

3.get/ post

4.Websocket

5.TCP 三次握手

6.TCP 四次挥手

7.Node 的 Event Loop: 6 个阶段

8.跨域

9.安全

六:Webpack 相关

1.原理简述

2.Loader

3.Plugin

4.编译优化

七:算法

1.五大算法

2.基础排序算法

3.高级排序算法

4.递归运用(斐波那契数列): 爬楼梯问题

5.数据树

6.天平找次品

八:进阶知识

React框架

1.Fiber

2.生命周期

3.setState

4.HOC(高阶组件)

5.Redux

6.React Hooks

7.SSR 服务端渲染

8.函数式编程

面试中你要明白的事情:

一:STAR法则

在写简历和面试过程中,都需要描述工作经验或个人经历。优秀的面试者往往会用 STAR 法则来建立个人事件,让面试官可以更好地通过你过去的经历来判断你的个人能力和潜质。

STAR 法则四要素:

Situation:场景 - 当时是怎样的场景;

Task:任务 - 当时的任务是什么;

Action:我采取了怎样的行动;

Result:达到了什么样的结果。

往往大部分同学一上来就直接介绍做了什么以及实现的过程,条理也比较清晰,内容也颇具技术含量。但很多同学很容易忽略了 Situation 和 Result 的部分也就是背景和结果。或者是在面试官进一步了解追问细节的时候容易惊慌失措。这些原因往往都是由于面试前对自己的经历没有将来龙去脉讲清楚以及总结不够全面和深入。

举个例子:比如有的同学提到了在 XXX 项目过程中实现了一个 Webpack 插件 XXX,这个插件的功能是 XXXX 并且在 Github 上开源了。整个实现过程和思路都比较清晰,面试官听的也是饶有兴致,甚至回想起年轻时某个夜晚加班研究 Webpack 插件的青涩时光。

尽管这样面试官也同样希望了解当时项目的背景,是什么原因导致你要想到通过做 Webpack 插件来解决而不是通过其他工具,以及这个插件给项目带来了怎样的价值(是构建性能还是其他?)。背景和结果是面试官非常看重的一部分,必须拿出足够的理由和价值来说服面试官,否则尽管你在这个项目投入了足够的精力但最终并没有为你的面试评价加分,这是十分可惜的。

这时候有的同学也会想:我的项目只是个人/学校的练手项目,对于项目结果我想不到非常有吸引眼球的价值。那么这个时候你不妨说一下你在项目中学到内容,比如在这个 Webpack 插件例子中,就可以说一下:

Compiler 和 Compilation 以及它们的区别;

Webpack 是通过什么方式实现了插件之间的关系以及保证它们的有序性;

开发插件时需要依据当前配置是否使用了某个其他的插件而做下一步决定,如何判断 Webpack 当前使用了哪些插件;

开发插件过程中借鉴了其他插件的思路,我对这个插件源码的理解;

等等等等。

以上的在实际开发 Webpack 插件过程中大部分都会遇到,这些问题如果你有记录和总结也能作为 Result。

二:面试场景题

举一个例子,比如考察候选人是否聪明,star 法则会这样询问:

1.在刚才的项目中,你提到了公司业务发展很快,人手不够,你是如何应对的呢?

2.在你的项目里面解决了什么样的难题

3.在你的项目里面如何做的登录

4.前端的项目如何进行优化,移动端呢?

5.图片加载失败要做啥

6.让你带领一个小团队完成一个项目,你会怎么做?

7.项目的同源处理,跨域相关

8.如果再做这个项目,你会在哪些方面进行改善?

面试中,如果面试官让你描述一个自己比较得意的项目的时候,一定记得要遵循 STAR 法则进行回答。比如为了整合 xxx 业务(S),我承担 xxx 角色,具体负责 xxx (T)。做了 xxx 事情(A),最后产生了 xxx 结果

然后在描述项目亮点的时候也一样,比如

由于项目 xxx 原因(S),我需要进行 xxx 改进(T),然后进行了 xxx 处理(A),最后产出了 xxx 结果,数据对比为 xxx。

整体这样下来,会显得你很有思考力,且具有行动力,可以给企业创造出价值,这也是面试官评定候选人最关键的指标之一。

三:总结一下面试官的套路

面试时所问的问题基本分为两种:具象的问题和开放性的问题。

具象的问题基本都会参考工作经验按照 STAR 法则来进行,主要是了解基本的素养,技术深度和潜力。

开放性的问题基本是考察思维发散能力,考察在某个领域的深度和广度,基本上会结合技术问题来问,或者是结合工作内容来问。

比如:实现某种技术的 n 种方法?某种技术的实现原理?

**开看都看完了。请给一个赞吧,鼓励一下累死在键盘上的我。这很重要**

文章分类
前端
文章标签