初级前端面试总结-3

最新推荐文章于 2024-07-13 09:53:17 发布

foxhuli229

最新推荐文章于 2024-07-13 09:53:17 发布

阅读量1.4k

点赞数

分类专栏：初级前端面试总结文章标签：面试

本文链接：https://blog.csdn.net/xiaohuli_hyr/article/details/106326805

版权

初级前端面试总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初级前端面试总结-3

文章目录

初级前端面试总结-3

今年2月份，裸辞来到成都，经过2个月的漫长的找工作道路，最终拿到5个offer，于是总结在面试过程中，面试问题，后续带更新中……

面试题汇总

css
- 如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。
- 如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？
- 用纯CSS创建一个三角形的原理是什么？
- 清除浮动的方法？
- 实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？
html
- HTML中那些标签是块级标签，那些是行内标签，空标签

js
- jQuery、js、vue取dom元素的方式
- js的数据类型
- js中全局变量和局部变量
- js中那些是存储在站里面，那些是存储在队里面
- 声明函数和异名函数的区别
- 闭包
- 函数里面的this含义？什么情况下，怎么用？
- 实现一个倒计时功能？
网络/安全
- IOS七层模型、TCP和IP所在的层次（七层）
- HTTP/TCP的区别
- 常见的web攻击有哪些？如何防范？
存储
- 请谈谈cookie的区别？
请求
- ajax同步请求
vue
- VUE中的MVVM的理解？
- vue生命周期的作用是什么？
- vue生命周期总共有几个阶段？
- 第一次加载页面会触发那几个钩子？
- DOM渲染在哪个周期中就已经完成了？
- 父组件与子组件自己传值，兄弟组件传值？
- vue与react的区别？
- vue与angular的区别？
- v-if 与 v-show的区别？
- $route 与 $router的区别？
- vue.js 的两个核心是什么？
- vue常见的指令？
- v-on可以绑定多个方法吗？
- 怎么定义vue-router的动态路由？如何获取传递过来的值？
- vue-router的作用
- 在vue中v-for为何要使用 :key
其他
- 前端页面由那三层构成？分别是什么？作用是什么？
- 列举IE与其他浏览器不同的特性？
- 请说出三种减少页面加载时间的方法？

css

如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。

将图片设置为背景图

width:100%;
height:100%;
background:url(demo.jpg) no-repeat center center;

如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？

参考文档：https://blog.csdn.net/qq_41445106/article/details/97273169

如何水平居中一个div？

1.不需要知道宽高

css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
      top:0;bottom:0;left: 0;right: 0;margin:auto;
}
html:
	<div id="wrap"</div>

2.知道宽高

css:
	#wrap{
	width: 200px;
	height: 200px;
	background: orange;
	position: absolute;
	top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
}
html:
	<div id="wrap"</div>

3.弹性盒

css:
	*{margin:0;padding: 0;}
	html,body{
		height: 100%;
	}
	body{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#wrap{
	width: 200px;
	height: 200px;
	background: orange;
	}
html:
		<div id="wrap"</div>

如何居中一个浮动元素？

css:
.outerbox {
	float: left;
	position: relative;
	left: 50%;
}

.innerbox {
	float: left;
	position: relative;
	right: 50%;
}
html:
<div class="outerbox">
	<div class="innerbox">我是浮动的</div>
</div>

如何让绝对定位的div居中

css:
.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}
html:
<div class="center"></div>

用纯CSS创建一个三角形的原理是什么？

新增一个正方形或者长方形，给对应的边框设置为透明色(transparent)

核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;

<style>
    .box {
      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 class="box"></div>

</body>

清除浮动的方法？

具体代码参考：https://blog.csdn.net/h_qingyi/article/details/81269667

采用 clear：both方式
采用float清除浮动
采用伪元素 :after 清除互动
before和after双伪元素清除浮动

实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？

预加载事件为onload，加载成功后为图片设置样式。

var imgObj = document.getElementById('imgObg');
addImg('5.png');
function addImg(isrc) {
    imgObj1 = new Image();
    imgObj1.src = isrc;
    imgObj1.onload = function() {
        imgObj.src = this.src;
        imgObj.height = 50;
        imgObj.width = 50;
    }
}

html

HTML中那些标签是块级标签，那些是行内标签，空标签

参考文献：https://www.cnblogs.com/iverson666/p/9169274.html

块级元素：块级大多为结构性标记

  <address>...</adderss>   

  <center>...</center>  地址文字

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <pre>...</pre>  预格式化

  <blockquote>...</blockquote>  段落缩进   前后5个字符

  <marquee>...</marquee>  滚动文本

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

·块级元素

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时，默认为100%

  4.块级元素中可以包含块级元素和行内元素

  5.都有align属性

  6.dispay都是block

行内元素：行内大多为描述性标记

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表


·行内元素

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不可以改变

  4.行内元素只能行内元素，不能包含块级元素

  5.没有align属性

  6.display都是inline

空标签

<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> //链接
<meta> //媒体

js

jQuery获取dom元素的方式

参考文档：https://www.cnblogs.com/fushuxin/p/10098584.html

jQuery获取dom元素

DOM对象转jQuery对象:例子: $(DOM对象)

jQuery对象转DOM对象:例子: $(’#btn’)[0]或者: $(’#btn’).get(0);

JS获取DOM元素的方法（8种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

vue获取DOM元素的方法

在标签中加上ref=‘dom’，然后在代码中this.$refs.dom这样就拿到了页面元素了。

例如：<div class='wrap' ref='box'>Hello world!</div>

让Hello world!的颜色显示为红色：
this.$refs.box.style.color = "red"

js的数据类型

Number、undefined、string、null、symbol、bigint、boolean、object

JS数据类型：Object 中包含了哪几种类型？

其中包含了Data、function、Array等。这三种是常规用的。

更多详情参考：https://blog.csdn.net/u013592575/article/details/95087953

声明函数和异名函数的区别

有名函数和无名函数的区别是：有名函数可以先调用，再定义，而无名函数就需要先定义再使用

js中全局变量和局部变量

全局变量
- 采用var来定义的变量，是挂载到window对象里面，所以被称为 全局变量
局部变量
- 采用let 或者 const 在局部中定义的变量，被称为 局部变量，局部变量只能在该范围内才可以调用，否则调用会报错。

js中那些是存储在站里面，那些是存储在队里面

闭包

参考文献：https://baike.baidu.com/item/%E9%97%AD%E5%8C%85/10908873?fr=aladdin

闭包的概念就是：函数A中包含函数B，函数B可以调用函数A的中变量，那么函数B则称为闭包。

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 [1]

例如：

function a(){
	var i=0;
	function b(){
		alert(++i);
	}
	return b;
}
var c=a();
c();

特点

这段代码有两个特点：

1、函数b嵌套在函数a内部；

2、函数a返回函数b。

这样在执行完var c=a( )后，变量c实际上是指向了函数b，再执行c( )后就会弹出一个窗口显示i的值（第一次为1）。这段代码其实就创建了一个闭包，这是因为函数a外的变量c引用了函数a内的函数b。也就是说，当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

作用

简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。

在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引用，因此函数a和b互相引用但又不被外界打扰（被外界引用），函数a和b就会被回收。

函数里面的this含义？什么情况下，怎么用？

this指向

实现一个倒计时功能？

<div class="time">
        <span id="showTime"></span>
</div>
<script>
function countDown(time,id){
        var startTime = new Date();
        var endTime = new Date(time);
        var distance = endTime.getTime() - startTime.getTime();

        var day = 0;
        var hour = 0;
        var minute = 0;
        var second =0;

        if(distance>=0){
            day = Math.floor(distance/1000/60/60/24);
            hour = Math.floor(distance/1000/60/60%24);
            minute = Math.floor(distance/1000/60%60);
            second = Math.floor(distance/1000%60);
        }else{
            alert("倒计时活动已结束");
        }
        document.getElementById(id).innerHTML = day + "天" +  hour + "时" + minute + "分" + second + "秒";
    }
    // countDown('2019/07/25 19:15:00','showInterval');
    setInterval(function(){countDown('2019/07/26 12:00:00','showTime');},0);
<script>

网络/安全

IOS七层模型

参考文献：

[百度文科](https://baike.baidu.com/item/%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B/1441391?fr=aladdin）

iOS七层模型分别是：物理层、数据链路层、网络层、传输层、表示层、会话层、应用层

应用层

网络服务与最终用户的一个接口。

协议有：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP

表示层

数据的表示、安全、压缩。（在五层模型里面已经合并到了应用层）

格式有，JPEG、ASCll、EBCDIC、加密格式等 [2]

会话层

建立、管理、终止会话。（在五层模型里面已经合并到了应用层）

对应主机进程，指本地主机与远程主机正在进行的会话

传输层

定义传输数据的协议端口号，以及流控和差错校验。

协议有：TCP UDP，数据包一旦离开网卡即进入网络传输层

网络层

进行逻辑地址寻址，实现不同网络之间的路径选择。

协议有：ICMP IGMP IP（IPV4 IPV6）
数据链路层

建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。（由底层网络定义协议）

将比特组合成字节进而组合成帧，用MAC地址访问介质，错误发现但不能纠正。
物理层

建立、维护、断开物理连接。（由底层网络定义协议）

HTTP/TCP的区别

参考文献：https://www.cnblogs.com/sunshine-blog/p/8393264.html

HTTP：超文本传输协议，位于七层模型中的应用层，默认HTTP的端口为80；HTTPS的端口号为443。

TCP：位于七层模型中的传输层。三次握手，四次挥手

HTTP的优点

简单快捷。HTTP协议简单、通信速度很快
灵活。HTTP协议允许传输任意类型的数据
短连接。HTTP协议限制每次连接只处理一个请求，服务器对客户端的请求作出响应后，马上断开连接。这种传输方式可以节省传输时间。

TCP连接——三次握手

建立一个TCP连接需要经过“三次握手”。TCP三次握手具体过程如下：

第一次握手：客户端发送syn包（syn=j）到服务器，并进入SYN_SEND状态。等待服务器确认。
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。
第三次握手：客户端接收到服务器的SYN_ACK包，向服务器发送确认包ACK（ack=k+1），包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

常见的web攻击有哪些？如何防范？

参考文档：https://www.cnblogs.com/smallJunJun/p/11187796.html

1.xss跨站脚本攻击

比如在表单Input框里面输入一段js代码

"/><script>alert("xss")</script><

就会执行这一段脚本，弹出窗口

如何防范XSS攻击

前端，服务端需同时对HTML标签做转义处理。将其中的”<”,”>”等特殊字符进行转义编码。

2.CSRF攻击流程

用户登录受信任网站A；
在不退出网站A的情况下，访问危险网站B（攻击者网站或攻击者挂马的网站）。

例如：

如何防范CSRF攻击

token机制

在HTTP请求中进行token验证，如果请求中没有token或者token内容不正确，则认为CSRF攻击而拒绝该请求。

referer检测

在HTTP Header中有一个字段Referer，它记录了HTTP请求的来源地址，如果Referer是其他网站，就有可能是CSRF攻击，则拒绝该请求。
但是，服务器并非都能取到Referer。很多用户出于隐私保护的考虑，限制了Referer的发送。在某些情况下，浏览器也不会发送Referer，例如HTTPS跳转到HTTP。

3.SQL注入，关键是通过用sql语句伪造参数发出攻击

4.DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）

5.DNS劫持：

通过某些手段获得某域名的解析控制权，修改此域名的解析结果，导致对该

域名的访问由原 ip 地址转入到修改后的指定 ip。其结果是对特定的网址不能访问或访问的

是假网址。

存储

请谈谈cookie的区别？

阅读文档：https://blog.csdn.net/zxxvip/article/details/73314608

请求

ajax同步请求/同时并发请求

ajax同步请求：采用 async：false（同步请求），默认为 true异步请求

当async属性的值为false时是同步的，Ajax请求将整个浏览器锁死，只有ajax请求返回结果后，才执行ajax后面的alert语句。

当async属性的值为true时是异步的，即不会等待ajax请求返回的结果，会直接执行ajax后面的alert语句。

同时并发请求

$.Deferred();

更多详细说明：https://blog.csdn.net/yintianqin/article/details/60962175

vue

vue官网：https://cn.vuejs.org/

VUE中的MVVM的理解？

参考文献：https://juejin.im/post/5d12cd9df265da1bb47d73bf

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义操作数据变化的业务逻辑；

View 代表UI视图，它负责将数据模型转化成UI 展现出来；

ViewModel 监听Model中数据的改变和控制View层的展现；

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上；

ViewModel通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

相当于就是数据驱动视图、视图驱动数据，从而实现数据的双向绑定

vue生命周期的作用是什么？

参考文献：https://juejin.im/post/5d12cd9df265da1bb47d73bf

beforeCreate：实例创建前被调用；

created：实例创建后被调用，完成数据观测，属性和方法的运算，watch/event事件回调，模板渲染成html前（vm.$el未定义）故数据初始化最好在这阶段完成；

beforeMount：在$el挂载前被调用，相关的 render 函数首次被调用，期间将模块渲染成html,此时vm.$el还是未定义；

mounted：在$el挂载后被调用，此时vm.$el可以调用，不能保证所有的子组件都挂载，要等视图全部更新完毕用vm.$nextTick();

beforeUpdate：数据更新时调用;

updated：数据更新后调用;

activated：<keep-alive/>包裹的组件激活时调用；

deactivated:<keep-alive/>包裹的组件离开时调用；

beforeDestroy:实例销毁之前调用,此时实例仍然完全可用；

destroyed：实例销毁之后调用,此时实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue生命周期总共有几个阶段？

vue生命周期一共有8个阶段，分别是：

创建前/后、载入前/后、更新前/后、销毁前/后

beforeCreate：实例创建前被调用；
created：实例创建后被调用，完成数据观测，属性和方法的运算，watch/event事件回调，模板渲染成html前（vm.$el未定义）故数据初始化最好在这阶段完成；
beforeMount：在$el挂载前被调用，相关的 render 函数首次被调用，期间将模块渲染成html,此时vm.$el还是未定义
mounted：在$el挂载后被调用，此时vm.$el可以调用，不能保证所有的子组件都挂载，要等视图全部更新完毕用vm.$nextTick();
beforeUpdate：数据更新时调用;
updated：数据更新后调用;
beforeDestroy:实例销毁之前调用,此时实例仍然完全可用；
destroyed：实例销毁之后调用,此时实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

第一次加载页面会触发那几个钩子？

第一加载页面是会触发：beforecreate、created、beforemount、mount

DOM渲染在哪个周期中就已经完成了？

在 mount钩子就已经创建完成。

父组件与子组件自己传值，兄弟组件传值？

props/ $e m i t （父子通信）$ refs/ref（父子通信）

$c h i l d r e n /$ parent（父子通信）

$a t t r s /$ listeners（父子通信、跨级通信）

provide/inject（父子通信、跨级通信）

eventBus（父子通信、跨级通信、兄弟通信）

vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）

localStorage/sessionStorage等基于浏览器客户端的存储（父子通信、跨级通信、兄弟通信、路由

视图级别通信）

vue与react的区别？

参考文献：https://www.cnblogs.com/theblogs/p/10423596.html

React 和Vue是现在主流的两个框架（相对来说angular用的已经少了）

两者的区别体现在以下方面

相同点：

1、react和vue都支持服务端渲染

2、都有虚拟DOM，组件化开发，通过props传参进行父子组件数据的传递

3、都是数据驱动视图

4、都有支持native的方案（react的react native，vue的weex）

5、都有状态管理（react有redux，vue有vuex）

不同点：

1、react严格上只能算是MVC的view层，vue则是MVVM模式

2、虚拟DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

3、组件写法不一样，react推荐的做法是JSX+inline style,也就是把HTML和CSS全都写进javaScript了

4、数据绑定：vue实现了数据的双向绑定，react数据流动是单向的

5、state对象在react应用中是不可变的，需要使用setState方法更新状态

在vue中，state对象不是必须的，数据有data属性在vue对象中管理

vue与angular的区别？

参考文档： https://www.cnblogs.com/dhpong/p/10771267.html

相同：

1.数据绑定：vue和angular绑定都可以用

{{ }}

2.都支持内置指令和自定义指令

3.都支持内置过滤器和自定义过滤器。

区别：

1.学习成本和API 设计：vue相比于angular来说更加的简单

angular:学习成本比较高，比如增加了dependency injiction特性。Angular 尽管学习曲线较为陡峭，但却是构建完整复杂应用的好选择。

vue：本身提供的API都比较简单、直观。Vue.js 是轻量级的开发框架，很适合开发小规模灵活的 Web 应用程序；

在 API 与设计两方面上 vue比 angular 简单得多，因此你可以快速地掌握它的全部特性并投入开发。

性能上：

angular：依赖对数据做脏检测，所以watcher越来越多；

vue：使用基于依赖追踪的观察，并且使用异步队列更新，所有的数据都是独立触发的。

.vue的双向绑定是基于ES5 的 getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。

因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。

3.运行速度:vue相当于angular要变得小巧很多，运行速度比angular快.

4.指令：vue指令用v-xxx，angular用ng-xxx

angular用的指令是ng-前缀的，而vue是v-

5.组件：vue有组件化概念，angular中没有

6.数据存放位置： vue中数据放在data对象里面，angular数据绑定在$scope上面。

7.挂载数据方式：

angular挂载数据的方法

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.list = [{},{},{}];
  $scope.method = function(){
    console.log("angular");
  }
})

vue挂载数据的方法

var V = new Vue({
  el:"#app",
  data:{
    list:[{},{},{}]
  },
  methods:{
    method:function(){
      console.log("vue");
    }
  }
})

可以看出angular所有的数据和方法都是挂载在$scope上，

而vue的数据和方法都是挂载在vue上，只是数据挂载在vue的data,方法挂载在vue的methods上。

8.数据绑定
Angular 1 使用双向绑定，
Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

10.总结：Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

v-if 与 v-show的区别？

v-show，切换元素的display属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在<template/>上；

v-if，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在<template/>上。

$route 与 $router的区别？

参考文献：https://www.cnblogs.com/czy960731/p/9288830.html

$router

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

举例：history对象

$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录.

方法：

$router.replace({path:‘home’});//替换路由，没有历史记录

$route

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

$route

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

- $route.path
  字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
- $route.params
  对象，包含路由中的动态片段和全匹配片段的键值对
- $r o u t e . q u e r y 对象，包含路由中查询参数的键值对。例如，对于 ‘ / h o m e / n e w s / d e t a i l / 01 ? f a v o r i t e = y e s ‘ ，会得到 ‘$ route.query.favorite == ‘yes’` 。
- $route.router
  路由规则所属的路由器（以及其所属的组件）。
- $route.matched
  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
- $route.name
  当前路径的名字，如果没有使用具名路径，则名字为空。

$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，看示例就能知道它们代表的含义

vue.js 的两个核心是什么？

数据驱动、组件系统

**数据驱动：**ViewModel，保证数据和视图的一致性。

**组件系统：**应用类UI可以看作全部是由组件树构成的

vue常见的指令？

参考文档：https://juejin.im/post/5d12cd9df265da1bb47d73bf

v-show、v-if、v-else-if、v-else、v-for、v-on、v-bind、v-model、v-once、v-slot、v-html、v-text。

v-show，切换元素的display属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在`上；

v-if，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在`上；

v-else-if，必须和v-if一起使用；

v-else，必须和v-if一起使用；

v-for，将Array、Object、Number、String数据循环渲染元素或者组件，渲染组件必须带上key，key要为数据中每项特定值比如ID；

<div v-for="(item,index) in Array">{{index}}-{{item}}</div>
<div v-for="(item,key,index) in Object">{{index}}-{{key}}--{{item}}</div>
<div v-for="item in Number">{{item}}</div>
<div v-for="(item,index) in String">{{index}}-{{item}}</div>
<myVue v-for="(item,key,index) in Object" :title="item.title" :key="item.id"></myVue>

v-on，缩写 @，监听事件，如：@click、@submit、@dblclick

怎么获取div上点击的鼠标位置

<div @click="a"></div>
<div @click="b(1,2,$event)"></div>

methods:{
    a(){
        console.log(event.clientX,event.clientY)
    },
    b(num1,num2,$event){
        console.log($event.clientX,$event.clientY)
    },
}

怎么阻止冒泡，怎么阻止默认事件

//阻止冒泡
<div @click.stop="a"></div>
//阻止默认
<div @click.prevent="b"></div>
//阻止冒泡阻止默认
<div @click.stop.prevent="c"></div>

怎么监听组件根元素的原生事件
```
<myVue @click.native="d"></myVue>
```

怎么监听组件自定义事件

<myVue @diy-event="f"></myVue>
//组件中这样触发
this.$emit('diyEvent',data)

v-bind，缩写:,绑定动态属性；

v-model，限制应用在 <input/> <textarea/> <select/>、表单元素和组件上创建双向绑定，修饰符v-model.lazy懒监听、v-model.number将值转成有效的数字、v-model.trim过滤首尾空格；

以上8个非常常用指令没说出来，可以考虑终止面试了

v-text，<div v-text={{data}}></div>等同{{data}}, 如果内容带有HTML标签，也作为普通字符输出。

v-html，直接输出HTML，不会按Vue模板编译，会有XSS攻击分析，不要用在用户提交内容上；

v-once，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过,用于优化更新性能;

v-per，跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译;

v-cloak，防止页面加载时出现 vuejs 的变量名，需要css配合[v-cloak] { display: none },几乎没怎么用；

v-slot，在组件插槽里面详解。

v-on可以绑定多个方法吗？

可以，v-on后面接一个对象，但是不支持事件修饰符。

<template>
    <div v-on:{click:a,dblclick:b}></div>
</template>
<script>
    methods:{
        a(){
            alert(1)
        },
        b(){
            alert(2)
        }
    }
</script>

怎么定义vue-router的动态路由？如何获取传递过来的值？

定义路由（数组）

const routes = [
   {
       path: '/foo',
       component: Foo
   }
];

创建 router 实例

const router = new VueRouter({
   routes
});

挂载路由

const app = new Vue({
   routes
}).mount('#app');

带参动态路由

动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，如：

{
    path: /user/:id
    component: User
}

获取路由参数

this.$route.params.id

vue-router的作用

参考文档：https://www.cnblogs.com/goloving/p/9211358.html

https://www.bbsmax.com/A/ke5jkAEmdr/

vue-router是vue单页面开发的路由，就是决定页面

组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。

Props 属性

1、to

表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()。

<router-link :to="home">Home</router-link>

<router-link :to="{ path: ‘home‘ }">Home</router-link>

//命名路由
<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>

//带查询参数，下面的结果为/register?plan=private-->
<router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>

2、replace

设置replace属性的话，当点击时，会调用roter.replace()而不是router.push()，所以导航后不会留下history记录，也就是不能回退到上一个页面

<router-link :to="{path: ‘/abc‘}" replace>ABC</router-link>

3、append

设置append属性后，则在当前路径前添加基路径，例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配了，则为/a/b

<router-link to="b" append>Home</router-link>

4、tag

有时候想要渲染成某种标签，例如

。于是我们使用tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
```
<router-link to="/foo" tag="li">FOO</router-link>
// 渲染结果 
<li>FOO</li>
```
5、active-class

设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘
```
export default New Router({
   linkActiveClass: ‘active‘ 
})
```
6、exact

“是否激活”，默认是false 。举个粟子，如果当前的路径是/a 开头的，那么也会被设置css类名

按照这个规则，将会点亮各个路由！想要链接使用"exact匹配模式"，则使用exact属性：
```
// 这个链接只会在地址为 / 的时候被激活 
<router-link to="/" exact>Home</router-link>

<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！
```
7、events

声明可以用来触发导航的事件（默认是‘click‘）。可以是一个字符串或者是一个包含字符串的数组

8、将"激活时的css类名"应用在外层元素

有时候我们要让"激活的css类名"应用在外层元素，而不是标签本身，那么可以用渲染外层元素，包裹着内层的原生标签
```
<router-link tag="li" to="/foo">
    <a>/foo</a>
</router-link>
//在这种情况下，<a>将作为真实的链接（能获取到正确的href的），而"激活时的css类名"则设置到外层的<li>
```
9、方法

router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，这有啥区别呢？

router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.

router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.

router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.Go(n)

在vue中v-for为何要使用 :key

主要用于动态为input中复选框、单选框添加数组值，选中的属性还是处于选中状态，而不是新增的值。

为了能把F节点放在准确位置，我们给F节点添加一个key值来作为唯一标识。有了key，Diff算法就可以正确识别F节点并把它插入正确的位置。

更多详情参考：https://www.jianshu.com/p/a228e2247649

其他

前端页面由那三层构成？分别是什么？作用是什么？
- 网页的结构层(structural layer) 由HTML或XHTML之类的标记语言负责创建
  - 标记语言也就是指网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息。
- 网页的**表示层(resentation layer)**由CSS负责创建。
  - 作用是对内容如何显示做一定的控制。
- 网页的**行为层(behavior layer)**由JavaScript语言和DOM创建。
  - 作用是控制用户做出一个事件该如何显示。例如：用户悬浮在某个元素上，弹出一个显示元素标题内容的提示框。
列举IE与其他浏览器不同的特性？

参考文献：https://blog.csdn.net/michael8512/article/details/78006427

1）IE支持currentStyle，Firefox使用getComputStyle;

2）IE使用innerText，FireFox使用textContent；

3）滤镜方面：IE：filter:alpha(opacity= num)；Firefox：-moz-opacity:num；

4）事件方面：IE：attachEvent：火狐是addEventListener；

5）鼠标位置：IE是event.clientX；火狐是event.pageX；

6）IE使用event.srcElement；Firefox使用event.target；

7）IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none；

请说出三种减少页面加载时间的方法？

参考文献： https://www.cnblogs.com/yangguoe/p/8461906.html

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left…)

4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）

参考文献
- vue
  - Vue初级前端工程师面试必备
  - Vue初级面试题汇总
等待更新中……

foxhuli229

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
初级前端面试总结-3

初级前端面试总结-3文章目录初级前端面试总结-3面试题汇总css如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？如何水平居中一个div？如何居中一个浮动元素？如何让绝对定位的div居中用纯CSS创建一个三角形的原理是什么？清除浮动的方法？实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？htmlHTML中那些标签是块级标签，那些是行内标签，空标签jsjQuery获取dom元素的方式js的数据类型声明函数和异名
复制链接

扫一扫