Web前端面试的常见面试题汇总（WEB前端面试题）

今天我爱编程网小编整理了Web前端面试的常见面试题汇总（WEB前端面试题）相关信息，希望在这方面能够更好帮助到大家。

本文目录一览：

• 1、Web前端面试的常见面试题汇总
• 2、WEB前端面试题
• 3、Web前端企业面试题

Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。





1.渐进增强与优雅降级


渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。


优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。


这两种思想的区别在于：


1.渐进增强是向上兼容，优雅降级是向下兼容;


2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;


3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。


DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。


HTML5的文档类型声明：





HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：


"-strict.dtd">


标准模式与怪异模式


怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。


浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。


怪异模式与标准模式的主要区别：


1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。


2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。


3.怪异模式下，在表格中的字体样式(如font-size)不会继承。


4.怪异模式下颜色值必须使用十六进制标记法。


3.语义化


HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像 元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。


优点


·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。


·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。


·方便其他设备解析，如盲人阅读器根据语义渲染网页。


·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。


语义化标签


·

定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;


·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;


·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;


·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;


·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;


·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);


·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。


4.超链接伪类


:link、:visited、:active和:hover的声明顺序是怎样的?


:link表示未访问的链接状态;


:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。


推荐顺序是LVHA，即:link:visited:hover:active。理由如下：


·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;


·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;


·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;


·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。


5.CSS常见的长度单位


CSS中除了px长度单位之外，还有下面几个长度单位：


·pc六分之一英寸，1pc=12pt=1/6*1in=16px;


·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸，1in=2.54cm=96px;


·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;


·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;


·rem当用在根元素()的font-size上面时，它代表了它的初始值;


·ch代表元素所用字体font中“0”这一字形的宽度;


·vh1vh相当于视口高度的1%，100vh就是视口的高度;


·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;


·vmax视口高度vw和宽度vh两者中的最小值


·vmin视口高度vw和宽度vh两种中的最大值;


·%相对于父级元素的大小来确定;


参考：CSS [1]


CSSpercentage[2]


6.事件对象


冒泡与捕获


事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。


在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：


·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;


·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;


而冒泡与捕获恰恰相反：


·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;


·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;


而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。


addEventListener函数的第三个参数是个布尔值。含义：


·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;


·当布尔值是true时，表示向下捕获触发事件;


不能冒泡的事件


有些事件是不会冒泡的。比如：


·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;


·focus元素获取焦点时触发;


·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;


·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;


事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。


事件对象中的方法


·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;


·preventDefault()阻止默认事件的发生;


·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;


比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。

paragraph

“


在IE浏览器中，使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false
也能阻止默认事件的发生。


target与currentTarget


target属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target
指向的可能不是定义时的事件目标。


例如：


div.addEventListener('click',(e)=>{


console.log(e.target,e.currentTarget);


},false);


e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget总是指向div元素。


以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。


参考资料


[1]


CSSlength:#/zh-CN/docs/Web/CSS/length


[2]


CSSpercentage:
#/zh-CN/docs/Web/CSS/percentage

WEB前端面试题

第二章 面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none;与visibility: hidden;的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型 考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应 [淘宝无线适配]

面试题：响应式

第三章 面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new操作符具体做了什么

面试题：闭包 【必须会】

面试题：原型链 【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？

面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别 【大厂】

面试题：some和every的区别 【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章 面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章 面试题性能优化篇

Web前端企业面试题

答：

一、display和visibility的相同与不同点

1、相同点：display和visibility都有讲元素隐藏的意思

2、不同点：display是元素隐藏，隐藏的元素不占文档流

而visibility隐藏的元素仍然占文档流

二、display和visibility的属性值

1、display

2、visibility

答：

在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点

for循环

其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组

for循环中可以使用return、break等来中断循环

结果：

forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。

输出结果：

for…in

循环遍历的值都是数据结构的键值

总结一句: for in也可以循环数组但是特别适合遍历对象

结果：

for…of

它是ES6中新增加的语法，用来循环获取一对键值对中的值

循环一个数组

循环一个普通对象（报错）

答：

px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。

所以相对于同一机型来说是一个绝对的长度单位。

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 。

以其父级元素为基准来变化长度。所以其算法不是一个固定的值。

rem：是CSS3新增的一个相对单位（root em，根em） 。

那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。

在移动设备上，我们常常设置

此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。

因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。

那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。

基础篇

1.shift

// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

2.unshift

// 将参数添加到原数组开头，并返回数组的长度 我爱编程网

//注：此方法在ie6.0下

// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠

// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

4.push

// 将参数添加到原数组末尾，并返回数组的长度

5.concat

// 返回一个新数组，是将参数添加到原数组中构成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()

进阶篇

1.forEach

是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。

2.map

map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此

forEach和map对比

相同点

1）都是循环遍历数组中的每一项；

2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；

3）this都是指向调用方法的数组；

4) 只能遍历数组；

不相同点

1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。

2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。

3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。

3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。

理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据

4.find()

返回通过测试的数组的第一个元素的值,

理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法

array.find(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧

5.every

理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)

6.some

理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false

7.reduce

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback

他可以传四个参数:

1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)

2,currentValue:数组中当前被处理的元素

3,index:不啰嗦,自己顾名思义去吧

4,array:返回调用reduce的数组

彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

不同点： 第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；

substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。

所以，一般creadted钩子函数主要是用来初始化数据。

2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例

下面是结果

nihao

取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化

6、Vue中组件之间的传参方式有哪些方式？

Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、props 传参

子组件定义 props 有三种方式:

// 第一种数组方式

// 第二种对象方式

// 第三种对象嵌套对象方式

第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用

父组件传参的俩种方式

第一种静态属性传参

注意：

1、在不定义 props 类型的情况下 props 接受到的均为 String。

2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true

第二种动态属性传参

注意：

1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值

2、会保留传入值的类型

3、如果是表达式则获取到的是表达式的计算结果

二、attrs 和listeners

$attrs

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。

属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）

$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

三、$emit 通知

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值

四、v-model

这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

五、插槽

六、$refs, $root, $parent, $children

$root 获取根组件

$parent 获取父组件

$children 获取子组件(所有的子组件，不保证顺序)

$refs 组件获取组件实例，元素获取元素

七、project / inject

注意：注入的值是非响应的

八、Vuex

这个相当于单独维护的一组数据，就不过多的说了。

watch，computed和methods的关系

1.watch和computed都是以Vue的依赖追踪机制为基础的 ，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

watch和computed各自处理的数据关系场景不同

1. watch 擅长处理的场景： 一个数据影响多个数据

2. computed 擅长处理的场景： 一个数据受多个数据影响

watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值

结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推

computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值

methods和computed的区别例子

注意两次点击computed返回的时间是相同的！！

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据 （不是放在data等对象下的实例数据） ，所以computed只提供了缓存的值，而没有重新计算

只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。

参考：

答：

1、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

2、async await

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档

两者的区别

1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

2、async await与Promise一样，是非阻塞的。

3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。

以上，就是我爱编程网小编给大家带来的Web前端面试的常见面试题汇总（WEB前端面试题）全部内容，希望对大家有所帮助！