《2020年web前端最全面试题及答案【含vue-react】(共45页).docx》由会员分享，可在线阅读，更多相关《2020年web前端最全面试题及答案【含vue-react】(共45页).docx（45页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精选优质文档-倾情为你奉上2020年web前端最全面试题目及答案目录HTML篇1,doctype的作用是什么DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析文档解析类型有：l BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）l CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。IE8还有一种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。2, 这三
2、种模式的区别是什么？l 标准模式(standards mode)：页面按照 HTML 与 CSS 的定义渲染l 怪异模式(quirks mode)模式： 会模拟更旧的浏览器的行为l 近乎标准(almost standards)模式： 会实施了一种表单元格尺寸的怪异行为（与IE7之前的单元格布局方式一致），除此之外符合标准定义3, HTML、XHTML、XML有什么区别l HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散l XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XM
3、L现在市场越来越小了l XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。4, 什么是data-属性？HTML的数据属性，用于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的目的。5, 你对HTML语义化的理解？语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义，比如标签就代表段落，代表正文内容等等。语义化的好处主要有两点：l 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结
4、构，也更为便于团队的开发和维护l 机器友好：带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，语义类还可以支持读屏软件，根据文章可以自动生成目录这对于简书、知乎这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，但是对于功能性的web软件重要性大打折扣，比如一个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。6, HTML5与HTML4的不同之处文件类型声明（）仅有一型：。新的解析顺序：不再基于SGML。l 新的元素：section, video, progress, nav, meter, time, aside, canvas, command
5、, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。l input元素的新类型：date, email, url等等。l 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。l 全域属性：id, tabindex, repeat。l 新的全域属性：contenteditable, contextmenu, draggable, drop
6、zone, hidden, spellcheck。l 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt7有哪些常用的meta标签？meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name。l charset，用于描述HTML文档的编码形式l http-equiv，顾名思义，
7、相当于http的文件头作用,比如下面的代码就可以设置http的缓存过期日期l viewport，移动前端最熟悉不过，Web开发人员可以控制视口的大小和比例l apple-mobile-web-app-status-bar-style,开发过PWA应用的开发者应该很熟悉，为了自定义苹果工具栏的颜色。8, src和href的区别？l src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚
8、本会放在底部而不是头部。l href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。9知道img的srcset的作用是什么？可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。所以，有了这些属性，浏览器会：l 查看设备宽度l 检查 sizes 列
9、表中哪个媒体条件是第一个为真l 查看给予该媒体查询的槽大小l 加载 srcset 列表中引用的最接近所选的槽大小的图像10, 还有哪一个标签能起到跟srcset相似作用？元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的 src 属性中的URL。然后，所选图像呈现在元素占据的空间中11, script标签中defer和async的区别？l defer：浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。l async：同样是异步加载脚本，区别是脚本加载完毕后立即执行
10、，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。12, 有几种前端储存的方式？cookies、localstorage、sessionstorage、Web SQL、IndexedDB13, 这些方式的区别是什么？l cookies： 在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装l localStorage：HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性储存（除非
11、手动删除），大小为5M，兼容IE8+l sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式l Web SQL：2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。l IndexedDB： 是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，
12、用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。CSS篇1, CSS选择器的优先级是怎样的？CSS选择器的优先级是：内联 ID选择器 类选择器 标签选择器到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：l A 的值等于 1 的前提是存在内联样式, 否则 A = 0;l B 的值等于 ID选择器 出现的次数;l C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;l D 的值等于 标签选择器 和 伪元素 出现的总次数 。2,link和import的区别？link属于XHTML标签，而im
13、port是CSS提供的。页面被加载时，link会同时被加载，而import引用的CSS会等到页面被加载完再加载。import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。link方式的样式权重高于import的权重。使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的2,empxrem区别？l px：绝对单位，页面按精确像素展示。l em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。l r
14、em：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持3,块级元素水平居中的方法？l margin:0 auto方法l flex布局，目前主流方法l table方法4, CSS有几种定位方式？l static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。l relative：相对定位，此时的相对是相对于正常文档流的位置。l absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素
15、位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。l fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。l sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的顶屁股。5, 如何理解z-index？CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了positio
16、n值的元素。6, 如何理解层叠上下文？是什么？层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。如何产生？触发一下条件则会产生层叠上下文：根元素 (HTML),z-index 值不为 auto的 绝对/相对定位，一个 z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，l opacity 属性值小于 1 的元素（参考 the specification for opacity）
17、，l transform 属性值不为 none的元素，l mix-blend-mode 属性值不为 normal的元素，l filter值不为“none”的元素，l perspective值不为“none”的元素，l isolation 属性被设置为 isolate的元素，l position: fixed7, 清除浮动有哪些方法？l 空div方法：l Clearfix 方法：上文使用.clearfix类已经提到l overflow: auto或overflow: hidden方法，使用BFC8,你对css sprites的理解，好处是什么？是什么 ？雪碧图也叫CSS精灵， 是一CSS图像合成
18、技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。如何操作？使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。好处：减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）提前加载资源不足：CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接
19、通道搞定9, 你对媒体查询的理解？是什么媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。如何使用？媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式
20、将会生效。10, 你对盒模型的理解是什么？当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成11, 标准盒模型和怪异盒模型有什么区别？在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。因此，标准盒模型下：
21、元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。在怪异盒模型下：元素占据的宽度 = margin-left + width + margin-right虽然现代浏览器默认使用W3C的标准盒模型，但是在
22、不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing12, 谈谈对BFC的理解是什么？书面解释：BFC(Block Formatting Context)这几个英文拆解Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用BFC是指一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.它的
23、作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.如何形成？BFC触发条件:根元素，即HTML元素l position: fixed/absolutel float 不为nonel overflow不为visiblel display的值为inline-block、table-cell、table-caption作用是什么？l 防止margin发生重叠l 两栏布局，防止文字环绕等l 防止元素塌陷13, 为什么有时候人们用translate来改变位置而不是定位？translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（re
24、flow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。14, 伪类和伪元素的区别是什么？是什么？伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。伪元素用于
25、创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。区别其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。我们通过p:before对这段文本添加了额外的元素，通过p:first-child改变了文本的样式。15, 你对flex的理解？web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实
26、现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局JS篇1, 解释下变量提升？JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。2, 理解闭包吗？闭包是什么MDN的解释：闭包是函数和声明该函数的词法环境的组合。按照我的理解就是：闭包 =函数和函数体内可访问的变量总和闭包的作用闭包最大的作用就是隐藏变量，闭包的一大特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结
27、）了之后基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等我们就以私有变量举例，私有变量的实现方法很多，有靠约定的（变量名前加_）,有靠Proxy代理的，也有靠Symbol这种新数据类型的。但是真正广泛流行的其实是使用闭包。3, JavaScript的作用域链理解吗？JavaScript属于静态作用域，即声明的作用域是根据程序正文在编译时就确定的，有时也称为词法作用域。其本质是JavaScript在执行过程中会创造可执行上下文，可执行上下文中的词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，这些引用串联起来一直指向全局的词法环境，因此形
28、成了作用域链。4, ES6模块与CommonJS模块有什么区别？ES6 Module和CommonJS模块的区别：CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似constimport的接口是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。ES6 Module和CommonJS模块的共同点：CommonJS和ES6 Module都可以对引入的对象进
29、行赋值，即对对象内部属性的值进行改变。5,js有哪些类型？JavaScript的类型分为两大类，一类是原始类型，一类是复杂(引用）类型。原始类型:l booleanl nulll undefinedl numberl stringl symbol复杂类型:l Object6, null与undefined的区别是什么？null表示为空，代表此处不应该有值的存在，一个对象可以是null，代表是个空对象，而null本身也是对象。undefined表示不存在，JavaScript是一门动态类型语言，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefine
30、d的意义所在。7, 谈谈你对原型链的理解？这个问题关键在于两个点，一个是原型对象是什么，另一个是原型链是如何形成的原型对象绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创建新对象实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。原型链原因是每个对象都有_proto_属性，此属性指向该对象的构造函数的原型。对象可以通过_proto_与上游的构造函数的原型对象连接起来，而上游的原型对象也有一个_proto_，这样就形成了原型链。8, 谈一谈你对this的了解？this的指向不是在编写时确定的,而是在执行时确定的，同时，this
31、不同的指向在于遵循了一定的规则。首先，在默认情况下，this是指向全局对象的，比如在浏览器就是指向window。其次，如果函数被调用的位置存在上下文对象时，那么函数是被隐式绑定的。再次，显示改变this指向，常见的方法就是call、apply、bind最后，也是优先级最高的绑定 new 绑定。用 new 调用一个构造函数，会创建一个新对象, 在创造这个新对象的过程中,新对象会自动绑定到Person对象的this上，那么 this 自然就指向这个新对象。9, 那么箭头函数的this指向哪里？箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于自己的this,它的所谓的this是捕获
32、其所在上下文的 this 值，作为自己的 this 值,并且由于没有属于自己的this,而箭头函数是不会被new调用的，这个所谓的this也不会被改变.10, async/await是什么？async 函数，就是 Generator 函数的语法糖，它建立在Promises上，并且与所有现有的基于Promise的API兼容。Async声明一个异步函数(async function someName().)自动将常规函数转换成Promise，返回值也是一个Promise对象只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数异步函数内部可以使用awaitAwait暂停异步的功
33、能执行(var result = await someAsyncCall()😉放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果只能与Promise一起使用，不适用与回调只能在async函数内部使用11, async/await相比于Promise的优势？代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调用也会带来额外的阅读负担Promise传递中间值非常麻烦，而async/await几乎是同步的写法，非常优雅错误处理友好，async/await可以用成熟的try/catch，Promise的错误捕获非常冗余调试友
34、好，Promise的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断点，如果你在一个.then代码块中使用调试器的步进(step-over)功能，调试器并不会进入后续的.then代码块，因为调试器只能跟踪同步代码的每一步。12, JavaScript的参数是按照什么方式传递的？基本类型传递方式由于js中存在复杂类型和基本类型,对于基本类型而言,是按值传递的.复杂类型按引用传递?我们将外部a作为一个对象传入test函数.按共享传递复杂类型之所以会产生这种特性,原因就是在传递过程中,对象a先产生了一个副本a,这个副本a并不是深克隆得到的副本a,副本a地址同样指向对象a指向的堆内存
35、.13, 聊一聊如何在JavaScript中实现不可变对象？实现不可变数据有三种主流的方法l 深克隆，但是深克隆的性能非常差，不适合大规模使用l Immutable.js，Immutable.js是自成一体的一套数据结构，性能良好，但是需要学习额外的APIl immer，利用Proxy特性，无需学习额外的api，性能良好14, JavaScript的基本类型和复杂类型是储存在哪里的？基本类型储存在栈中，但是一旦被闭包引用则成为常住内存，会储存在内存堆中。复杂类型会储存在内存堆中。Vue篇1, 你对MVVM的理解?MVVM 模式，顾名思义即 Model-View-ViewModel 模式。它萌芽
36、于2005年微软推出的基于 Windows 的用户界面框架 WPF ，前端最早的 MVVM 框架 knockout 在2010年发布。l Model 层: 对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。l View 层:作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定
37、的声明。l ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。2, MVVM的优缺点?优点:分离视图（View）和模型（Model）,降低代码耦合，提高视图或者逻辑的重用性: 比如视图（View）可
38、以独立于Model变化和修改，一个ViewModel可以绑定不同的View上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑提高可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放缺点:Bug很难被调试: 因为使用双向绑定的模式，当你看到界面异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始
39、出问题的地方就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高3, 你对Vue生命周期的理解？ Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom - 渲染、更新 - 渲染、卸载等一系列过程，我们称这是Vue的生命周期4, 异步请求适合在哪个生命周期调用？官方实例的异步请求是在mounted生命周
40、期中调用的，而实际上也可以在created生命周期中调用5, Vue组件如何通信？l props/$emit+v-on: 通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。l EventBus: 通过EventBus进行信息的发布与订阅l vuex: 是全局数据管理库，可以通过vuex管理全局的数据流l $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以进行跨级的组件通信l provide/inject：以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效，这成为了跨组件
41、通信的基础6, computed和watch有什么区别?computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算computed适用于计算比较消耗性能的计算场景watch:更多的是观察的作用,类似于某些数据的监听回调,用于观察props$emit或者本组件的值,当数据变化时来执行回调进行后续操作无缓存性，页面重新渲染时值不变化也会执行小结:当我们要进行数值计算,而且依赖于其他数据，那么把这个数
42、据设计为computed如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化7, Vue是如何实现双向绑定的?利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在vue3.0中通过Proxy代理对象进行类似的操作。8, Proxy与Object.defineProperty的优劣对比?Proxy的优势如下:l Proxy可以直接监听对象而非属性l Proxy可以直接监听数组的变化l Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object
43、.defineProperty不具备的l Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改l Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利Object.defineProperty的优势如下:l 兼容性比较好9, 你是如何理解Vue的响应式系统的?任何一个 Vue Component 都有一个与之对应的 Watcher 实例。Vue 的 data 上的属性会被添加 getter 和 setter 属性。当 Vue Component render 函数被执行的时候, da
44、ta 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。10, 既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?现代前端框架有两种方式侦测变化,一种是pull一种是pushl pull: 其代表为React,我们可以回忆一下React是如何侦测到变化的,我们通常
45、会用setStateAPI显式更新,然后React会进行一层层的Virtual Dom Diff操作找出差异,然后Patch到DOM上,React从一开始就不知道到底是哪发生了变化,只是知道有变化了,然后再进行比较暴力的Diff操作查找哪发生变化了，另外一个代表就是Angular的脏检查操作。l push: Vue的响应式系统则是push的代表,当Vue程序初始化的时候就会对数据data进行依赖的收集,一但数据发生变化,响应式系统就会立刻得知,因此Vue是一开始就知道是在哪发生变化了,但是这又会产生一个问题,如果你熟悉Vue的响应式系统就知道,通常一个绑定一个数据就需要一个Watcher,一但
46、我们的绑定细粒度过高就会产生大量的Watcher,这会带来内存以及依赖追踪的开销,而细粒度过低会无法精准侦测变化,因此Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式,也就是那套响应式系统,通常我们会第一时间侦测到发生变化的组件,然后在组件内部进行Virtual Dom Diff获取更加具体的差异,而Virtual Dom Diff则是pull操作,Vue是push+pull结合的方式进行变化侦测的11, Vue为什么没有类似于React中shouldComponentUpdate的生命周期？根本原因是Vue与React的变化侦测方式有所不同React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上