vue常见面试题

1.过滤器

又称文本过滤器 ，分为全局过滤器和局部过滤器，只能过滤文本，用在插值中，过滤不能过滤复杂的数据信息，它本身是一个函数

全局过滤器写在main.js中，挂载vue上vue.filter(‘过滤器名’，function()=>{//执行代码

})，全局过滤器可以在任何一个组件中使用，用|隔开

局部过滤器写在组件中，filters(){

过滤器名：function（val）=>{

//执行代码

}，局部过滤器只能使用在当前的组件中

2.$nextTick

$nextTick(()=>{

})

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

当更新完数据之后，立马去获取dom时候，不能保证拿到最新的，所以要使用nextTick提供的函数去保证dom更新之后拿到最新的dom

JS是单线程,只能从上到下依次执行代码逻辑，很消耗性能，为此提出了非阻塞机制，它是一种异步机制， 如果侦听到数据变化，Vue 将开启一个事件队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，就会被推入到事件队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作，在下一个的事件循环“tick”中，Vue 刷新事件队列并执行实际 (已去重的) 工作。

使用场景：

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

3.虚拟dom和diff 算法

根据模板生成一个JS对象，文档对象模型转成js对象，里面包含所有操作，vue在修改时只是修改了js对象的某一个节点，当虚拟dom发生改变，vue会检测变化，拿旧的和新的虚拟dom进行对比，通过diff算法快速找到变化的节点，然后vue会找到变化节点转换为dom操作，然后修改dom结构进行渲染

操作dom就是操作一个js对象，

4.双向数据绑定

原理：会先实现一个监听器去监听vue的数据对象，同时为数据生成set和get，set被调用要改变新的值，拿到最新值然后调用get方法，通知订阅者watcher，然后会拿最新值触发指令解析器

指令解析器：所有绑定到v-modle上的元素节点解析和扫描，然后把指令绑定到一个个更新函数上去，如果一个指令触发，更新函数也会触发，（用来替换数据，然后绑定到相应的函数上）

watcher：订阅数据变化，收到数据变化之后执行与指令绑定的回调函数更新试图

Observer：通过set方法触发监听数据变化

v-model通过元素的指定绑定

5.响应式布局

vue会遍历定义在data中所有的属性，然后为某一条属性通过object.defineProperty()添加set和get,当调用set方法时要设置一个属性，然后通知给观察者，要改变新的值，调用get方法，通知组件渲染函数，更改虚拟dom，触发diff算法，新的虚拟dom和旧的进行对比，然后找到变化的节点，然后生成相应的dom操作方法修改文档，最后渲染到页面

6.object.defineProperty()方法

作用：为对象添加属性。

它有三个参数：第一个是目标对象，第二个是属性名称，第三是描述器(用来配置属性的一些信息)，可为新增的属性通过描述器配置属性的默认值、可写权限、可枚举权限、可删除权限、可为属性生成set和get方法，通过点语法去给对象的某一个属性设置值的时候会默认执行这个属性的set方法,当通过点语法去获取对象的某一个属性的值的时候会默认访问get方法

扩展：

value：属性对应的值,可以使任意类型的值，默认为undefined

writable:属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。

enumerable:此属性是否可以被枚举（使用for…in或Object.keys()）。设置为true可以被枚举；设置为false，不能被枚举。默认为false。

configurable:是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。

注：object.defineProperty()是vue2和响应式实现的根本

7.组件传值

• vue父组件向子组件传值的方法是什么？
  在父组件中给子组件绑定自定义属性，并设置要传递的数据，子组件通过props接受对应的属性
• vue子组件向父组件传值的方法是什么？
  在父组件中给子组件添加自定义事件，然后在子组件中通过$emit（‘事件名’, ‘要传递的数据’）触发函数并传递数据给父组件
• vue非父子组件传值的方法是什么？
  1）通过bus实现，给vue原型上挂载一个new Vue（）的实例
  作为bus 可以通过 bus.$emit{（}^{\prime }要触发的事{件}^{\prime }{,}^{\prime }要传递的数{据}^{\prime }）,在要接受数据的页面通过bus.$on()接收数据
  2）也可以通过vuex实现

8.事件修饰符

.stop: 阻止点击事件冒泡。等同于 JavaScript 中的 event.stopPropagation()

使用了.stop 后，点击子节点不会捕获到父节点的事件

.prevent
防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于
JavaScript 中的 event.preventDefault()，prevent 等同于 JavaScript 的
event.preventDefault()，用于取消默认事件。

.capture
与事件冒泡的方向相反，事件捕获由外到内,捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内父节点-》子节点的点击事件

.self 只会触发自己范围内的事件，不包含子元素

.once 只执行一次，如果我们在@click 事件上添加.once
修饰符，只要点击按钮只会执行一次。

9.自定义指令

【全局指令】使用 Vue.diretive()来全局注册指令。

【局部指令】也可以注册局部指令，组件或 Vue 构造函数中接受一个 directives 的选项。

钩子函数。指令定义函数提供了几个钩子函数（可选）。

bind

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用（ 父节点存在即可调用， 不必存在于document 中）。

update

所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode
更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

【componentUpdated】

所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

【unbind】

只调用一次，指令与元素解绑时调用。钩子函数参数

钩子函数被赋予了以下参数

【el】指令所绑定的元素，可以用来直接操作 DOM。

【binding】一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。

value: 指令的绑定值，v-directive=“1 + 1”,

value 的值是2

oldValue: 指令绑定的前一个值，

expression: 绑定值的字符串形式。

arg: 传给指令的参数。modifiers:一个包含修饰符的对象。

10.key值的作用

“key 值:用于管理可复用的元素。因为 Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue变得非常快,但是这样也不总是符合实际需求。 2.2.0+ 的版本里,当在组件中使用v-for 时,key 是必须的。”

11.vuex的五大核心

vuex是vue的状态管理工具 状态指的就是数据，vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据

当有多个组件共享数据时，如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用Vuex 。

好处：可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中

使用场景：(1)登录信息、(2)购物车、(3)复杂的组件通信

1、state - 存放Vuex store实例的状态对象，用于定义共享的数据。
2、Action -动作，向store发出调用通知，执行异步操作
3、Mutations -修改器，它只用于修改state中定义的状态变量。
4、getter -读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）
5.modules对state进行分类处理

12.路由守卫

一：全局的守卫

全局前置守卫：router.beforeEach()

全局解析守卫：router.brforeResolve()

全局后置守卫：router.afterEach()

二：组件级路由守卫

路由进入之前的守卫：beforeRouteEnter(){ }

路由更新时的守卫：beforeRouteUpdate(){}

路由离开时的守卫：beforeRouteLeave(){}

三：单个路由独享守卫
进入之前：beforeEnter(){}

13.路由传参

query传参

this.$router.push({path:"/home",query:{id:12}})

接收：this.$route.query.id

params传参

this.$router.push({name:“home”,params:{id:12}})

接收：this.$route.parmas.id

可以使用watch监听路由的变化

​ watch：{

​ “$route.path”:{

​ handler(newval,oldval){

​ } }

Params和query的区别

(1) query可以使用name和path而params只能使用name

(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存

(3) Params在地址栏中不会显示，query会显示

(4) Params可以和动态路由一起使用，query不可以

14.生命周期

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和 data 并未初始化，因此无法访问 methods， data， computed等上的方法和数据。

created ( 创建后）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了 data 数据的初始化，el 没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期， 因为你可以调用 methods中的方法，改变 data 中的数据，并且修改可以通过 vue的响应式绑定体现在页面上，，获取 computed 中的计算属性等等

通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发 ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter 中完成

beforeMount

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

mounted

挂在完成，也就是模板中的 HTML 渲染到 HTML 页面中，此时一般可以做一些 ajax
操作，mounted 只会执行一次。

beforeUpdate

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

updated（更新后）

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

beforeDestrioy （销毁前）

在实例销毁之前调用，实例仍然完全可用，

这一步还可以用 this 来获取实例，

一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom

事件

destroyed（销毁后）

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

其他三个：

activated 被 keep-alive 缓存的组件激活时调用。

deactivated 被 keep-alive 缓存的组件停用时调用。

errorCaptured 2.5.0+ 新增当捕获一个来自子孙组件的错误时被调用

15.props验证

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue
会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit派发一个自定义事件，父组件接收到后，由父组件修改。

这个用来传递一个初始值；这个子组件接下来希望将其作为一个本地的数据来使用。
在这种情况下，最好定义一个本地的属性并将这个用作其初始值：

这个以一种原始的值传入且需要进行转换。
在这种情况下，最好使用这个的值来定义一个计算属性

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

16.Vue 中 methods,computed, watch 的区别

1. methods中都是封装好的函数，无论是否有变化只要触发就会执行

适用场景：组件中功能的封装，逻辑处理

2. computed:是 vue 独有的特性计算属性，可以对 data
   中的依赖项再重新计算得到一个新值 ,computed 是可缓存的， 依赖项没有变化，则 computed 中的值就不会重新计算

   适用场景：假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行某个函数

3. Watch 是监听 data 和计算属性中的新旧变化

   **适用场景：**当需要在数据变化时执行“异步”或“开销较大”的操作时，这个方式是最有用的

17.简述输入url到页面显示都有哪些步骤？

1.DNS 解析//将域名解析为IP地址，方便记忆，建立服务器的连接，发送请求
2.TCP 连接//三次握手和四次挥手
3.发送 HTTP 请求
4.服务器处理请求并返回需要的数据
5.浏览器解析渲染页面
6.连接结束

简述什么是三次握手、四次挥手？

三次握手

第一握手：客户端向服务端发送连接请求报文段。

第二次握手：服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，

第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文段

四次挥手

第一次挥手： 若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。

第二次挥手：服务端收到连接释放请求后，会通知相应的应用程序，告诉它客户端向服务端 这个方向的连接已经释放

第三次挥手：当 服务端向客户端发完所有数据后，向客户端发送连接释放请求。

第四次挥手： 客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态

常见的错误码都有哪些？ 分别表示什么意思？

200 – 请求成功
301 – 删除请求数据
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误

​ 204——请求收到，但返回信息为空

18.什么是跨域，以及jsonp原理?

1、理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

2、出于安全考虑，服务器不允许 ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建 script标签，使用标签的 src 属性访问 js 文件的形式获取 js 脚本，并且这个 js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的jsonp原理。

Jsonp

jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口地址然后传递callback 参数，后端接收 callback，后端经过数据处理，返回 callback函数调用的形式，callback 中的参数就是 json

优点：浏览器兼容性好，

缺点：只支持 get 请求方式

（前端代理和后端通常通过 nginx 实现反向代理）

前端代理我在vue 中主要是通过vue 脚手架中的config 中的index
文件来配置的，其中有个 proxyTable 来配置跨域的

前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和vue3.x 脚手架代理跨域实现原理是一样的是 CORS

CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

CORS 的原理：CORS 定义一种跨域访问的机制，可以让 AJAX 实现跨域访问。 CORS
允许一个域上的网络应用向另一个域提交跨域 AJAX
请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete
等）

缺点：浏览器支持有版本要求，如下：

chrome:13+,firefox:3.5+,IE 11+,edge:12+

注：现在主流框架都是用代理和 CORS 跨域实现的

1、理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
2、出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js 脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的jsonp原理。

jsonp跨域：利用标签src属性不存在跨域的特性，使用js动态创建script，动态设置src属性的值,回调函数的原理
服务器代理跨域: 前端代理核心实现通过 http-proxy-middleware 插件来实现的,例如vue可以再proxy属性中设置代理地址
cors跨域：在服务端设置res.setHeader(‘Access-Control-Allow-Origin’， ‘*’)

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

1. 在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀

2. Jsonp是解决跨域的一种解决方案，实现原理主要是利用动态创建 script 标签，设置src属性，页面要提前定义好callback。后端会返回回调函数执行，并包裹参数callback(data)，callback 中的参数就是 json

3. cors是一种跨域解决方案，它使用额外的 HTTP 头来告诉浏览器让运行在一个origin 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

19.ajax是什么？以及如何创建ajax？

ajax是网页开发技术，它是在现有的js/html/css样式基础上，实现在不重新加载整个页面的情况下，与服务器进行简单的数据交互，通过js操作DOM进行页面局部更新.

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

let xhr = new XMLHttpRequest();
xhr.open('请求方式','请求地址',是否异步); // 创建HTTP连接

xhr.onreadystatechange = function () { // 响应HTTP状态变化
if (xhr.readyState === 4 && xhr.status===200)   {
      let data = xhr.responseText;
}
}

xhr.send(); // 向服务器发送请求

优点

<1>.无刷新更新数据

<2>.异步与服务器通信。

<3>前端和后端负载平衡。

<4>.基于标准被广泛支持。

<5>.界面与应用分离。

缺点

<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

<2>.对搜索引擎支持较弱。

<3>.破坏程序的异常处理机制。

<4>.违背URL和资源定位的初衷。

20.await和async

async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

优点 Async 函数的实现最简洁，最符合语义，几乎没有语义不相关的代码。它将 Generator 写法中的自动执行器，改在语言层面提供，不暴露给用户，因此代码量最少。如果使用 Generator 写法，自动执行器需要用户自己提供。

async 表示这是一个async函数， await只能用在async函数里面，不能单独使用

async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行

await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

21.For in 和 For of

1. 遍历对象时推荐使用for...in，其中item为对象的key。使用for...of会报错。
2. 遍历数组时推荐使用for...of，其中item为数组每一项的值。使用for...in则不能 保证遍历顺序且会遍历出自定义属性。
3. for...in是ES5特性，for...of是ES6特性，因此需要注意兼容性。
4. 如果要使用for...of遍历普通对象，需要配合Object.keys()一起使用。

23.Promise 状态 参数 使用

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果,简单说就是一个容器，从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

如果某些事件不断地反复发生，一般来说，使用stream模式是比部署Promise更好的选择。

resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为
resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为
rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

24.Es6 新扩展 重点

1 变量声明let 和const

var

声明的变量可以变量提升

变量提升是将变量的声明提升至当前作用域的最顶部

let/const

声明的变量让当前代码块变成一个暂时性的死区

内部变量不能在外部使用 他们声明的变量不存在变量提升

区别

const声明的变量必须给默认值

const声明的是常量不能重新赋值 const声明的变量的值如果是引用数据类型 则数据内部的数据可以修改

2 变量的结构赋值

解构赋值是按照一定的规则将数组或者对象中的数据取出来

要保证等号两边的数据结构完全相同

数组 按顺序一一取值

对象的结构赋值 与数组按照顺序取值不同 对象是按照key的值取值的

3 数组扩展

Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）

find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

fileter(),some(),every(),map()

4 函数新扩展

箭头函数（）=》{}

1、箭头函数没有原型prototype

let a = () =>{};
console.log(a.prototype); // undefined

2、箭头函数不会创建自己的this

箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

3、不能修改箭头函数的this指向

由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向，虽然这么做代码不会报错。

4、箭头函数不能作为构造函数使用

但是箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

5、箭头函数没有自己的arguments

5 对象新扩展

属性的遍历

ES6一共有5种方法可以遍历对象的属性。

1 for…in

for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

2 Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。

3 Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。

4 Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。

5 Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

以上的5种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。

• 首先遍历所有属性名为数值的属性，按照数字排序。
• 其次遍历所有属性名为字符串的属性，按照生成时间排序。
• 最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

Object.is()

ES5比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。

ES6提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

__proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()

Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。

Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）

6 Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

7 set map 数据

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

8 Generator 和 Promise

9 ES6 异步操作和async函数

ES7提供了async函数，使得异步操作变得更加方便。async函数就是Generator函数的语法糖。

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

10 Class

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

11 Module 模块

把系统分成各个独立的部分，每个部分单独实现功能，将系统分割成可独立的功能部分。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

27.图片懒加载和瀑布流

图片懒加载

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

实现原理

1 通过滚动事件onscroll监听图片是否进入可视区域

然后通过加载事件 加载图片 加载事件是onload

2 一开始不给图片设置图片链接 等到图片进入可视区域后再动态添加图片链接

瀑布流

瀑布流的实现原理就是通过比较每一列的高度，如果这一列高度低的话就在这一列进行添加，如果可视区距离和滚动距离想加的话比你当前页面的高度还要高的时候，页面就开再次加载多个

28.Vue 3.0与2.0区别

1、性能提升Performance

1. 重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
2. 编译模板的优化。
3. 更高效的组件初始化。
4. update性能提高1.3~2倍。
5. SSR速度提高了2~3倍。

2.打包 Tree shaking support

可以将无用模块“剪辑”，仅打包需要的（比如v-model,<transition>，用不到就不会打包）。

一个简单“HelloWorld”大小仅为：13.5kb

• 11.75kb，仅Composition API。

包含运行时完整功能：22.5kb

• 拥有更多的功能，却比Vue 2更迷你。

3、API 变动 Composition API

• 可与现有的 Options API一起使用
• 灵活的逻辑组合与复用
• vue 3的响应式模块可以和其他框架搭配使用

4.碎片 Fragment

• 不再限于模板中的单个根节点
• render 函数也可以返回数组了，类似实现了 React.Fragments 的功能 。
• ‘Just works’

5.传送门 <Teleport>

6 悬念 <Suspense>

• 可在嵌套层级中等待嵌套的异步依赖项
• 支持async setup()
• 支持异步组件

7 Custom Renderer API：自定义渲染器API

8 更好的TypeScript支持

29. Keep-alive

1.包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中 作为标签使用 包裹在需要缓存的组件外

2、 在 router-view 上使用可以缓存该路由组件

3、 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减少加载时间及性能消耗，提高用户体验性。

30.Promise 封装Vue Axios

Axios是什么？

Axios是一个基于promise的HTTP库；类似于jQuery的Ajax；用于HTTP请求 可以用于浏览器和node.js（客户端和服务端）

Axios有哪些特性？

支持Promise API；拦截请求和相应（再请求前和相应前做一些操作）；转换请求数据和响应数据（数据加密，解密）；取消请求；自动转换JSON数据；客户端支持防御XSRF攻击；

Axios拦截器分为request请求拦截器和response响应拦截器

request请求拦截器：发送请求前统一处理，

response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，

拦截点共有四个：请求拦截时成功和失败两个点

31.各种存储数据方式的区别

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景：

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。其他情况下，可以使用storage，就用storage。
storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了，因为更大总是更好的
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

32.闭包 重点

定义闭包就是能够读取其他函数内部变量的函数

通俗函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

使用函数封装 定时器

优点

1:变量长期驻扎在内存中

2:避免全局变量的污染

3:私有成员的存在 读取函数内部变量

缺点

1 占用内存资源

2 使用不当内存泄漏

解决内存泄漏

简单的说就是把那些不需要的变量，但是垃圾回收又收不走的的那些赋值为null，然后让垃圾回收走；

33.数据类型判断

Js 数据类型分为基本数据类型和引用数据类型

基本数据类型 Number String Undefined Null Boolean Symbol 存储在栈中

引用数据类型 Object Array Function 值存储在堆中

• typeof 基本数据类型判断是没有问题 引用数据类型 不好用

• instance of 判断 new 关键字创建的引用数据类型

  不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型

• Object.prototype.toString.call() 都可判断

34.各种布局方式

1.静态布局（px）

即传统 Web 设计，网页上的所有元素的尺寸一律使用 px 作为单位。

• 布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的 pc 的网站都是静态（定宽度）布局的，也就是设置了 min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与 pc 端。

• 2、设计方法：
  **PC:**居中布局，所有样式使用绝对宽度/高度(px)，设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

2.百分比布局（流式布局 %）

• 布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

• 设计方法：使用%百分比定义宽度，高度大都是用 px 来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

3.自适应布局 （媒体查询@media）

使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

• 当前的媒体查询可以监测的设备有 屏幕 打印机 屏幕阅读器

@media print打印机

@media speech查询屏幕阅读器

• 布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

• 设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局

5. rem 布局

布局的特点是，包裹文字的各元素的尺寸采用 em/rem 做单位，而页面的主要划分区域的尺寸仍使用百分数或 px 做单位（同「流式布局」或「静态/固定布局」）

• 实现方法：对于不同尺寸的屏幕根据屏幕的大小来动态控制 html 元素的 font-size即可自动改变所有用 rem 定义尺寸的元素的大小

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种 rem+js 只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

4.弹性布局(flex)

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

• 属性
• flex-direction: 定义弹性布局的主轴方向 他的值有四个 row column row-reverse column-reverse
• justify-content主轴方向上的对齐方式
• flex-wrap控制弹性项是否换行 默认值是 nowrap 表示不换行 wrap 表示换行 wrap-reverse 表示倒转换行
• align-items 主轴的垂直方向上的对齐方式
• flex-shrink: 0 控制不让弹性项缩小 默认值是 1 表示可以缩小
• flex-grow: 0 定义弹性项的放大比例 默认值是 1 表示可以放大 0 表示禁止放大

5.响应式布局（糅合流式布局+弹性布局+媒体查询+rem）

• 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

• 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验

• 设计方法：媒体查询+流式布局+rem。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

• 优点：适应 pc 和移动端，如果足够耐心，效果完美

• 缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

小结

• 如果只做 pc 端，那么静态布局（定宽度）是最好的选择；

• 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份 css+一份 js 调节 font-size 搞定；

• 如果 pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

35.H5和CSS3新特性

H5新增

1 语义化标签

HTML语义化是什么？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
为什么要语义化？

1 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

2 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

3 方便其他设备的解析

4 便于团队开发和维护

新增哪些标签

header,section,aside,footer,nav

2 video 视频 audio音频

3 canvas 画布

4 SVG绘图

5 表单新特性type date,search,email,number

6 地理定位

7 拖拽API

8 Web Worker

9 Web Storage

10 Web Socket

CSS3新增

一、圆角边框

二、多背景图

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

三、颜色和透明度(由原来的rgb到现在的rgba)

四、多列布局和弹性盒模型

五、盒子的变幻（2D、3D）

transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜

用于元素的直接或者鼠标感应变化，没有其他变幻参数（如延时，持续时间，变幻曲线），立即改变。

六、过渡和动画

transition: width 1s linear 2s;

过渡效果，transition通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化(hover)，hover状态定义结束状态，实现过渡效果。

transition

第一个参数是要动画的属性 all表示所有的属性都参与动画

第二个参数是动画时间

第三个是动画的形式

第四个是动画延迟时间

animation: myfirst 5s;
@keyframes myfirst {
0% {background: block;}
25% {background: red;}
50% {background: yellow;}
100% {background: green;}
}

动画效果，加强版的过渡效果，通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发。

区别：过渡动画和动画的区别：过渡动画只有开始和结束两个状态

七、媒体查询

八、阴影

35.