VUE面试题_ 字节宝

基本技能部分

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?

(Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。

(Q2) 内核：Trident，Gecko，Presto，Webkit。

Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C 编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

2. 说一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

3. 说下行内元素和块级元素的区别？

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

5. Doctype作用？标准模式与兼容模式各有什么区别?

(Q1) <!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

5. 简述一下你对HTML语义化的理解及常用语义化标签？

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

6. 你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS压缩、图片大小控制，CDN托管，data缓存。

（2）前端模板 JS 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

9. js有哪些内置对象？

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层

结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

24.(实现方式)

25.

26.简述什么是事件流并举例常用事件

事件流描述的是从页面中接收事件的顺序，IE采用事件冒泡流，标准采用事件捕获流，最后addEventLister给出了第三个参数同时支持冒泡与捕获。

1、事件冒泡又叫IE的事件流，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

2、事件捕获的思想是不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。

3、DOM事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

常用事件：(1)单击事件:onclick。 (2)改变事件:onchange。 (3)选中事件:onselect。 (4)获得焦点事件:onfocus。 (5)失去焦点事件:onblur. (6)载人文件事件:onload,’当页面文件载人时产生该事件。 (7)卸载文件事件:onunload。与载人文件事件。 (8)鼠标镇盖事件:onmouseover, (9)鼠标离开事件:onmouseout,

(10)一般事件： ondbclick:鼠标双击事件。 onkeypress:当某个键被按下并且释放时触发，要求页面内必须有激活的对象。 onkeydown:当键盘上某个键被按下时触发的事件，要求页面内必须有激活的对象。 onkeyup:当键盘上某个键被放开时触发的事件，要求页面内必须有激活的对象。 (11)页面相关事件。 onabort:图片在下载时被用户中断时触发的事件。 onbeforeunload:当前页面的内容将要被改变时触发的事件。

27.简述DOM，HTML DOM的区别和联系

htmldom是dom的子集，只用于页面节点dom还包括xml，svg等，DOM万能，API繁琐。HTMLDOM的API使用简单，对核心DOM简化，不是万能。优先使用HTMLDOM，无法使用就用核心dom补充。HTML DOM 定义了访问和操作HTML文档的标准方法。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

28.html5和css3有什么新特性？

HTML 5的新特新

1. 新的内容标签 HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

2. 新的表格体系现在可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。

3. 音频、视频API HTML5允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

4. 画布(Canvas) API 以前在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。到HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。

5. 地理(Geolocation) API HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。

6. 网页存储(Web storage) API HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。

7. 拖拽释放(Drag and drop) API可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。

CSS3 新特性：选择器selector；RGBA和透明度；多栏布局；多背景图；Word Wrap；文字阴影；@font-face属性；圆角(边框半径)border-radius；边框图片；盒阴影box-shadow；盒子大小box-size；媒体查询等

29.（这是正常的题）

30.javascript创建自定义对象的方式？(这是不正常的答案，你看不惯的找这题)

1. 简单对象的创建使用对象字面量的方式{} 创建一个对象（最简单，好理解，推荐使用）

var Cat = {};

Cat.name="kity"; //可以使用“.”的方式定义属性

Cat.age=2;

Cat.sayHello=function(){//可以使用“.”的方式定义对象里的方法

alert("hello" Cat.name ",今年" Cat["age"] "岁了");//可以使用“.”的方式访问属性

}

Cat.sayHello();//调用对象的（方法）函数

2.用构造函数创建

2.1 创建一个对象，相当于new一个类的实例（与2.2方法本质一样的）

functionPerson(){

}//必须先定义一个函数（构造函数）

var personOne=newPerson();//定义一个function，用new关键字去"实例化",

personOne.name="dylan";//可以使用“.”的方式创建/访问属性

personOne.hobby="coding";

personOne.work=function(){

alert(personOne.name "is coding now...");

}

personOne.work();

2.2 可以使用有参构造函数来实现，这样定义更方便，扩展性更强（同2.1）

functionPet(name,age,hobby){ this.name=name;//this作用域：当前对象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫" this.name ",我喜欢" this.hobby ",也是个吃货"); } } var maidou =newPet("麦兜",5,"睡觉");//实例化/创建对象 maidou.eat();//调用eat方法(函数) 3.使用工厂函数方式来创建（Object关键字） varwcDog =new Object(); wcDog.name="旺财"; wcDog.age=3; wcDog.work=function(){ alert("我是" wcDog.name ",汪汪汪......"); } wcDog.work();

4.使用原型对象的方式 prototype关键字

function Dog(){

}

Dog.prototype.name="旺财";

Dog.prototype.eat=function(){

alert(this.name "是个吃货");

}

varwangcai =new Dog();

wangcai.eat();

5.混合模式(原型和构造函数)

functionCar(name,price){

this.name=name;

this.price=price;

}

Car.prototype.sell=function(){

alert("我是" this.name "，我现在卖" this.price "万元");

}

var camry =newCar("凯美瑞",27);

camry.sell();

6.动态原型的方式(可以看作是混合模式的一种特例)

functionCar(name,price){

this.name=name;

this.price=price;

if(typeof Car.sell=="undefined"){

Car.prototype.sell=function(){

alert("我是" this.name "，我现在卖" this.price "万元");

}

Car.sell=true;

}

var camry =newCar("凯美瑞",27);

camry.sell();

框架部分

31.jQuery的美元符号$有什么作用？

其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：

$(document).ready(function(){});

当然你也可以用jQuery来代替$，如下代码：

jQuery(document).ready(function(){});

jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$(“#main”)即选中id为main的元素。

32.body中的onload()函数和jQuery中的document.ready()有什么区别？

onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

33.jquery中$.get()提交和$.post()提交有区别吗？

1 $.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2 get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3 get方式传输的数据大小不能超过2KB 而POST要大的多

4 GET 方式请求的数据会被浏览器缓存起来，因此有安全问题

34.怎样用jQuery编码和解码URL？

在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)

35. jquery中如何来获取或和设置属性？

jQuery中可以用attr()方法来获取和设置元素属性removeAttr() 方法来删除元素属性

36.jQuery中有哪几种类型的选择器？

大概归纳为9种。

(1)基本 #id element .class * selector1,selector2,selectorN

(2)层次选择器：ancestor descendant parent>child prev next prev~siblings

(3)基本过滤器选择器 :first :last :not :even :odd :eq :gt :lt

:header :animated

(4)内容过滤器选择器 :contains :empty :has :parent

(5)可见性过滤器选择器 :hidden :visible

(6)属性过滤器选择器[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN]

(7)子元素过滤器选择器 :nth-child :first-child :last-child :only-child

(8)表单选择器 :input :text :password :radio :checkbox :submit

:image :reset :button :file :hidden

(9)表单过滤器选择器 :enabled :disabled :checked :selected

37.ng-if 跟 ng-show/hide 的区别有哪些？

第一点区别是， ng-if 在后面表达式为 true 的时候才创建这个 dom 节点， ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。

第二点区别是， ng-if 会（隐式地）产生新作用域， ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

这样会导致，在 ng-if 中用基本变量绑定 ng-model ，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

1234	<p>{{name}}</p><div ng-if="true"> <input type="text" ng-model="name"></div>

ng-show 不存在此问题，因为它不自带一级作用域。

避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。

38.ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

36.angular 的数据绑定采用什么机制？详述原理

脏检查机制。

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。

原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。

39.angular 的缺点有哪些？

强约束

导致学习成本较高，对前端不友好。

但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。

不利于 SEO

因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。

一种解决办法是，对于正常用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。

性能问题

作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。

可以用来优化 Angular 应用的性能的办法：

减少监控项（比如对不会变化的数据采用单向绑定）

主动设置索引（指定 track by ，简单类型默认用自身当索引，对象默认使用 $$hashKey ，比如改为 track by item.id ）

降低渲染数据量（比如分页，或者每次取一小部分数据，根据需要再取）

数据扁平化（比如对于树状结构，使用扁平化结构，构建一个 map 和树状数据，对树操作时，由于跟扁平数据同一引用，树状数据变更会同步到原始的扁平数据）

另外，对于Angular1.x ，存在脏检查和模块机制的问题。

40. HTTP状态码知道哪些？（加黑的至少3个）

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 MovedPermanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。原因可能多种

503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）。

41. 线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程。

线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程的区别：每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

1、active-class是哪个组件的属性？嵌套路由怎么定义？

代码语言：javascript复制

答：vue-router模块的router-link组件。

2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

代码语言：javascript复制

答：在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id

3、vue-router有哪几种导航钩子？

代码语言：javascript复制

答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

4、scss是什么？安装使用的步骤是？有哪几大特性？

代码语言：javascript复制

答：预处理css，把css当前函数编写，定义变量,嵌套。先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

代码语言：javascript复制

答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”有哪几大特性:1、可以用变量，例如（$变量名称=值）；2、可以用混合器，例如（）3、可以嵌套

5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

代码语言：javascript复制

答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper

6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

代码语言：javascript复制

答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />

7、axios是什么？怎么使用？描述使用它实现登录功能的流程？

代码语言：javascript复制

答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

8、axios tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

代码语言：javascript复制

答：跨域，添加用户操作，更新操作。

9、什么是RESTful API？怎么使用?

代码语言：javascript复制

答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

10、vuex是什么？怎么使用？哪种功能场景使用它？

代码语言：javascript复制

答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

代码语言：javascript复制

答：一个model view viewModel框架，数据模型model，viewModel连接两个区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷

12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

代码语言：javascript复制

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）钩子函数参数：el、binding

13、说出至少4种vue当中的指令和它的用法？

代码语言：javascript复制

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

14、vue-router是什么？它有哪些组件？

代码语言：javascript复制

答：vue用来写路由一个插件。router-link、router-view

15、导航钩子有哪些？它们有哪些参数？

代码语言：javascript复制

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

16、Vue的双向数据绑定原理是什么？

代码语言：javascript复制

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器(dep)里面添加自己2、自身必须有一个update()方法3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。ps：16题答案同样适合”vue data是怎么实现的？”此面试题。

17、请详细说下你对vue生命周期的理解？

代码语言：javascript复制

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated方法。销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

18、请说下封装 vue 组件的过程？

代码语言：javascript复制

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

19、你是怎么认识vuex的？

代码语言：javascript复制

答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

20、vue-loader是什么？使用它的用途有哪些？

代码语言：javascript复制

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。用途：js可以写es6、style样式可以scss或less、template可以加jade等

21、请说出vue.cli项目中src目录每个文件夹和文件的用法？

代码语言：javascript复制

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

代码语言：javascript复制

答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’第三步：注入到vue的子组件的components属性上面,components:{smithButton}第四步：在template视图view中使用，<smith-button>  </smith-button>问题有：smithButton命名，使用的时候则smith-button。

23、聊聊你对Vue.js的template编译的理解？

代码语言：javascript复制

答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）详情步骤：首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

24、vue的组件是怎么定义的？父组件怎么给子组件传值？

代码语言：javascript复制

答：首先注册vue.components，第一个参数是组件名称，第二个参数是选项。直接绑定一个属性，然后在子组件props里面接收

25、使用过element.ui吗？说下它其中两个组件的使用方法？

代码语言：javascript复制

答：使用过用过一个布局的，它是由24份，它的写法是:span后面带的数字它占24份里面的宽度。:offset是它的间距，后面也是跟数字，也是从24份里面取的。input按钮，标签是el-input，后面type跟上一个属性就是显示不同按钮的类型，有默认的default（默认的）、success（成功的）、warning（警告）、danger（危险）、info（）、primary（）

26、说下你对mvvm的理解？双向绑定的理解?

代码语言：javascript复制

答：mvvm就是vm框架视图、m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是用来实现双向绑定双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

27、说出你所使用过的vue指令

代码语言：javascript复制

答：v-on（监听事件、@change、@click）、v-if（判断的）、v-show（显示/隐藏）、v-bind（绑定属性、:disabled、:src）

28、你觉得怎样的自定义组件是完善的？至少说出4点

代码语言：javascript复制

答：第一点、可以通用第二点、代码尽量简洁第三点、容易修改第四点、功能要多一点

一、请说下具体使用vue的理解？

代码语言：javascript复制

答：1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。4、js的代码无形的规范，团队合作开发代码可阅读性更高。

二、你觉得哪些项目适合vue框架？

代码语言：javascript复制

答：1、数据信息量比较多的，反之类似企业网站就无需此框架了。2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli webpack后的前端目录，非常有利于项目的跨平台部署。

三、怎么理解MVVM模式的这些框架？

代码语言：javascript复制

答：1、M就是Model模型层，存的一个数据对象。2、V就是View视图层，所有的html节点在这一层。3、VM就是ViewModel，它通过data属性连接Model模型层，通过el属性连接View视图层。

四、PC端项目你会在哪些场景使用Vue框架？

代码语言：javascript复制

答：上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。那么vue为什么解决这些问题呢？第一：只需用v-for在view层一个地方遍历数据即可，无需复制一段html代码在js和html两个地方。第二：vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。

vuex 1、vuex有哪几种属性？

代码语言：javascript复制

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module

2、vuex的State特性是？

代码语言：javascript复制

答：一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

3、vuex的Getter特性是？

代码语言：javascript复制

答：一、getters 可以对State进行计算操作，它就是Store的计算属性二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用三、 如果一个状态只在一个组件内使用，是可以不用getters

4、vuex的Mutation特性是？

代码语言：javascript复制

答：一、Action 类似于 mutation，不同在于：二、Action 提交的是 mutation，而不是直接变更状态。三、Action 可以包含任意异步操作

5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

代码语言：javascript复制

答：一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

6、不用Vuex会带来什么问题？

代码语言：javascript复制

答：一、可维护性会下降，你要想修改数据，你得维护三个地方二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

生命周期 1、什么是vue生命周期？

代码语言：javascript复制

答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

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

代码语言：javascript复制

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

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

代码语言：javascript复制

答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？

代码语言：javascript复制

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在哪个周期中就已经完成？答：DOM 渲染在 mounted 中就已经完成了。

6、简单描述每个周期具体适合哪些场景？

代码语言：javascript复制

答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

axios 1、axios的特点有哪些？

代码语言：javascript复制

答：一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API二、它可以拦截请求和响应三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据四、安全性更高，客户端支持防御 XSRF

2、axios有哪些常用方法？

代码语言：javascript复制

答：一、axios.get(url[, config])   //get请求用于列表和信息查询二、axios.delete(url[, config])  //删除三、axios.post(url[, data[, config]])  //post请求用于信息的添加四、axios.put(url[, data[, config]])  //更新操作

3、说下你了解的axios相关配置属性？

代码语言：javascript复制

答：`url`是用于请求的服务器URL
`method`是创建请求时使用的方法,默认是get
`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URL
`transformRequest`允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法
`headers`是即将被发送的自定义请求头headers:{'X-Requested-With':'XMLHttpRequest'},
`params`是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象params:{ID:12345},
`auth`表示应该使用HTTP基础验证，并提供凭据这将设置一个`Authorization`头，覆写掉现有的任意使用`headers`设置的自定义`Authorization`头auth:{

Vue 代码demo运行动画：

situation

一个常见的的场景，

主页 -->前进列表页-->前进详情页，详情页 -->返回主页 -->返回列表页

我们希望，

从详情页 -->返回列表页的时候页面的状态是缓存，不用重新请求数据，提升用户体验。

从列表页 -->返回主页的时候页面，注销掉列表页，以在进入不同的列表页的时候，获取最新的数据。

task

今天让我们来实现这个需求。

在代码的世界里解决问题的方法从来都不止一种。

比如，从数组中找到一个的值索引：

可以用最基础的 for循环遍历，也可以用indexOf这种工具函数，还可以用findIndex forEach等更语义化的高阶函数来遍历。

我参考了大量的文章，爬了官方的文档，之后，找到了好几种办法，下面，让我们来一个个分析。

let's begin ，我们开始吧。?

1.解决掉提需求的人

? emm... ，相对于我们的人生，可能代码会更好掌控吧。

程序员活在自己想象的王国里

我刚接触电脑就发现电脑的妙处，电脑远没有人那么复杂。如果你的程序写得好，你就可以和电脑处好关系，就可以指挥电脑干你想干的事。这个时候你是十足的主宰。每每你坐在电脑面前，你就是在你的王国里巡行，这样的日子简直就是天堂般的日子。电脑里的世界很大，编程人是活在自己想象的王国里。你可以想象到电脑里细微到每一个字节、每一个比特的东西。

-- 雷军(没错就是小米那个雷军)

我很认同雷军的说法，

人生能找到一个热爱的东西很难得，你热爱代码并专注于它的话，

终有一天，

它会以各种各样的方式回报给你：工资，认同感，成就感，和你一起进步，心里共鸣的人。

你若盛开，蝴蝶自来。诸君共勉 (能骗一个相信，就少一个沙雕和我抢妹子?)

2.睡服♂提需求的人

?emm..., 看着镜子里那张的脸，这辈子应该是没办法从脸上得到任何的便利了...

3.keep-alive

keep-alive是 Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。

但是 keep-alive会把其包裹的所有组件都缓存起来。

action

我们把需求分解成2步来实现

1.把需要缓存和不需要缓存的视图组件区分开

思路如下图:

写2个 router-view 出口

代码语言：javascript复制

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">  </router-view></keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

在 Router里定义好需要缓存的视图组件

代码语言：javascript复制

new Router({    routes: [        {            path: '/',            name: 'index',            component: () =import('./views/keep-alive/index.vue'),            meta: {                deepth: 0.5            }        },        {            path: '/list',            name: 'list',            component: () =import('./views/keep-alive/list.vue'),            meta: {                deepth: 1                keepAlive: true             }        },        {            path: '/detail',            name: 'detail',            component: () =import('./views/keep-alive/detail.vue'),            meta: {                deepth: 2            }        }    ]})

2.按需keep-alive

我们从官方文档提供的api入手,

keep-alive组件如果设置了 include ，就只有和 include 匹配的组件会被缓存，

所以思路就是，动态修改 include 数组来实现按需缓存。

代码语言：javascript复制

<keep-alive>
  <router-view :include="include" v-if="$route.meta.keepAlive">  </router-view></keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

让我们在app.vue里监听路由的变化,

代码语言：javascript复制

export default {  name: "app",  data: () =({    include: []  }),  watch: {    $route(to, from) {
      if (to.meta.keepAlive) {        !this.include.includes(to.name) && this.include.push(to.name);      }
      //再根据 deepth 来判断是前进还是后退
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {        var index = this.include.indexOf(from.name);        index !== -1 && this.include.splice(index, 1);      }    }  }};

需要注意的是