2021前端 Vue 面试题

W3C官网学习最新的ES6

MVVM

M是 Model 层，V是视图层 ViewModel是View和Model层的桥梁，model数据会绑定到viewModel层并自动将数据渲染到View视图中，视图变化的时候会通知viewModel层更新数据。

防抖和节流：

防抖：就是一定时间内，只会执行最后一次任务；

频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

节流：就是一定时间内，只执行一次

鼠标不断点击触发，mousedown(单位时间内只触发一次)

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

回流

原理： 当render树的一部分或者全部因为大小边距或其他原因发生页面布局的改变，需要重新绘制页面的时候叫做回流

重绘

原理：当元素一部分属性发生变化，如背景图片改变文字颜色改变等，不导致页面布局发生改变而需要重新渲染的过程叫做重绘

Es6新增

let／const

let :

1.不存在变量提升
2.暂时性死区
3.不允许重复声明，同一作用域内只能声明一次
4.新增的块级作用域 , 只要有花括号 就是一个块级作用域

const

用来声明常量，其使用规则除了声明之后不能修改之外，其他特性和let一样

对象方法函数的写法

可以直接省略function

var obj={
song(){
alert(‘我在唱歌’);
}
}

includes(str,start) 判断字符串中,是否包含某个字符 (第二个参数表示从第几位开始)

字符串拼接加但反引

${变量}

ES6箭头函数

(参数1, 参数2, …, 参数N) => { 函数体 } 如果只有一个参数可以省略括号 如果直接有返回值可以省略花括号

如果在箭头函数中使用this, 会向上一级作用域中进行查找this,即宿主对象中查

this的指向

函数调用模式 this —> window 函数名()

方法调用模式 this —> 调用方法的对象 对象.方法名() obj ={say:function(){console.log(this)}} 谁调用就指向谁

构造函数调用模式 this —> 创建出来的实例 new 函数名()

在元素事件中this----->指向当前事件对象

箭头函数中this没有明确指向,会向上一级(宿主对象)寻找

解构赋值

var [a,b,c] = [1,2,3]; // 数组
var {age,name,like} = {name:“admin”,age:18,sex:true}

Symbol数据类型

Symbol 数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。

场景：Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性

set集合

返回值是一个新的Set对象。

去除数组重复的值

map集合

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

可以使用for of 来遍历 可以遍历出它的每一个值

…语法

将字符串或者是数组一些类型拆分

模块化

ES6

导入 import 自定义模块名 from " 引入的地址 "

暴露 export default { }

支持解构赋值，这样就可以按需引入

import是编译时调用，所以必须放在文件开头

import 是ES6语法 所以要在浏览器兼容的话必须将ES6 转成ES5 import 语法也会被转成 require语法

引入复杂数据类型时 数据浅拷贝该对象

导入 const 自定义模块名 = require ( " 引入地址 " )

暴露 module export = { }

call:

第一个参数是 修改的this指向，第二个参数就是想要传入的参数

如果不传参 或者是第一个参数是 null 或者是 undefined 它都指向window

apply：

它基本的形式跟call 差不多 唯一的区别在于传参的方式，在第二个参数是以数组形式传入进去

bind：

第一个参数也是改变的this的执向，传参也是一样，只不过跟他们两个的区别在于，它们都是自动执行的，而bind需要手动执行，bind不兼容IE6~8

清除浮动

1.style="clear:both;

2.使用after伪类 里面设置一些样式

3.设置overflow为hidden或者auto

同步和异步的区别是什么？

1、同步会阻塞代码执行，而异步不会。

​ 就比如alert是同步，setTimeout是异步。

​ 同步就是在一个事件执行时，只有等它结束了才可以拿到信息，继续向下执行

​ 异步是不需要任何等下去，直接执行下面的操作不管其它的状态有结果就返回，这样提升效率，但是也会造成很多困扰，像ajax 就是异步操作，需要通过promis来获得结果处理相对事件

js运行机制

单线程异步，单线程就意味着它的任务都是在前一个任务结束之后，在执行后面一个，这样非常影响性能 ， 所以才有了异步和同步

1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

2. 同步任务会直接进入主线程依次执行；

3. 异步任务会再分为宏任务和微任务；

4. 如果同步代码执行完毕后，在将异步微任务调到主线程

   微任务结束后 来开始调用宏任务

   微任务 pormise

   宏任务 setTiemout script

Promise 如何使用

创造一个Promise实例

Promise实例生成以后，接收一个回调函数 ，回调函数接好接受两个参数一个是成功（resolved）的回调函数和 失败（rejected）的回调函数，分别执行不同的操作

在外面调用的地方就可以直接通过then来接收

可用Promise的then和catch

Vue中父子传值

父组件传子传值

父组件在调用子组件的位置，添加一个自定义属性，属性的值就是父组件传入子组件的

在子组件定义的位置，添加一个props选项 ， 数组，数组的元素就是：父组件在调用子组件的位置定义的属性名

props: [ 'a ’ , ’ b '] 来解接收

子组件给父组件传值

父组件在调用子组件的位置，绑定自定义事件。

该事件的处理方法，由父组件定义。方法接收的参数，为子组件发送的数据

在子组件的某个事件或行为中，this.$emit （ ） 来触发事件

第一个参数：是触发自定义事件

第二个参数：传递参数（数据）

父组件使用子组件的方法和数据

1. 在子组件的调用处，使用自定义属性ref添加子组件别名
2. 在父组件中，使用 this.$refs.子组件别名 获取到子组件实例，从而访问子组件的数据和方法

provide + inject

用于一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效，都能获取到它传入数据。

• provide 选项是一个对象
• inject 选项是一个字符串数组

/ 父级组件提供 ‘foo’ var Provider = { provide: { foo: ‘bar’ }, // … }

// 子组件注入 ‘foo’ var Child = { inject: [‘foo’], created () { console.log(this.foo) // => “bar” }

兄弟传参

let bus = new Vue（ ） new 一个新的实例

bus.$on（ ）绑定事件 在要收的组件中 created 生命周期中 来接收数据

通过 bus.$on ( " 事件名称 " （ 参数是接收的数据 ）=> {

​ 第二个参数是一个回调函数 参数是接收的参数

} )

bus.$emit()触发事件在要发数据的组件选项中methods中通过bus.$emit( ) 来触发一个事件并传参

Vue的生命周期

vue的生命周期就是每个vue实例被创建之前一直到结束经历的过程，每个过程对应着不同的钩子函数

钩子函数

就是在Vue不同的周期内执行不同的方法

比如：

beforcreate 创建之前 刚刚创建无法访问到data 和 el

created 创建后 可以访问到 data 无法访问el

beformount 挂载之前 渲染虚拟DOM 渲染VDom 通过延时器settimeout 可以异步访问到data

mounted 挂载之后 created 可以完全访问到data

beforupdata 数据更新之前 beforupdata 是拿到渲染多次后的结果

updataed 数据更新之后 再次渲染

befordestory 实例销毁之前

destoryed 实例销毁之后

首页先渲染data 渲染完返回回来又触发数据更新再次渲染

在进入页面渲染之前就获取数据 ， 获取完之后到了页面就直接显示不会出现 进去了页面还没有加载 这叫预加载

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

在beformount

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源

路由守卫

1. 导航被触发。
2. 在失活 （ 我要离开的组件 ）的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 全局的解析守卫 已经结束了 开始解析。
9. 导航被确认。
10. 调用全局的 afterEach 钩子 跳转结束。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。 组件内的守卫 的回调函数是在 DOM更新之后触发

axios的交互

它的底层还是用的ajax进行的封装，现在是一个请求库 ， 也是用promise 的异步ajax请求库，里面比较特别的就是它的请求和拦截响应器 ，在每次请求和得到响应的都会收到他们的请求和接收，可以对进行相应的操作， 像是在验证后端登录状态的时候，可以在请求里自动携带登录数据，像token ， sesson 这些自动携带在请求头 不用再每次在组件中添加 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据

webpack

Webpack 是一个前端资源加载/打包工具

闭包

作用域的嵌套，将原本的局部变量，进化成私有变量（自由变量）的环境，也就是在作用域外拿到作用域内的变量

通常在什么地方用闭包

在别的作用域外面想拿到作用域里面的数据

原型对象

原型对象实际就是一个构造函数的实例对象，与普通的实例对象没有什么本质上的区别，js中每一个对象都有一个原型对象。不过他比较特殊，该对象所包含的所有属性和方法能够供构造函数的所有实例共享. 通过new出来一个实例对象，可以通过this来访问里面的属性和方法

原型链

当我new出一个实例的时候，这个实例系统自动绑定了原型链，当我们访问一个对象属性时，如果不存在这个属性，那么就会去原型对象里找，原型对象又会有自己的原型，最后都是为Object.prototype 它的__proto是null

Vue 框架的优点

（1）轻量级框架：只关注视图层，大小只有几十Kb；
（2）简单易学：文档通顺清晰，语法简单；
（3）数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新；
（4）组件化开发：工程结构清晰，代码维护方便；
（5）虚拟 DOM加载 HTML 节点，运行效率高。

​ 用官网的口号来说 小而美 它自身的生态圈非常少，什么都要自己下，有vue框架有很多地方都参考react 和 angela 像react中的 JSX语法 就是在JS的格式里写HTML 创建虚拟DOM 然后再通过render进行渲染 这点Vue 也拷贝到文档里边，只不过用的并不广泛 还有因为vue 框架面向的都是初级用户 ， 不像react 和 angel 面向的只是高级用户，它把react 和 angela所有的优点都集合起来做封装，用户只注重如何使用就可以 不用考虑怎么实现的

vue - router

因为vue是单页面应用，所以它只能靠vue-router来将这些页面和组件链接起来实现单页面的切换，它的核心就是更新和渲染视图，不是重新请求页面

它的跳转有两种模式

第一种就是 Hash模式

它会在地址上拼接一个# 但是它不会像后端发起请求 通过锚点来来渲染DOM

第二种是History模式：

History跟Hash模式最大的区别还是在于它会像后端发起请求，所以它的地址没有携带#。

V-for中key的作用是什么

渲染的时候，如果不加key的话组件 判断有没有key 如果没有key 它会默认采用复用策略 只会复用那个组件，不会创建新的，如果使用用过的组件它的数据也会和组件一块带过来使用

如何如果动态更新对象或数组中的值

因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：

this.$set(要改变的数组/对象，要改变的位置/key，要改成的value)

常用的事件修饰符

.stop 阻止冒泡

.prevent 阻止默认行为

.self 仅绑定元素自身可触发

.once 只触发一次

Vue 如何获取组件内的实例和方法

首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取当前组件的实例或者是方法。

Vue 如何绑定多个事件

可以通过 v-on 传入对象来绑定多个事件：

<input type=“text” @click=“onClick”>

Vue初始化页面闪动问题

这是因为在vue初始化之前，由于div不归vue管，所以我们写的代码在还没有解析的情况下，容易出现花屏的现象

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] { display: none; }

{{ message }}

v-el的作用

在页面上选择一个DOM元素作为vue 要挂载的目标

Vue中如何清除浏览器缓存

项目打包的时候给每个打包文件后面加上时间戳

在后端设置服务器禁止缓存设置

Vue中实现路由跳转

this.$router.push( ’ url’ )

router-link 通过to属性标签跳转 类似a标签

this.$router.replace( ’ url ’ ) 不会产生记 录 美好回退

this.$router.go ( n ) 跳转多少个页面

async await

async用于声明 function 异步

await 等待异步的方法执行完成

只要不在视图范围内就不加载

1. Promise
   Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

   返回一个 new promise（ ） 在这个方法中默认接收一个回调函数 回调函数也会默认接收两个参数 一个是成功执行的方法 还有一个是失败的方法 这个是可以监听异步 一般监听请求数据 等待服务端返回的数据 将请求的数据传参 传入进去 在外面根据请求的数据执行相对的 回调函数 在外面调用的地方可以使用.then 和.catch的方法执行成功 失败 他们都接受一个参数就是里面成功和失败传入的数据 一般是请求数据的结果

2. async await
   async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

本地存储方式

Cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage

除非被清除，否则永久保存

仅在客户端（即浏览器）中保存，不参与和服务器的通信

sessionStorage

仅在当前会话下有效，关闭页面或浏览器后被清除

仅在客户端（即浏览器）中保存，不参与和服务器的通信

**HTTP的原理 **（ 三次握手四次挥手 ）

客户端的浏览器首先要通过网络与服务器建立连接 连接之前会发送一个请求给服务器 确定一些信息 还有 状态

HTTPS 是以安全为目标的HTTP 是HTTP的安全版 认证之前 先进行身份验证验证一些算法 交换密钥等一些操作

浏览器解析html会加载资源(js,css)

1.解析HTML结构。

2.加载外部脚本（ JS… ）和样式表文件

3.解析并执行脚本代码

4.DOM构建完成

5.加载图片 等外部资源

6.页面加载结束、

ajax 的get post 区 别 怎么传参

先new XMLHtprequest 创建一个实例

get在地址后面拼接 然后再open 中通过传入get 和 地址 直接请求数据

一般用于信息获取

post open方法中 传入 open 和请求地址两个参数 然后设置请求头 在send中请求数据

一般用于修改服务器上的资源

然后监听请求状态

对称加密和非对称加密的区别

对称加密： 加密和解密的密钥使用的是同一个

非对称加密： 与对称加密算法不同，非对称加密需要两个密钥： 一个公开密钥一个私有密钥

跨域

同源策略：同协议 同域名 同端口

利用script 标签不受同源策略影响

在后端代理一个服务器 ，代理我们的请求发送给服务端

在后端设置一个请求头 ， 允许我们的访问地址

session
会话，代表服务器与浏览器的一次会话过程，这个过程是连续的，也可以时断时续。
cookie中存放着一个sessionID，请求时会发送这个ID；
session因为请求（request对象）而产生；
session是一个容器，可以存放会话过程中的任何对象；
session的创建与使用总是在服务端，浏览器从来都没有得到过session对象；
session是一种http存储机制，目的是为武装的http提供持久机制。

Vue中computed 和 watch的区别

计算属性 ‘computed’：

运用场景： 在购物车的单选或者是全选中，全选按钮必须要跟据单选的按钮决定自己的状态

（1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数 计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值
（2）计算属性内不支持异步操作；
（3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
（4）计算属性是自动监听依赖值的变化，从而动态返回内容。
侦听属性 ‘watch’：

运用场景： 绑定你请求的数据，如果你请求的数据发生变化的话，他都会给注入过依赖的所有数据发生变化，影响视图

（1）不支持缓存，只要数据发生变化，就会重新执行侦听函数；
（2）侦听属性内支持异步操作；
（3）侦听属性的值可以是一个对象，接收 handler 回调，deep （深度监听），immediate （）三个属性；
（3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情.

 watch: { 
	obj: { 
    	//handler接收两个参数（newVal：新值，oldVal：旧值 
    	handler: function(newVal, oldVal){ 
    		console.log(newVal); 
		}, 
	deep: true,//设置为true时会监听对象内部值的变化； 
	immediate: true//设置为true时会立即以表达式的当前值触发回调； 
	} 
}

Vue 中路由跳转数据的传递

params 方式

params 需要配置动态 在路由对象中 动态绑定你要传的数据

然后路由跳转的时候拼接 或者是 对象形式 绑定你要传入的数据

query 方式

query 不需要配置动态路由，直接直接 ？后面拼接 或者是对象形式 传入数据

接收的话 通过 route 来接收不同方式传递的数据

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

普通的函数this 指向调用它的对象

箭头函数没有自己的this， 它的this指向宿主对象 任何方法都改变不了指向 ，如call（）、bind（）、apply（） 因为它没有自己的this 所有不能作为构造函数

箭头函数不能作为构造函数， 不能使用new 命令，否则会报错

ES6数组的方法

every：

只要数据有一个为false 就是false

some：

只要有一个true 就是true

Array . from:

​ 将伪数组转为真正的数组

find :

​ 查找第一个符合条件的值，并将它返回

includes：

​ 检测数组中是不是包含某个值， 如果找到 返回有个布尔值

Array.of :

​ 将一组数字转为数组

css3的伪类

p:last-of-type 选择其父元素的最后的一个P元素

p:last-child 选择其父元素的最后子元素(一定是P才行)

p:first-of-type 选择其父元素的首个P元素

p:first-child 选择其父元素的首个p元素(一定是p才行)

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

p:nth-child(n) 　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n) 从最后一个子元素开始计数

p:nth-of-type(n)　 选择其父元素的n个元素

p:nth-last-of-type(n) 从最后一个子元素开始计数

什么是盒子模型

网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.

什么叫优雅降级和渐进增强

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

对BFC规范的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠

事件委托

事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。比如li列表的事情交给ul做

v-show与v-if的区别

v-show：操作的是元素的display属性

v-if：操作的是元素的渲染和不渲染

v-if有更高的开销，而v-show有更高的初始化渲染开销，如

果需要非常频繁地切换，则使用v-show较好；

如果在运行时条件很少改变，则使用v-if较好

flex布局有哪些属性

换行 主轴方向 对齐方式 任何一个容器都可以指定为Flex 布局 display flex

Vue 路由的解耦

1.只有动态路由才能用于路由的解耦

2.在路由中设置动态路由

3.在定义路由的对象内 添加props 为true

4.通过路由跳转的时候传递数据

5.在需要接收参数的组件中通过props 来接收

vue首屏加载过慢应该如何解决?

路由懒加载，会将原来打包一个 app.js 的文件打包成多个文件，异步组件，按需加载，webpack 开启 gzip 压缩，如果图片过多，开启图片懒加载，使用 cdn 资源

vue的单项数据流和双向数据流绑定

单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项 绑定，

不可以在子组件修改父组件的数据

双向数据绑定：是指数据和页面进行双向绑定，相互影响

解决跨域

客户端代理

就是请求一个满足条件的地址，代理我们的请求，访问到数据在返回给我们

在 cli 脚手架 config 文件中配置 代理我们的请求

JSONP请求跨域

JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

后端配置

在后端header 设置权限允许求的地址

插槽

v-solt

solt标签

默认在组件中写样式标签都会被忽略，如果你想更改它的样式 如果你加个solt 标签的在里面定义样式

如果你定义过样式了 如果你slot里面有默认样式的话 如果你外面传样式了 就是你传的样式 如果你没有传样式 就是默认样式

命名插槽

如果你要更改多个组件样式的时候，就要多个插槽，给插槽命名 ， 将更改的样式传入到对应的name 名字的插槽

给插槽命名，将样式就是给插槽添加个name属性 添加个值，就是你插槽的名字

用 template 标签包裹你要修改的样式，然后通过 v-solt：name 名字 传到插槽里 （ v - solt ： 简写成 #name ）

Vue的混入 mixin

定义一个mixin 在里面定义一些 公共的数据 还有方法

在别的地方引入 只要在别的地方有用到这些数据或者是方法都可以引入mixin

​ 就不用再重复写代码

通过mixins 注册

mixins： [ 注册引入的公共 ] 以组件内部为准

Vue 内置组件 ： keep-alive

缓存组件单状态，再可能重复渲染的动态组件的地方，缓存组件的状态，避免重复渲染

使用： 将要被缓存的组件 或 可能会被重复渲染的组件 使用 keep-alive 包裹

如果不想全部缓存用if 来 判断 什么缓存什么不缓存

内存泄露的解决方式：

将一个值或者是变量 引用的次数变成0 ，就可以将这块内存释放

将值或者是变量赋值为空 就可以解决

内存泄漏的情况

1.全局变量引起的内存泄漏

2.闭包引起的内存泄漏

3.定时器没有删除 或者是 遗忘的回调函数

4.dom 清空或者删除时，事件没有清除

内存泄漏如何避免

避免死循环

减少不必要的全局变量，尽量少些全局变量，可以通过外面嵌套一层作用域来避免全局变量

ajax的通信原理

创建一个XMLHttpRequest 对象，这个对象有个open方法 里面包含请求地址，请求方法，然后通过send 方法 发送请求

CSS3新特性

css3 选择器 .class #id 这些选择器

css3 边框 增加圆角边框，阴影样式

css3背景属性 背景尺寸 背景 定位区域

新增语仪化标签 像header nav footer 类似这些

谈谈怎么性能优化？

减少HTTP请求：

合并文件、CSS精灵

避免重定向：多余的中间访问

减少DOM元素数量

HTTP状态码

1开头表示客户端应该继续发送请求

2开头表示成功的请求

3开头表示重定向

4开头表示客户端错误

5开头表示服务器错误

谈谈eslint代码检测工具？

每个人都有自己的代码风格，在要合并代码或者是交接的时候，公司里为了统一代码风格，统一规范，这样可以更利于团队开发

前端工程化

所有能提升前端开发效率，提升应用质量的手段和工具都是前端工程化像 Vue Scss git npm 这些

使用前端工程话的好处

极大提升了开发效率 就好像在原生中绑定一个点击事件， 要先获取元素在进行绑定

在Vue中直接@符 直接绑定

前端组件化

最先时react 中使用，react的口号是 将组件进行到底，然后vue

就是慢慢的借鉴react 有了组件化，组件化在开发过程中，因为vue是单页面应用，所以每次是将组件渲染到 router-view 内置组件中再由它重复渲染页面，基本每一个页面就是就是一个组件，每一个功能就是一个组件，这边方便管理，如果是哪跨区域出了问题，可以直接去组件内部去查看检测，

而且可以复用组件 ，循环使用，避免写重复代码

前端的模块化

模块化开发的基础就是函数，模块化就是封装函数 降低模块跟模块之间的耦合，暴露模块，引入模块，这样还可以重复使用

Vuex 的使用

state

通过state 存储你想要存在全局中的状态 存到vuex.store 然后注册到Vue实例上 在全局就可以通过this 或者是vue实例找到 store 存储的状态

mutations： 是唯一改变状态管理器中状态的唯一途径 不支持异步操作

action: 它可以支持异步操作 但是它不支持直接修改state中的状态 它最终需要通过 mutations 来改变

getter ： 类似于计算属性 专门计算state中的数据

moudle ： 就是将状态模块化，降低他们之间的耦合 不让他们都写在一快显得臃肿

微信小程序与Vue的区别

生命周期不一样 微信小程序生命周期比较简单

数据绑定也不同ing

new运算符

new运算符创建一个空的对象 如果主动返回对象是你返回的对象 如果没有主动返回就是默认new出来的对象

它会默认将原型链绑定到原型上

里面的this指向指向new出来的原型对象

gulp的工作方式

再一个配置文件中，指明对某些文件进行类似编译，组合，压缩一些任务，工具可以自动替你完成这些任务

webpack 的缺点

webpack 的缺点是只能用于采用模块化开发的项目

继承方式

构造函数继承：

改变内部的this指向 让子类中中通过this 来访问构造函数中的数据 和 方法

没有办法访问到原型里的方法

原型继承

将new的父类 赋值的原型 赋值给子类的原型

这样就可以访问到原型对象上的方法 但是他们是公用一个原型对象

组合方式

通过改变this的指向 再加上原型 继承 使用原型链 实现对原型属性和方法 的继承 而且通过借助 构造函数来实现对实例属性的继承，这样即实现函数的复用，还保证了每个实例都有自己的属性

作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的， 作用域链的变量只能向上访问， 变量访问到window对象 被终止 ， 作用域链向下访问变量是访问不到的 是不支持的

闭包的应用场景

闭包就是能够读取其它作用域内部变量的函数， 说白了闭包就是个函数 只不过的话是再别的函数内部而已 函数嵌套函数 函数内部可以引用外部的参数和变量 它的变量不会被垃圾回收机制挥手

访问函数内部的变量 作为返回值 或者 参数传递

node.js Express

性能优化

避免使用高级选择器， 通配选择器

缓存一些ajax 请求 使用外部js css 文件方便缓存

使用Css 图片整合，

cli脚手架中 尽量路由使用览加载的方式进行加载

少用全局变量 如果没有办法 在外面再套一层函数 或者是作用域， 让它变成局部的

避免使用css3渐变阴影效果

少用web字体， 因为web字体都要下载解析重绘到页面

bootstrap

栅格系统：

提供一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分成12列 通过一系列的行和列的组合来创建布局，你的内容样式放在这些布好的布局中

foreach和map的区别

forEach 没有返回值 map 有返回值 return 出来

性能优化

网页内容：

1.减少http请求的次数

2.避免页面跳转

3.缓存ajax请求

cookie ：

1.减少cookie 大小 因为他会参与前后端交互

图片：

优化图像 图片整合成一张

移动客户端：

单页面小于25kb

尽量使用css3动画

避免使用css3渐变阴影效果

不滥用Web字体 ，解析，重绘当前页面，尽量减少使用

代码层面的优化

少用全局变量

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

缓存DOM节点查找的结果

尽量避免写在HTML标签中写Style属性

Vue.nextTick

Vue中DOM的渲染是异步的渲染，不是你数据修改，DOM直接修改的 ，更新是批量更新，你假如更新多次数据，你只会执行一次nextTick ，这样非常节省性能，只因为他是DOM渲染是异步的所有它才能批量渲染 获取最新的DOM

假如你渲染li ，如果你改变渲染数组中的数据时，你的DOM并没有实时渲染，如果你通过ref 获取它的ul 的子节点 它的length 是数组跟新之前的长度 ，没有实时更新

通过this.$nextTick ( ) 接收一个回调函数 这个回调函数可以访问到最新的DOM

Vue 中的 render 函数

在export default {

​ render （ createElement ) {

​ return createElement ( ’ h1 ’ ,

​ 第二个参数 { atters: { class: ’ box ’ ,

​ on: { click: ( ) => {

​ console.log( 成功添加点击事件 )

}

}

​ }}

} , ’ 你好 ’ )

​ createElement 回调函数接收三个参数 ：

​ 1. 插入的标签 （ 也可以插入组件 ）

​ 2. 绑定的一些标签属性

​ 3. 标签中的文本节点

} x

}

我们在外面写的template 最终也会编译成 render 函数