常见的面试题（一）

1.回流和重绘

什么是回流

当render tree锤(渲染树)中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

2.vue组件传参

传子传参通过props接收数据接受的数据和data中的数据一样可以直接挂载到实例中

子传父通过自定义事件，在子组件中通过$emit接受

兄弟之间通过一个空的vue实例作为事件中心通过，用它来触发事件和监听事件，来实现组建之间的通信 ，用$on监听事件$emit来触发事件

$children 获取子组件实例

$parent   获取父组件实例

3.普通函数和箭头函数的区别

普通函数的写法 function(){}

普通函数this指向函数运行时所属的对象

This不指向函数本身 也不值向函数所在的作用域 而是指向调用函数的对象

在全局下指向window

This在赋值给某个事件时只向事件所属的对象

This在对象方法中使用时指向方法所属的对象

This在闭包中指向window

箭头函数可以用 ()=>{}方式定义

当只有一个参数时（）可以省略

只有一行代码时｛｝可以省略

如果这一行代码是返回值时return 可以省略

箭头函数的this指向

          箭头函数指向定义它的地方而不指向调用它的地方此时this是静态的

          箭头函数this永远指向父级作用域所属的对象

4.var  let  const 的区别

Var 定义全局和局部变量

Let const 会形成块级作用域只在自己的代码块中起作用

Let const 会形成暂时性死区

Var 存在变量提升 let const 不存在变量提升

Var 可以修改值可以重复声明和重新赋值

Let 可以修改值 const 不可以修改值

Let 和 const 都不可以重复声明

5.说说你对闭包的理解

函数嵌套函数被称为闭包函数

       想要获取函数内部的变量就要使用闭包函数

       另一个就是让这些变量始终保存在内存中

缺点是

       不能滥用闭包应为这些变量始终保持在内存中可能造成网页性能问题

       在ie中可能造成内存泄漏

       解决方法是在退出函数之前把不用的局部变量全部删除

6.vue生命周期

vue生命周期是指vue是对象从创建到销毁的过程。

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

7.什么是原型链

由于—proto—是任何对象都有的属性，是一个指针指向构造函数的原型对象prototype，而该构造函数也有—proto—指向该构造函数所继承对象的原型对象，以此类推会形成一条—proto—连起来的链条该链条就是原型链，递归访问到头的值是null。

8.Vue是如何实现双向绑定的?

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

9.Vue中hash模式和history模式的区别

在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。

Vue底层对它们的实现方式不同:
          hash模式是依靠onhashchange事件(监听location.hash的改变)
          history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。

10.组件中的data为什么是一个函数？

如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
 

11.说说你对spa单页面应用的理解

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

12.浏览器输入url到页面加载全过程

            1、浏览器构建HTTP Request请求

　     　2、网络传输

　     　3、服务器构建HTTP Response  响应

　     　4、网络传输

　　     5、浏览器渲染页面

13.Watch和computed的区别

computed

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch

1. 不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

14.v-if和v-show的区别

v-if    控制元素的显示隐藏 控制dom的移除和渲染

v-show 控制元素的显示隐藏 控制样式display :none

v-if是惰性的在渲染之初只有条件为真时才会渲染条件块

v-show就比较简单不管条件为真为假元素都会被渲染并且只是简单的基于css进行切换

V-if有更高的切换开销如果要频繁切换用v-show比较好，如果运行时条件很少改变则用show比较好

15.get 和 post的区别

get和post请求都是在建立好TCP连接(也就是三次握手完成之后)的基础上开始传输数据的请求方式表现上的区别：

Get 无害 可以收为书签 能被缓存

Post 不能被收为书签 不能缓存

GET - 参数会保留在浏览器历史记录中、长度限制。

Get  数据在 URL 中对所有人都是可见的。
POST - 参数不会保留在浏览器历史记录中、长度无限制。
但长度限制并不是出自HTTP协议的规定，而是因为浏览器对URL有长度限制

GET产生一个TCP数据包；POST产生两个TCP数据包

POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

16.axios的原理，基于什么实现的

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios还是属于 XMLHttpRequest， 因此需要实现一个ajax；还需要一个promise对象来对结果进行处理。

17.NextTick 是做什么的

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

18.Vue 的双向数据绑定原理是什么？

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 变更的双向绑定效果。

19.route 和 router 的区别

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

20.什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数 据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组 件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化 会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务 逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态 维护完全由 MVVM 来统一管理。