js

1.let 、const 、var 的区别

答:var会挂载到window，会存在全局变量污染，会存在变量提升，而let、const不会

let、const同一作用域内不可声明同变量、var可以  (特别说明，let其实也会变量提升，但是提升之后会存在一个暂时性死区，虽然提升了但是不可以使用)

const声明的是一个常量声明之后值不可以修改，如果声明的是一个对象，属性值是可以改变的

2.call、bind、apply的区别

答：三者的主要作用都是改变this的指向，就是在用法上有所区别，call和apply是立即执行的，主要区别是在传递参数上不同，call后面传递的参数是以逗号的形式分开的，apply传递的参数是数组形式，bind返回的是一个函数形式，如果要执行，则后面要再加一个小括号，例如：bind(obj,参数1,参数2,)(),bind只能以逗号分隔形式，不能是数组形式。

3.for in 和 for of的区别

答：在对数组或对象进行遍历时，我们经常会使用这两种方法，那么这两张方法之间的区别就是它们两种都可以遍历，不过for in遍历的是数组的索引 (index),而for in 遍历的是数组元素值(value)    for in 更适合遍历对象，当然也可以遍历数组。

4.你对原型链的理解

答：每个函数都有prototype属性，改属性指向原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。原型链：访问一个对象的属性时，如果改对象内部不存在这个属性，那么就会沿着它的__proto__属性所指向的那个对象(父对象)里找，直到为null为止，这样一层一层的就构成了原型链。主要解决了继承的问题。

5.函数柯力化

答：就是一个高阶函数的使用方法，假如一个函数接受三个参数并且计算结果输出，柯力化之后就是每个函数里只接收一个值，并把接受的结果返回，renturn return return.

第一个优点入口单一，便于测试与复用。

第二个就是易于定位测试bug，可以准确定位到那个参数在那个环节出了问题。

坏处主要就是函数嵌套函数，嵌套的层级太多了，占用内存，效率低，毕竟每个function都会生成一个单独的作用域，都会在调用栈中占据一块内存空间。

6.重绘和回流(也叫重绘和重排)

答：当DOM的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘。

就是当我们对DOM结构修改引发DOM几何尺寸变化的时候，会发生回流的过程。比如一下情况：一个DOM元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border等等，使DOM节点发生增减或者移动都会导致回流。重绘只会改变某个DOM，比如某个元素的颜色，值背景、字体颜色等等，发生改变会发生重绘，所以我们要尽量避免回流，浪费资源。

总结：重绘不一定会导致回流，但是回流一定会发生重绘。

7.事件循环机制

答：是js的一个底层运行原理，js是单线程的，但是也有一些耗时任务，会影响执行效率，代码都在主线程中执行，当遇见像ajax请求，setTimeout定时器时会单独开启异步线程，异步线程耗时之后会推入异步队列中等待执行，然后当主线程执行完毕之后，会到异步队列中取出到主线程中执行，然后再去异步队列中取第二个，这样来回取的过程就是事件循环。

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

1.箭头函数不能作为构造函数使用。普通函数可以用于构造函数，以创建对象实例。

2.箭头函数自身没有this，它的this是父级普通函数的this。普通函数中，this总是指向调用它的对象如果用作构造函数，它指向创建的对象实例。

9.js事件代理

JS事件代理就是通过给父级元素(例如：ul)绑定事件，不给子级元素(例如：li)绑定事件，然后当点击子级元素时，通过事件冒泡机制在其绑定的父元素上出发事件处理函数，主要目的是为了提升性能，因为我不用给每个子级元素绑定事件，只给父级元素绑定一次就好了，在原生js里面是通过event对象的targe属性实现。

10.ES6新特性有哪些

1.let、const

2.箭头函数

3.解构赋值

4.class类语法糖，class(类)作为对象的模块被引入，可以通过class关键字定义类。class的本质是function.他可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

5.import export模块化开发

6.模板字符串

7.内置对象新增API：

Array.from()返回数组，该方法可以将类数组对象转换为数组结构

Array.prototype.fill()数组的填充方法

Array.prototype.includes()判断数组是否包含某值

String.prototype.startsWith()判断字符串是否以括号里的内容开头，返回boolean值

String.prototype.endsWith()判断字符串是否以括号里的内容结尾，返回值是boolean值。

11.你在项目中做过那些优化

1.一些定时器，事件监听(addEventListener)要在销毁期生命钩子结束掉

2.公共组件的封装。公共过滤方法的封装。

3.没有使用的变量要删除

4.图片懒加载

5.路由懒加载

6.第三方按需加载

7.webpack对图片进行压缩。对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用image-webpack-loader来压缩图片。

12.单线程和多线程的区别

什么是进程？

答：当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所用到的内存和系统资源。而一个进程又是由多个线程所组成的。

什么是线程？

答：线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针，程序计数器等)，但代码区是共享的，即不同的线程可以执行同样的函数。

什么是多线程？

多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个线程创建多个并行执行的线程来完成各自的任务。

多线程的好处：

可以提高CPU的利用率。在多线程程序中，一个线程必须等待的时候，CPU可以运行其它的线程而不是等待，这样就大大提高了程序的效率。

13.同步和异步的理解

同步就可以说是代码是从上往下执行的，异步可以认为成有些代码并行执行的，耗时的任务，不会阻塞后面的代码执行。
解决异步的方案主要有三个：
1.回调函数                                                                                                                           2.promise
3.asycn和 await  
这一块主要涉及到了 js 的运行机制，那些异步的任务都开启了异步的现成队列来处理，最后放到异步队列里边，主线程执行完毕后从异步队列里面去除最靠前的执行，就是事件循环机制
( eventLoop )

14.说一说this指向

this存在的场景有全局和函数，在全局执行环境中无论是否在严格模式下，(在任何函数体外部)'this'都指向全局对象。在函数中访问this,函数的调用方式决定'this'的值。在全局环境中调用一个函数，函数内部的this指向的是全局变刘昂widow，通过一个对象来调用其内部的一个方法，该方法的执行上下文中的this指向对象本身。

普通函数this指向：当函数被正常调用事，在严格模式下，this值是undefined,非严格模式下this指向的是全局对象window;通过一个对象来调用其内部的一个方法，该方法的this指向对象本身。new关键字构建好了一个新对象，并且构造函数中的this其实就是新对象本身。嵌套函数中的this不会继承外层函数的this值。

箭头函数this指向：箭头函数并不会创建其自身的执行上下文，所以箭头函数中的htis取决于它的外部函数。

15.说一说new会发生什么

'new'关键字会进行如下的操作

1、创建一个空的javaScript对象即'{}';

2、为创建的对象添加__proto__，将该属性链接至构建函数的原型对象；

3、将步骤1新创建的对象作为'this'的上下文

4、如果改函数没有返回对象，则返回'this'。

css3

1.如何实现一个div垂直居中

(如果是一个父div包裹一个子div让子div垂直居中的话直接在父级div加上相对定位也是可以完成的)

答：

第一种：通过给div设置绝对定位，并且left、right、top、bottom设置为0，margin:auto既可以水平垂直居中。

第二种：通过给div设置绝对定位，left为50%，top为50%，再给div设置距左是自身的一半即:margin-left:自身宽度/2，margin-top:自身高度/2

第三种：通过给div设置绝对定位，left为50%，top为50%，再给div设置平移即：transform:translate3d(-50%,-50%,0)

第四种：flex布局：给父级设置display:flex,并且设置父级的水平居中justify-content:centen,并且给父级div设置垂直居中align-items:center即可。

2.css3新特性

border-color:为边框设置多种颜色

border-radius:圆角边框

box-shadow:阴影效果

background-zise:置顶背景图图片尺寸

text-shadow:文本阴影

主要就说这些就差不多了，不会细问。

2.什么是BFC

答：它就是一个block format content块级格式化上下文，是一个布局里面的概念，把一个盒子设置成bfc之后，里面无论怎么布局，都不会影响外面的变动，另外如果是一个bfc盒子，浮动的元素也会参数计算。用它可以解决一些布局方面的问题，比方说 margin重叠、高度坍塌等。loverflow:hidden.float.display:inline-block

3.rem和em的区别

答：rem和em都是相对单位，主要参考的标签不同：rem是相对于跟字号，即相对于<html>标签的font-size实现的，浏览器字号的font-size:16px。em：是相对于父元素标签的字号，和百分百类似，%也是相对于父级的，只不过%相对于父级宽度得，而em相对于父级字号的。

HTML5

vue

1.父子组件生命周期执行顺序

答：父beforeCreate->父created->子beforeCreate->子created->子mounted->父mounted

2.Vue路由实现原理

答：前端路由实现原理主要通过以下两种技术实现的。

第一种：利用H5的history.pushState和history.replaceState来实现，不同之处在于pushState会增加一条新的历史记录，而replacestate则会替换当前的历史记录。

第二种：利用url的hash实现，我们经常在url中看到#。这个#有两种情况，一个是我们所谓的描点，路由里的#不叫描点，我们称之为hash,我们说的就是hash，主要利用监听哈希值的变化来触发事件，hashchange事件来做页面布局更新。

总结：hash方案兼容性好，而B5的history主要针对高级浏览器。

3.说一说你对diff算法的理解

答：diff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，所以时间复杂度只有0(n)。

diff算法在很多场景下都有应用，例如在vue虚拟dom渲染成真实dom的新旧VNode节点比较更新时，就用到了这个算法。diff算法有两个比较显著的特点：比较只会在同一级进行，不会跨层级比较。在diff比较过程中，循环从两边向中间收拢。

4.你对MVVM的理解

答：目前的主流框架都是MVVM模式的。MVVM里面的M就是数据层V就是vie视图层，中间通过一个(viewmodel)进行了一个双向绑定。能进行dom监听和数据绑定。里面是通过Object.defineProperty对当前组件中的data的所有属性添加了get和set方法，这样的话。形成了数据驱动视图，而且视图层和数据层就相互分离，便于维护了，只要修改了数据层视图层就发生变化，如果不变的话，可以使用this.$set方法来进行。

5.Vue最大的特点，核心是什么

答：Vue最大的特点就是"组件化"和"数据驱动"组件化就是可以将页面和页面中可复用的元素都看做组件，写页面的过程，就是写组件，然后页面是由这些组件"拼接"起来的组件树，数据驱动就是让我们只关注数据层，只要数据变化，页面(即视图层)会自动更新，至于如何操作DOM完成交由vue去完成，咱们只关注数据，数据发生改变视图层就自动发生改变。

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

答：v-if和v-show都可以显示与隐藏一个元素，但是有本质区别v-if是惰性的，只要值为false就不会加载对于元素，为true才动态加载对于元素。v-show无论为true和为false都会加载对于html代码，但为false时会解析为display:none隐藏不在页面显示，但为true时页面上用display:block显示其效果。适用场景：切换频繁场景用v-show，切换不频繁适用v-if。

7.说说你对vuex的理解

答：vuex是一个状态管理工具，主要有五个核心属性。

1、state: vuex的基本数据，用来存储变量；
2、getters: 从基本数据（state）派生的数据，相当于state的计算属性；
3、mutations: 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mution 都有一个字符串的事件类型（type）和一个回调函数（handler）。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数，提交载荷作为第二个参数。
4、action: 和mution的功能大致相同，不同之处在于 ①Action提交的是mution，而不是直接变更状态，②Action可以包含任意异步操作。
5、modules: 模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。
Vuex的用法：
新建vue项目testAPP —> 在testApp中建store文件 —> store文件下又有mudoules 文件夹和 getter.js 和 index.js —> store文件下建立user.js。

8.项目中vue的按钮权限是如何进行控制的

答：项目中一般创建一个directives文件夹，在里面通过Vue.directive创建一个控制按钮是否显示的指令，其实就是登录的时候，后端会通过接口返回一个，当前用户具有的所有按钮的权限标识数组；然后我这边，把自定义指令定义中每个按钮上，穿上一个当前按钮的权限标识，然后指令中的inserted钩子函数里面，来判断这个权限标识中是否在后端返回的标识数组中，如果在就操作按钮正常显示，不在就隐藏。

9.Vue为什么data必须是一个函数

答：因为一个组件是可以复用的，但是他们的data是私有的如果在里面直接返回一个对象，而不是函数的话，在组件复用的时候就会影响其他的组件，而我们以函数的方式返回，就是一个新的data对象，在堆内存里面指向的就是不同的空间地址，就不会影响了。