面试官常问的web前端问题

- 日理万妓 2023-06-27 11:12 11阅读 0赞

### 1. 标签上 alt与 title属性的区别是什么？ ###

alt ：搜索引擎识别，在图像无法显示时的替代文本；  
title ：元素注释信息，主要给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。

（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。  
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

## ##

### 2. DIV+CSS 布局较 table 有什么优势？ ###

DIV+CSS 布局：速率快，页面体积小，浏览速度快；便于被搜索引擎收录；样式丰富，页面更灵活；便于修改，效率高；

1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；  
2、更好地被搜索引擎收录，大部分 html 页面的样式写入了 CSS 文件中，便于被搜索引擎采集收录；  
3、对浏览者和浏览器更具优势，由于 CSS 富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统 一和不变形；  
4、修改更有效率，由于使用了 DIV+CSS 制作方法，在修改页面的时候更加容易省时，提高工作效率；

（table在企业中极少用！！！）

## ##

### 3. 介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？ ###

有两种， IE 盒子模型、W3C 盒子模型；  
CSS盒模型常用的属性： 内容(content)、填充(padding)、边界(margin)、 边框(border)；  
区 别： IE 的 content 部分把 border 和 padding 计算了进去;

1.网页设计中常用的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。  
2.这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。  
3.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。  
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；  
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

## ##

### 4. CSS 选择符有哪些？ ###

id选择器、类选择器、标签选择器、属性选择器、通配符选择器、子选择器

1.id 选择器（ \#myid）  
2.类选择器（.myclassname）  
3.标签选择器（div,h1,p） ,用逗号分割，可多个  
4.相邻选择器（h1+p） ，兄弟节点  
5.子选择器（ul>li） ，  
6.后代选择器（lia）  
7.通配符选择器（ \* ）  
8.属性选择器（a\[rel=“external”\]） ，jQuery常用  
9.伪类选择器（a:hover,li:nth-child）

### 5. JS 的数据类型有哪些？ ###

数据类型主要包括两部分：  
基本数据类型：Undefined、Null、Boolean、Number 和 String  
引用数据类型：Array 、Object

### 6. null，undefined 的区别? ###

null 表示一个对象被定义了，值为“空值”；  
undefined 表示不存在这个值。

### 7. 描述下 JSON 对象的两个很重要的方法 ###

JSON.parse() //JSON 字符串转换为 JSON 对象  
JSON.stringify() //JSON 对象转化为字符串

### 8. eval 是做什么的？ ###

把对应的字符串解析成js代码并运行（不建议使用，不安全，耗性能）；  
把 json字符串 转换成 json对象 时可用 eval，var obj = eval(’(’+str+’)’)

它的功能是把对应的字符串解析成 JS 代码并运行；  
应该避免使用 eval，不安全，非常耗性能（2 次，一次解析成 js 语句，一次执行）。  
由 JSON 字符串转换为 JSON 对象的时候可以用 eval，var obj = eval(’(’+str+’)’);

### 9. 简述下为何通过 ajax 发送的请求会出现乱码问题，如何解决？ ###

编码格式冲突，直接在传输中文数据前加 encodURL() 编码

乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个 encodeURI()编码，  
例如：encodeURI($("\#fk\_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

### 10.HTML5、CSS3 里面都新增了那些新特性？ ###

新的语义标签  
本地存储  
离线存储 Websocket 2d，3d 变换 Transition,animation 媒体查询新的单位（rem,vw，vh 等）

## ##

### 11.什么是响应式设计？ ###

响应式设计：是关于网站的制作或网页制作的工作，不同的设备有不同的尺寸和不同的功能。  
响应式设计让所有的人能在这些设备上让网站运行正常。  
一部分是媒体查询和不同的视觉效果。一部分是不同的资源（如不同的 Javascript 来处理触摸与点击自动适应屏幕的对比） 。

### 12.为什么我们要弃用 table 标签 ###

table的缺点 ：只有等 table标签 里的内容全部加载完才能显示网页。

table：服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是 table 标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能，所以 table 标签现在我们基本放弃使用了。

### 13.iframe 有哪些缺点 ###

iframe的缺点：阻塞主页面 onload 事件；影响页面并行加载（浏览器限制相同域的链接）；

搜索引擎的检索程序无法解读这种页面，不利于 SEO iframe 和主页面共享连接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载。

使用 iframe 之前需要考虑这两个缺点，如果需要使用 iframe，最好是通过 JavaScript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。

iframe常用属性:

1.frameborder:	是否显示边框，1(yes),0(no)
    2.height:		框架作为一个普通元素的高度，建议在使用css设置。
    3.width:		框架作为一个普通元素的宽度，建议使用css设置。
    4.name:			框架的名称，window.frames[name]时专用的属性。
    5.scrolling:	框架的是否滚动。yes,no,auto。
    6.src：			内框架的地址，可以使页面地址，也可以是图片的地址。
    7.srcdoc: 		用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
    8.sandbox: 		对iframe进行一些列限制，IE10+支持

## ##

### 14.meta viewport 是做什么用的，怎么写？ ###

控制页面在移动端不要缩小显示。

<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

这个标签内的内容表示啥意思呢?

name			为viewport表示供移动设备使用. content定义了viewport的属性.
    width			表示移动设设备下显示的宽度为设备宽度(device-width)
    height			表示移动设设备下显示的宽度为设备宽度.
    user-scalable	表示用户缩放能力, no表示不允许.
    initial-scale	表示设备与视口的缩放比率
    maximum和minimum	分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
    
    这个meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

### 15.json 和 xml 数据的区别 ###

json：轻量级，传递速度快；占带宽小，易压缩；更方便与JavaScript交互，易解析，能更好的数据交互，项目交互中多用于数据交互；对数据的描述性比xml较差；  
xml：重量级；占带宽大；项目交互中多用于配置文件；

1，数据体积方面：xml 是重量级的，json 是轻量级的，传递的速度更快些。  
2，数据传输方面：xml 在传输过程中比较占带宽，json 占带宽少，易于压缩。  
3，数据交互方面：json 与 javascript 的交互更加方便，更容易解析处理，更好的进行数据交互  
4，数据描述方面：json 对数据的描述性比 xml 较差  
5，xml 和 json 都用在项目交互下，xml 多用于做配置文件，json 用于数据交互。

### 16.document.write 和 innerHTML 的区别 ###

document.write ：直接写入页面的内容流，导致页面被重写。  
innerHTML ：写入某个 DOM 节点，不会导致页面全部重绘；

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

### 17.jQuery 库中的 $ 是什么？ ###

$就是jQuery的别称，是jQuery库提供的一个函数。  
可以获取元素

$('#submit').attr('disabled', true);
    
    可以写为：
    
    jquery('#submit').attr('disabled', true);

### 18.$(document).ready()方法和 window.onload 的区别？ ###

$(document).ready() 方法：可在 DOM 载入就绪时就执行，并调用执行绑定的函数；可多次使用不同事件处理程序；  
window.onload 方法：网页中所有的元素(包括元素的所有关联文件)完全加载后才执行；一次只能保存对一个函数的应用；

window.onload 和 $(document).ready()主要有两点区别：

1、执行时机

window.onload：在网页中所有元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。  
$(document).ready()：只要在DOM完全就绪时，就可以调用了，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。

从二者的英文字母可以大概理解上面的话，onload即加载完成，ready即DOM准备就绪。

2、注册事件

$(document).ready()：可以多次使用不同的事件处理程序，

window.onload：一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。

两个window.onload在同一个页面上可能效果会展示不了。

### 19.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ ###

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea  
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote  
空元素：即系没有内容的 HTML元素，例如：br、meta、hr、link、input、img

## ##

### 20.你为什么要使用 jQuery？ ###

jQuery的优点：轻量级框架；选择器强大；DOM操作封装丰富；事件处理机制可靠；Ajax完善；浏览器兼容；支持链式操作、隐式迭代；行为层与结构层分离；支持的插件丰富；jQuery文档丰富。

jquery的优点：

1.轻量级  
　　　　JQuery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。

2.强大的选择器  
　　　　JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

3.出色的DOM操作的封装  
　　　　JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

4.可靠的事件处理机制  
　　　　JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。

5.完善的Ajax  
　　　　JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6.不污染顶级变量  
　　　　JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

7.出色的浏览器兼容性  
　　　　作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

8.链式操作方式  
　　　　JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

9.隐式迭代  
　　　　当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

10.行为层与结构层的分离  
　　　　开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

11.丰富的插件支持  
　　　　JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。

12.完善的文档  
　　　　JQuery的文档非常丰富，现阶段多位英文文档，中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档，例如JQuery的中文API。

13.开源  
　　　　JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。

### 21.jQuery 中的选择器 和 css 中的选择器有区别吗？ ###

jQuery 选择器支持 CSS 里的选择器，jQuery 选择器可用来添加样式和添加相应的行为；  
CSS 中的选择器是只能添加相应的样式

有一定的区别：  
1、首先说两者是属于不同的两门语言，jQuery是属于js的一个框架，jQuery选择器是js里面的选择器，css是另一门不同于js的语言，CSS选择器是css选择器，则两者在根本上是不同的。  
2、但是两者是有交集的，都是作为网页或者浏览器解析的语言，而js可以通过修改浏览器的dom对象来实现对css修改或者是控制。  
3、可以简单的这样区分两者，css选择器用语css当中，js选择器应用于js当中，只不过有时两者使用相同的id标识来选择对象。

jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用 $("")包起来就成了一个jQuery选择器

### 22.web 前端开发，如何提高页面性能优化？ ###

内容方面：  
1.减少 HTTP 请求 (MakeFewerHTTPRequests)  
2.减少 DOM 元素数量 (ReducetheNumberofDOMElements)  
3.使得 Ajax 可缓存 (MakeAjaxCacheable)

针对 CSS：  
1.把 CSS 放到代码页上端 (PutStylesheetsattheTop)  
2.从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)  
3.精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)  
4.避免 CSS 表达式 (AvoidCSSExpressions)

针对 JavaScript ：  
1.脚本放到 HTML 代码页底部 (PutScriptsattheBottom)  
2. 从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)  
3. 精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)  
4. 移除重复脚本 (RemoveDuplicateScripts)

面向图片(Image)：  
1.优化图片  
2 不要在 HTML 中使用缩放图片  
3 使用恰当的图片格式  
4 使用 CSSSprites 技巧对图片优化

前端性能优化  
思路：分析一个页面从输入 URL 到页面加载显示完成的所有步骤，采用 分治法 逐步优化。

1 优化DNS查询  
减少域名：尽量把所有的资源放在一个域名下。  
一个域名同时可以发4（IE8）或 8个请求（Chrome），请求文件少，用1个域名，文件多用多个域名。与3权衡。

2 优化TCP协议  
TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。  
第一次请求不断开，第二次请求复用。  
使用http 2.0版本：多路复用，连接复用率会更高

3 优化发送HTTP请求  
合并JS或CSS文件  
inline image：使用data:url scheme来内连图片  
减小cookie体积，每个请求都会附带cookie，所以不要滥用cookie。  
合理使用CasheControl代替发送HTTP请求  
同时发送多个请求（浏览器自带）IE8可以同时请求下载4个的css文件，Chrome可以同时请求下载8个 。

4 优化接受响应  
设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。  
Gzip压缩大文件 使用macos gzip，npm server gzip gzip 文件名  
其响应头为Content-Encodinging：gzip，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡

5 优化DOCTYPE  
不能不写，不能写错

6 优化CSS、JS请求  
使用CDN：用CDN请求静态资源同时可以增大同时下载数量，内容分发网络（CDN）可以使请求总时间降低，也可以减少cookie  
CSS放在head里：使其尽早下载，因为chrome需要下载完所有的css后才渲染页面  
JS放在body里的最后：尽早显示整个页面，获取节点。

7 使用懒加载  
组件懒加载

const xxx =()=>import('./components/xxx.vue')

路由懒加载

8 优化用户体验  
用户看到哪些内容就请求哪些内容  
加一个loading动画用户会感觉时间变快

9 减少监听器，使用事件委托

<body>
            <ul>
                <li>1</li><li>2</li><li>3</li><li>4</li>
            </ul>
            <script>
                let liList = document.querySelectorAll('li')
    
                // liList[0].onclick = ()=>console.log(1)
                // liList[1].onclick = ()=>console.log(2)
                // liList[2].onclick = ()=>console.log(3)
                // liList[3].onclick = ()=>console.log(4)
                //监听太多
    
                let ul = document.querySelector('ul')
    
                ul.onclick = (e) => {
                    if (e.target.tagName === 'LI') {
                        console.log(e.target.innerText)
    
                    }
                }//减少监听，采用事件委托
            </script>
        </body>

### 23.什么是 Bootstrap?为什么要使用 Bootstrap？ ###

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。  
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以 Bootstrap 被广泛应用。

## ##

### 24.对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？ ###

超小设备手机（<768px）：.col-xs;  
小型设备平板电脑（>=768px）：.col-sm;  
中型设备台式电脑（>=992px）：.col-md;  
大型设备台式电脑（>=1200px）：.col-lg;

### 25.什么是 Bootstrap 网格系统（Grid System）？ ###

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

### 26.Bootstrap 网格系统列与列之间的间隙宽度是多少？ ###

间隙宽度为 30px（一个列的每边分别是 15px）。

### 27.介绍一下 easyui 的布局 ###

easyui：分为上，中，下，左，  
右面板 一般在工作中使用上（企业 logo,登录,退出）；  
左（菜单）；  
中（展示数据）；

### 28.Easyui 如何实现表单验证 ###

提供了一个 validatebox 插件来验证一个表单， input 表单根据 validType 属性来应用验证；  
validType="email"邮箱验证； required=“true” 必填项 ；

### 29.Easyui 常用的组件有哪些？ ###

datagrid：数据表格 ；  
window：窗口 ；  
form：表单 ；  
layout：布局 ；  
tabs：选项卡 ；  
according：折叠面板 ；  
combobox：下拉列表；

### 30.Vue.js 介绍 ###

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。  
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和 组合的视图组件。核心是一个响应的数据绑定系统。

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API； Vue.js 是一个构建数据驱动的 Web 界面的库。 Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关 注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统 支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

### 31.使用 Vue 的好处 ###

vue 两大特点：响应式编程、组件化 ；  
vue 的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快

### 32.MVVM 定义 ###

MVVM 是 Model-View-ViewModel 的简写，模型-视图-视图模型。  
【模型】指的是后端传递的数据（数据：json）。  
【视图】指的是所看到的页面。  
【视图模型】mvvm 模式的核心，它是连接 view 和 model 的桥梁。  
有两个方向：  
将【模型】转化成【视图】：即将后端传递的数据转化成所看到的页面（将后端Ajax数据 渲染 到前端视图）。实现的方式是：数据绑定。  
将【视图】转化成【模型】：即将所看到的页面转化成后端的数据。 实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。

总结：在 MVVM 的框架下视图和模型是不能直接通信的。  
它们通过 ViewModel 来通信，ViewModel 通常要实现一个 observer 观察者，当数据发生变化，ViewModel 能够监听到数据 的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这 实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信

### 33.Vue 的生命周期（重点） ###

beforeCreate（创建前） 在数据观测和初始化事件还未开始；

created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来 ；

beforeMount（载入前） 在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里 面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。

mounted（载入后） 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态， 不会触发附加的重渲染过程。

updated（更新后）：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行 依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期 间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端 渲染期间不被调用。

###    34.Vue 的响应式原理 ###

当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。  
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖， 之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

### 35.第一次页面加载会触发哪几个钩子？ ###

触发这几个 beforeCreate、created、beforeMount、mounted ，并在 mounted 的时候 DOM 渲染完成

### 36.为什么vue 中 data 必须是一个函数？ ###

对象为引用类型，当重用组件时，由于数据对象都指向同一个 data 对象，当在一个组件中修改 data 时，其他重用的组件中的 data 会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object 的实例），引用地址不同，则不会出现这个问题。

### 37.vue 中做数据渲染的时候如何保证将数据原样输出？ ###

v-text：将数据输出到元素内部，如果输出的数据有 HTML代码，会作为普通文本输出；  
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染  
\{ \{\}\}：插值表达式，可以直接获取 Vue 实例中定义的数据或函数，使用插值表达式的时候，值可能闪烁；而使用 v-html、v-text 不 会闪烁，有值就显示，没值就隐藏

### 38.active-class 是哪个组件的属性？ ###

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

### 39.vue-router 有哪几种导航钩子？ ###

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

### 40. $route 和 $router 的区别 ###

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数；  
$router 是“路由实例” 对象包括了路由的跳转方法，钩子函数等

### 41.vue 几种常用的指令 ###

v-for 、 v-if 、v-else、v-bind（绑定属性，简写 ：）、v-on（事件绑定）、v-show、

### 42.v-if 和 v-show 区别 ###

v-if 按照条件是否渲染，v-show 是 display 的 block（满足） 或 none（不满足）

### 43.vue 常用的修饰符？ ###

.prevent : 提交事件不再重载页面；  
.stop : 阻止单击事件冒泡；  
.self : 当事件发生在该元素本身而不是子元素的时候会触发；  
.capture : 事件侦听，事件发生的时候会调用；

### 44.vue-loader 是什么？使用它的用途有哪些？ ###

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

### 45.computed、watch、methods 的区别 ###

computed 计算属性：用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

watch 监听的是你定义的变量，当你定义的变量的值发生变化时，调用对应的方法。就好在 div 写一个表达式 name， data 里写入 num 和 lastname、firstname，在 watch 里当 num 的值发生变化时，就会调用 num 的方法，方法里面的形参对应的是 num 的新值和旧值，计算属性计算的是 Name 依赖的值,它不能计算在 data 中已经定义过的变量。

methods 方法，函数，绑定事件调用；不会使用缓存

### 46.什么是 js 的冒泡？Vue 中如何阻止冒泡事件？ ###

js 冒泡：当父元素内多级子元素绑定了同一个事件，js 会依次从内往外或者从外往内，执行每个元素的该事件，从而引 发冒泡 ；  
js 解决冒泡：event.stopPropagation()  
vue 解决冒泡： 事件.stop,例如：@click.stop="",@mouseover.stop=""

### 47.vue 组件通信 ###

1.父组件与子组件传值 ，父组件传给子组件：子组件通过 props 方法接受数据；子组件传给父组件：$emit 方法传递参数 ；  
2.非父子组件间的数据传递，兄弟组件传值 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件；  
3.也可使用 vuex；

### 48.<keep-alive></keep-alive>的作用是什么？ ###

<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就 可以对列表组件使用 <keep-alive></keep-alive> 进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

### 49.$nextTick 是什么？ ###

vue 实现响应式并不是数据发生变化后 dom 立即变化，而是按照一定的策略来进行 dom 更新。  
$nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

### 50.Vue 子组件调用父组件的方法 ###

直接在子组件中通过 this.$parent.event 来调用父组件的方法 ；  
在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件就行了。

### 51.Promise 对象是什么？ ###

1.Promise 是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从 语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。promise 对象是一个构造函数，用来生成 Promise 实例；  
2.promise 的两个特点 对象状态不受外界影响 && 一旦状态改变，就不会再变，任何时候都可以得到结果  
（pending 状态–>fulfilled ||pending–>rejected）

### 52.axios 的特点有哪些？ ###

1、axios 是一个基于 promise 的 HTTP 库，支持 promise 的所有 API；  
2、它可以拦截请求和响应；  
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为 json 类型的数据；  
4、它安全性更高，客户端支持防御 XSRF；

### 53.vue 中的 ref 是什么？ ###

ref 被用来给元素或子组件注册引用信息。  
引用信息将会注册在父组件的 $refs 对象上。  
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

### 54.vue 如何兼容 ie ###

babel-polyfill 插件

### 55.页面刷新 vuex 被清空解决办法？ ###

1.localStorage 存储到本地再回去  
2.重新获取接口获取数据

### 56.Vue 与 Angular 以及 React 的区别？ ###

1、 Vue与 AngularJS 的区别：  
相同点：  
都支持指令：内置指令和自定义指令；  
都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。  
不同点：  
AngularJS 的学习成本高，比如增加了 DependencyInjection 特性；Vue.js 本身提供的 API 都比较简单、直观；  
AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢；Vue.js 基于依赖追踪观察，使用异步队列更新，所有数据独立触发。

2、 Vue与 React 的区别：  
相同点：  
React 采用特殊的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 特殊文件格式，两者都需要编译后使用；  
都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可让开发者定制化地去处理需求；  
都不内置列数 AJAX、Route 等功能到核心包；以插件的方式加载；在组件开发中都支持 mixins 的特性。  
不同点：  
React 采用的 VirtualDOM 会对渲染出来的结果做脏检查；Vue.js 在提供了指令，过滤器等，可方便、快捷地操作 Virtual DOM。

### 57.localstorage 和 sessionstorage 是什么?区别是什么? ###

localstorage 和 sessionstorage 一样都用来存储客户端临时信息的对象，都只能存储字符串类型。  
区别:  
localstorage 生命周期永久，除非用户在浏览器提供的 UI 上清除 localstorage 信息，否则这些信息将永远存在。  
sessionstorage 生命周期为当前窗口或标签，当窗口或标签被永久关闭，所有通过 sessionstorage 存储的数据也被清空。

不同浏览器无法共享 localstorage 或 sessionstorage 中的信息。  
相同浏览器的不同页面可以共享相同的 localstorage（页面属于相同 的域名和端口），但是不同页面或标签间无法共享 sessionstorage。  
这里需要注意的是，页面及标签仅指顶级窗口，如果一个标签页包含多个 iframe 标签他们属于同源页面，那么他们之间是可以共享 sessionstorage 的。

### 58.为什么要进行前后端分离？前后端分离的优缺点？ ###

前后端分离的优点：  
前端：专门负责前端页面和特效的编写；追求页面美观、页面流畅、页面兼容；  
后端：专门负责后端业务逻辑的处理；追求高并发、高可用、高性能，各自负责各自的领域，提高开发效率；

前后端分离的缺点：  
1 、当接口发生改变的时候，前后端都需要改变 ；  
2、 当发生异常的时候，前后端需要联调；（联调非常浪费时间！)

### 59.ElementUI 的计数器组件怎么使用？ ###

首先引入 ui 框架，然后放的 vue 里面写 <el-input-num></el-input-num>

### 60.ElementUI 的表单组件怎么使用？它有哪些属性？ ###

先写 el-form 组件，里面写 el-form-item 用来放输入框，

例如用户名和密码那些。

属性：  
el-from 属性： ref、rules，绑定：model  
el-form-item 属性： prop 用来定义一个该输入框对应的验证规则

直接查官网就行！

### 61.ElementUI 的表单验证怎么实现？ ###

表单验证：  
一、在一开始 el-form 中绑定:model=“a”，遵守一个规则:rules=“规则名 b”，然后:ref 跟之前的 a 一样值，要遵守规则的数据名。 二、在 data 中定义 a，里面放表单的所有数据。  
三、在 data 属性中定义 rules 规则，例如：必须填写就是 required:true，最小最大就是 min 和 max。  
四、里面放 el-form-item，上面定义 prop 取一个名字等于什么，rules 中用这个 prop 里面定义的名字作为规则属性。  
五、若要自定义规则，首先在 rules 的规则中定义 validata 属性，它的值就是自定义规则的名称，然后在 data 里写 var 自定义规 则名称 =(rule,value,callback)=> 如果校验正确就返回 callback()，校验错误就返回 callback(neError(’\*\*\*有误！’))

直接查官网就行！

### 62.ElementUI 的表格组件怎么使用？它有哪些属性？ ###

用一个 <el-table></el-table> 这个是最外面的上面，里面用 <el-table-row></el-table-row> 。  
属性：  
el-table 组件的 data 用来获取数据；  
每一行 el-table-row 的数据通过 prop 属性。