# 面试题目

**Repository Path**: kclovecodinng/interview_questions

## Basic Information

- **Project Name**: 面试题目
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 课程面试题

## ajax

##### ajax的应用场景有哪些？

**答：**

 \- 页面上拉加载更多数据、  

 \- 列表无刷新分页、    

 \- 表单项焦点 离开数据验证、   

 \- 搜素框提示文字下拉列表

#####  **ajax实现步骤**

 **答：**

 1.创建ajax对象

 2.告诉ajax请求地址以及请求方式

 3.发送请求（请求是对象，也会被浏览器转换为json对象传输，服务端使用JSON.Stringify()将json对象转换为json字符串。Get请求不能传递json对象格式的数据，传统网站的表单也是）

 4.获取服务器端给客户端的数据（服务器返回的大多是json对象，使用JSON.Parse将json字符串转换为json对象）

#####  **ajax状态码（xhr.readyState可以获取状态码，234在onreadyState（onload）中触发）**

**答：**

0：请求未初始化，还没有调用open

1：请求已经建立，未调用send方法

2：请求已经发送

3：请求正在处理，已经响应返回部分数据

4：响应已经完成，响应结束

##### ajax的错误处理（http状态码，xhr.status）

**答：**

1、网络畅通，服务端接收到请求，返回的不是预期的结果

2、网络畅通，服务端接收到请求，返回404状态码，请求地址错误

3、网络畅通，服务端接收请求，服务端返回500状态码

4、服务端返回200,代表请求成功

5、服务端返回301 ，代表资源（网页等）被永久转移到其它URL

##### 同步与异步

**答：**

同步：就是代码逐行执行；

异步：就是代码执行虽然需要花费时间，但是不会等着代码执行完，再执行后后续代码，还是直接执行后续代码。执行完后续代码，再回头看异步代码返回的结果。

##### ajax的同源

**答：**

两个页面同源就是协议、域名、端口相同

##### 跨域的几种方法（非同源请求数据的方法）

**答：**

1、JSONP（服务端方法），利用script的src属性，服务器响应一个函数调用，客户端定义函数，在函数内部对服务端返回的数据进行处理。

2、CORS 跨域资源共享

3、服务器端代理

4、iframe跨域

5、postMessage跨域

6、nodejs中间件代理跨域

##### Cookie和本地存储的区别

**答：**

1、localStorage所存储的信息是永久保存的，除非手动去remove；存放的数据大小一般为5Mb

2、sessionStorage仅在当前会话下有效，关闭页面或者浏览器后被清除。存放的数据一般为5Mb

3、cookie 默认如果不设置有效期，那么他默认是随着窗口关闭而清除；存放的数据大约为4K左右；用于服务器通信，每次都会携带在HTTP请求头中。

##### 在ajax跨域请求中，自定义请求头流程是什么？

**答：**

对于跨域请求并要求设置Headers自定义参数的时候的 “预请求”，如果遇到跨域并设置headers的请求，所有请求需要两步完成！

A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应

B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。

##### 自定义组件常用的有哪些和自定义指令

答：注册组件的四种方式： 全局组件、局部组件、Script方式注册组件、<template>创建组件。

自定义指令：vue自定义指令--directive，

对于全局自定义指令的创建，我们需要使用` Vue.directive`接口，

对于局部组件，我们需要在组件的钩子函数directives中进行声明。

##### 手写轮播图：

##### 

##### 事件修饰符：

答：五个事件修饰符：

**.stop** 阻止事件向上冒泡，等价于添加`event.stopPropagation()` 

 **.prevent** 阻止元素发生默认的行为，等价于添加`event.preventDefault()` 

 **.capture** 在捕获阶段触发监听函数

 **.self** 只当 `event.target === event.currentTarget` 时触发处理函数

 **.once** 事件将只会触发一次

 **.passive** 表示 listener 永远不会调用 `preventDefault()`



##### ajax如何封装成axios

答：  通过return  new Promise()



##### **for of for in 区别**

答：

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。 

for … in循环将把name包括在内，但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题，它只循环集合本身的元素。

##### vue技术栈

1、vue

是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链](https://link.jianshu.com?t=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fsingle-file-components.html)以及各种[支持类库](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fvuejs%2Fawesome-vue%23libraries--plugins)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2、Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。

3、vue-loader

使用预处理器

在 webpack 中，所有的预处理器需要匹配对应的 loader。vue-loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 属性自动推断出要使用的 loader。

4、vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：**嵌套的路由/视图表；模块化的、基于组件的路由配置；路由参数、查询、通配符；基于 Vue.js 过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的 CSS class 的链接；HTML5 历史模式或 hash 模式，在 IE9 中自动降级；自定义的滚动条行为。**
5、axios

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



##### nodejs处理高并发

eventproxy、async.mapLimit、async.queue控制并发



##### 项目上线的优化：

1、利用打包工具打包压缩前端代码

2、cdn托管

3、按需加载

4、图片压缩优化

##### js中的load先执行还是Jquery的ready先执行问题

onload需要页面上所有的资源都加载上之后执行，而ready则是DOM文档树已经解析完成时，说ready比onload快最显著的是比如一个页面上有一个很大的图片，加载要好久，onload只有在图片加载完成之后执行，而ready不必等图片加载完成.

##### **webpack可以做哪些优化**

 1、减少体积

2、模块热更新(HMR)

3、独立css 文件

4、压缩js, html, css 文件

5、合并压缩图片

6、按需加载

##### **webpack的生命周期是哪些**

先初始化

开始编译

分析入口文件，创建模块对象、

构建模块

输出



##### new一个对象经历了什么

（1）创建一个新对象；

（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；

（3）执行构造函数中的代码（为这个新对象添加属性）；

（4）返回新对象。

 **promise /async 区别**

async/await是基于promise实现的，他不能用于普通的回调函数
async/await使得异步代码看起来像同步代码
async/await与Promise一样，是非阻塞的。

##### http协议

超文本传输协议（英文：**H**yper**T**ext **T**ransfer **P**rotocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。

##### HTTP工作原理

\1. 客户端连接到Web服务器
一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，[http://www.luffycity.com](http://www.luffycity.com/)。

\2. 发送HTTP请求
通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

\3. 服务器接受请求并返回HTTP响应
Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

\4. 释放连接TCP连接
若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;

\5. 客户端浏览器解析HTML内容
客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。

##### 路由分包加载

  1.使用webpack中的syntax-dynamic-import 插件

​      npm install --save-dev babel-plugin-syntax-dynamic-import

  2.配置.babelrc文件（若没有，则新建这个文件，和package.json同级）

​     {

​         "plugins": ["syntax-dynamic-import"]

​     }

  \3. Vue-route提供语法：

​    将import Foo from '@pages/foo'

​       const Foo = () => import(@pages/foo') 

##### 普通盒子模型和ie模型的区别

普通盒子模型：标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

##### es6新增的一个数据类型

symbol

##### 如何判断一个数据类型是对象

instanceof  java中的方法

##### 发送请求拿到数据渲染到dom上都经历了哪些过程

生成DOM树，解析css和js，渲染页面，直到显示完成

##### 防抖和节流使用场景，具体代码

防抖处理：当我们重新频繁的输入后，并不会立即调用方法，只有在经过指定的间隔内没有输入的情况下才会调用函数方法；

节流处理：在一直输入的情况下每隔一段时间会触发一次函数

防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。

防抖就是在出发后的一段时间内执行一次，例如：在进行搜索的时候，当用户停止输入后调用方法，节约请求资源

节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次，类似打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次

##### Axios.all的用法，传入参数的要求；

处理并发请求;数组

##### promise.all .race这两种用法

```js
Promise
       .all([runAsync1(),runAsync2(),runAsync3()])
       .then(function(results){
          console.log(results);
        });
```

Promise.all`来执行前面的三个异步的函数，`all()`接收一个数组参数，里面的执行最终都返回`Promise`对象，只有等三个异步操作都执行完成后才会进入到`then`里面，`all`会把所有的异步操作的结果放在一个数组中传给`then`，就是上面的`results

有了`all`，可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，一个常用的场景：游戏类的素材比较多的应用，打开网页的时候，预先加载需要用到的各种资源，如图片，`flash`以及各种静态文件，等到所有都加载完成，我们再进行页面的初始化。
`race`的用法：

这个也是`Promise`类上面的私有方法，对于前面的`all`方法来说是：谁的程序执行的慢，就等谁执行完才回调。但是对于`race`来说：谁的程序执行的快，就以它为标准调用回调函数，其用法基本上是一样的，把上面`runAsync1`函数的延迟改为1秒


##### async await 说说项目中具体使用场景

场景1：多个异步需要按顺序：图片处理完成然后保存在本地

场景2：图片需要同时处理，但是要按顺序一张一张保存在本地

场景3：多张图片，处理一张保存一张，然后才能处理下一张

场景5： 你可能会这样：调用方法1，使用方法1返回的结果去调用方法2，然后使用两者的结果去调用方法3。

##### 深拷贝，浅拷贝 方法、两种以上方法，原生js

浅拷贝：

```
var obj = {a:1};
var b = obj;
console.log(b)
// 输出结果为1
```

深拷贝：创建空对象方法

```js
var obj = {
  a:1,
  c:{
    c1:1
  }
};
var b = {}
for(key in obj){
  b[key] = obj[key]
}
// 修改 obj的属性
obj.c.c1 = 2
console.log(b)
// 输出结果为 {a:1,c:{c1:2}}
```

json方法

```js
var obj = {
  a:1,
  c:{
    c1:1,
    c2:2
  }
};
var str = JSON.stringify(obj)
var b = JSON.parse(str)
// 修改 obj的属性
obj.c.c1 = 2
console.log(b)
```

递归深拷贝

```js
var obj = {
  a:1,
  c:{
    c1:1,
    c2:2
  }
};
function deepCopy(obj){
 // 判断拷贝的数据是对象还是数组 生成定义的数据
  var copy = Array.isArray(obj)? []:{}
  for(key in obj){
    // 循环的时候如果此项为引用类型，需要 在一次的将引用类型里面的值取出来
    if(typeof obj[key] == 'object'){
     // 再次调用该方法取数据
      copy[key] = deepCopy(obj[key])
    }else{
      copy[key] = obj[key]
    }
  }
  return copy
}
var b = deepCopy(obj)
console.log(b)
```

##### json方法如何实现深拷贝 ，都能拷贝哪些数据

不能拷贝函数

##### 平时怎么浅拷贝，说说具体用法

浅拷贝：

```
var obj = {a:1};
var b = obj;
console.log(b)
// 输出结果为1
```

##### 怎么实现递归深拷贝，说说具体代码，遇到函数怎么办

上面，函数判断function

##### js遍历对象有哪些方法，forEach能不能用 return ,要是要求数据return 如何实现

for in     for of  

不能return     这个问题可以使用数组的另外两个方法some()与every()

##### js原生怎么实现路由，路由的底层原理

上面路由系统 Router 对象实现，主要提供三个方法

- init 监听浏览器 url hash 更新事件
- route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
- refresh 执行当前url对应的回调函数，更新页面

##### vue的数据绑定原理，谈谈观察者模式

##### 对闭包的理解，举例项目中的使用

##### 对原型和原型链的理解





##### GET和POST区别

- GET传参通过url方式进行传递参数，url长度有限制，IE浏览器对URL的最大限制为2083个字符，
  对于Firefox浏览器URL的长度限制为65,536个字符
- POST通过request body传递参数里，参数没有限制
- GET方式不安全，POST比较安全
- 一半获取数据用get
- 提交数据用POST
- get和服务器只会有一次请求
- post为了在网路中保密特性，会发两次传输请求

##### pushState和popstate

pushState：HTML5新接口，可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。

**注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面!**仅仅使url的地址发生变化

popstate：用来监听页面前进后退等事件

```js
<button onclick="pushState()">
    跳转
  </button>
  <script>
  window.onpopstate = function(e) {
    console.log(e)
  }
  function pushState() {
    window.history.pushState({id:10},'测试','/home')
  }
  </script>
```

##### call和apply和bind

- call的使用，可以改变this指向，第一个参数为宿主对象，也就是要改变的this指向，后面的参数全部为当前函数的实参

  ```js
  const fn = function(sex,like) {
      this.sex = sex
      this.like = like
      console.log(this)
    }  
    var obj = {
      name: '张三',
      age: 19
    }
    fn.call(obj,'男','打篮球')
  ```

- apply：可以改变this指向，第一个参数为宿主对象，第二个参数为数组，数组每一项为当前函数的所有实参

  ```js
  const fn = function(sex,like) {
      this.sex = sex
      this.like = like
      console.log(this)
    }  
    var obj = {
      name: '张三',
      age: 19
    }
    fn.apply(obj,['男','打篮球'])
  ```

- bind：可以改变this指向，bind会基于原函数创建一个新的函数，并改变其his指向，指向bind的第一个参数，一旦通过bind改变this指向之后，后续不管通过什么方式调用，this都不会在改变了

  ```js
  const fn = function(sex,like) {
      this.sex = sex
      this.like = like
      console.log(this)
    }  
    var obj = {
      name: '张三',
      age: 19
    }
    var fn1 = fn.bind(obj,'男','打篮球')
    fn1()
  ```

##### 闭包

就是在一个函数作用域能够访问另一个函数的作用域

```js
function fn() {
    var a = 10
    return function getData() {
      return a
    }
  }

  function fn2() {
    const getData= fn()
    const a = getData()
    console.log(a)
  }
  fn2()
```

##### 递归

递归就是函数自己调用自己，一半想三级数据嵌套，进行三层层层循环，或者不知道有多少层，建议使用递归，递归必须要给一个终止条件，如果不给终止条件则进入死循环。



##### 你对vue中mvvm的模式设计有什么感想？

mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好

##### vue中利用索引修改数组的时候，页面会跟着同步吗？

利用索引修改数组的时候，页面不会进行同步，此时应该利用vue.set的方法进行设置数据

##### vue首屏加载过慢如何解决？

路由懒加载，会将原来打包一个app.js的文件打包成多个文件 ,异步组件，按需加载

webpack开启gzip压缩

如果图片过多，开启图片懒加载

使用cdn资源

如果首页是登录页，做多入口

##### vue中v-if和v-show有什么区别？

v-if和v-show都会让元素显示和隐藏，但是v-if是通过移除和添加dom元素，v-show是通过display:none来实现隐藏

##### vue中的父子组件传值和兄弟组件传值都是如何实现的？

父向子传值，主要通过子组件的props，获取父组件绑定的数据

子向父传值，主要通过子组件利用$emit触发父组件上的事件

兄弟组件传值利用eventbus的方式，主要利用创建一个空的vm实例，作为中间者

##### 你之前有做过spa类型的项目吗？怎么实现的？

spa就是单页面应用程序，而单页面应用程序，主要依靠路由来实现，路由根据不同的hash值来展示不同的组件

##### 路由中如何去除url上的‘#’#

路由有两种模式，一种为hash模式，另一种为history模式，开启history模式后自动去除#，开启history模式需要后台配合

```js
new VueRouter({
  mode:'history',
  route:[]
})
```

##### vue中的单项数据流和双向数据绑定是什意思？

单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据

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

##### vue中双向数据绑定的原理是什么？

vue双向数据绑定的原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的，通过Object.defineProperty监听数据发生变化然后通知订阅者（watcher），订阅者触发响应的回调

##### 为什么在使用v-for的时候需要添加key属性

因为vue在更新渲染dom的时候是根据新旧dom数进行对比的，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

##### 为什么vue组件中的data必须是函数

因为如果默认为data是对象的话，对象为引用类型，这样的话，所有复用的组件都是引用的同一个数据，但是如果是函数的话，每次函数都会先创建一个新的数据，从而使每个组件的数据独立

##### 你对vue生命周期的理解怎么样？

vue的生命周期就是vue实例的创建运行销毁的一个过程，在不同的阶段会触发不同的函数，这些函数也就是生命周期函数，比如create，在实例创建数据已经完毕，能够做一些数据的初始化，但是dom还没有渲染，mounted页面数据全部渲染完毕，可以在此函数内部操作dom

##### 你知道webpack中babel、plugin、loader都有什么作用吗？

babel用来出来es6转es5，plugin配置webpack的一些插件，loader用来配置解析处理第三方文件的

##### keep-alive的作用

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

##### 你知道路由钩子吗？

路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截所有的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了

##### 项目中如果涉及多个组件数据共享你如何解决？

可以启用vuex

##### vuex中的五个属性都是什么? 有什么作用？

State 存储数据
Getter 可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Action 包含任意异步操作，通过提交 mutation 间接更变状态
Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块

##### vue中如何实现深度监视？

```js
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
         console.log('obj.a changed');
      },
      deep: true
    }
  }
})
```



#### vue复习

前端的三大框架

vue、react、angular

#### vue的两个核心

组件系统、数据驱动

#### 什么是双向数据绑定？

v-model,数据发生变化，同步视图，视图发生变化，同步数据

#### 什么是单向数据流？

在父向子传值的时候，如果改变父组件的值，子组件会跟着同步更新，反之不允许

#### MVVM的设计思想的优势?

- 双向绑定技术，当Model变化时，View也会自动变化，view发生更新，model也跟着同步
- 我们减少了dom的操作，因为我们只需要关注数据就可以
- mvvm的设计思想大大提高了代码的耦合性

#### 事件传参

- 没有传递参数，事件函数的默认第一个参数是事件对象
- 如果传递了参数，事件函数就没有了默认参数，全部变为对应位置的实参的形参，就没有了事件对象
- 既有自己传的的参数，也有事件对象，通过$event传递事件对象，在事件函数内部通过通过对应位置的形参来接收事件对象，传递刀了event没有强制性的位置，但是建议放在最后

#### 自定义指令：directive

[文档](https://cn.vuejs.org/v2/api/#Vue-directive)

为什么自定义指令？

vue提供的系统指令满足不了我们的需求，那么我们就需要自定义指令

通过Vue.directive进行自定义指令的定义

- `bind`：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- `inserted`：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- `update`：所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

#### 计算属性：computed

定义的时候是一个方法，使用的时候当作属性使用

只要return后面的数据发生变化，该计算属性就会重新计算

计算属性具有缓存功能

#### 监听器：watch

watch侦听器如果监听的是一个对象，需要开启深度监听

```js
watch:{
  num:{
    // 监听数据发生变化的处理函数
    handler(newNum) {
      console.log(newNum)
    },
    // 是否开启深度监听
    deep: true
  }
}
```

#### 过滤器

```html
<div id="app">
    <div>
        {{ date | formatDate('-')}}
    </div>
    <div>
        {{ date | formatDate('/')}}
    </div>
  </div>
  <script src="vue.js"></script>
  <script>

    Vue.filter('formatDate',(data,line)=>{
      console.log(data,line)
      const y = data.getFullYear()
      const m = (data.getMonth()+1).toString().padStart(2,0)
      const d = data.getDate().toString().padStart(2,0)
      return y+line+m+line+d
    })
   
    new Vue({
      el: '#app',
      data:{
        date: new Date
      }
    })
  </script>
```

#### 生命周期函数

生命周期：是指一个对象从创建到运行到销毁的整个过程，被称为生命周期

生命周函数：在不同的生命周期阶段会自动执行对应的函数，而这些函数则被成为生命周期函数

```js
// 创建阶段
      beforeCreate() {
        // 这个生命周函数，代表开始创建实例了
        console.log('beforeCreate',this.num)
      },
      created () {
        // 代表数据和方法已经初始化成功了,此处dom还没有挂载到页面上
        console.log('created',this.num,this.$el)
      },
      beforeMount () {
        // 挂在之前
        console.log('beforeMount',this.$el)
      },
      mounted () {
        // dom已经挂载了
        console.log('mounted',this.$el)
      },
      // 运行更新阶段
      beforeUpdate () {
        // 数据更新，页面还没有同步
        console.log('beforeUpdated',this.num,document.getElementById('app').innerHTML)
      },
      updated () {
        // 数据更新，页面已经同步
        console.log('updated',this.num,document.getElementById('app').innerHTML)
      },
      // 销毁阶段
      beforeDestroy () {
        // 销毁之前
        console.log('beforeDestroy')
      },
      destroyed () {
        // 已经销毁了
        console.log('destroy')
      }
```

#### 组件

##### 如何创建一个全局组件

通过Vue.component来创建一个全局组件，第一个参数是组件名字，第二个参数是组件的配置对象，可以通过template配置组件的结构，data定义数据等等

为什么组件内部的data是一个函数？

为了保证组件在每次使用的时候保证数据是当前组件唯一的，互不影响

##### 如何创建一个局部组件

在组件内部通过components来创建一个局部组件

全局组件和局部组件的区别

局部组件：只能在当前的父组件中使用

全局组件： 在任意地方使用

##### 如何定义局部自定义指令

在组件内部通过directives来创建一个局部指令

全局指令和局部指令的区别

局部指令：只能在当前的组件中使用

全局指令： 在任意地方使用

##### 如何定义局部过滤器

在组件内部通过filters来创建一个局部过滤器

全局过滤器和局部过滤器的区别

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

全局过滤器： 在任意地方使用

#### 组件传值

##### 父向子传值

- 父亲怎么传：通过属性绑定形式传
- 儿子怎么接收：通过props来接收

##### 子向父传值

- 子怎么传：通过this.$emit触发一个自定义事件，并且发送一个值
- 父怎么接收：通过定义自定义事件的事件函数的形参来接收

##### 兄弟组件传值

定义一个事件中心，或者是第三方

接收值的组件：通过该事件中心的$on来定义自定义事件的事件函数来接收值

```js
eventBus.$on('getTab1',(data)=>{
  console.log('接收tab1传递的值',data)
})
```

另一个兄弟组件怎么传：通过事件中心的$emit触发对应的 刀了 on的事件，并且把值传递过去

```js
eventBus.$emit('getTab1',this.num)
```

##### 跨组件传值

```js
Vue.component('my-sub1',{
      template:'#my-sub1',
      data() {
        return {
          money: 10000000
        }
      },
      provide:{
        money:1000
      },
      components:{
        'sub-a':{
          template:'<div>子组件<sub-b></sub-b></div>',
          components:{
            'sub-b':{
              template:'<div>子组件{{money}}</div>',
              inject:['money']
            }
          }
        }
      }
    })
    new Vue({
      el: '#app'
    })
```

#### 组件插槽

- 默认插槽：

  - 在组件标签中间可以传递一些子节点
  - 组件内部利用slot标签进行接收

- 具名插槽

  - 在组件标签中间通过定义slot的名字传递子节点

    ```html
    <my-banner>
      <div slot="header">
        头部
      </div>
      <div slot="footer">
        底部
      </div>
    </my-banner>
    ```

  - 组件内部利用slot的name进行对应接收

    ```html
    <template id="banner">
      <div>
        <slot name="header"></slot>
        <slot name="footer"></slot>
      </div>
    </template>
    ```

- 作用域插槽

  - 在组件内部定义数据，将数据传递给插槽的结构

  - 通过给slot动态绑定属性

    ```js
    <template id="my-li">
        <ul>
          <li v-for="item in arr">
            <slot :row="item"></slot>
          </li>
        </ul>
      </template>
    ```

  - 插槽内部：通过slot-scope=“scope”来接收

    ```html
    <my-li>
      <template slot-scope="scope">
        <p>{{scope.row}}</p>
      </template>
    </my-li>
    <my-li>
      <template slot-scope="scope">
        <a href="04-侦听器.html">{{scope.row}}</a>        
      </template>
    </my-li>
    ```

    

#### Promise的使用

利用Promise处理异步解决回调地狱的问题

Promise的all的方法

Promise的race的方法

面试题：

现在有三个接口地址，需要三个接口地址请求完事之后进行下一步的逻辑处理(不一定按顺序请求完成)

http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1

http://www.liulongbin.top:3005/api/getnewslist

http://www.liulongbin.top:3005/api/getlunbo

```js
// .then回调
axios.get('http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1').then(res=>{
  console.log(res)
  axios.get('http://www.liulongbin.top:3005/api/getnewslist').then(res=>{
    console.log(res)
    axios.get('http://www.liulongbin.top:3005/api/getlunbo').then(res=>{
      console.log(res)
    })
  })
})

// .then返回新的Promise继续调用.then
axios.get('http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1').then(res=>{
  return axios.get('http://www.liulongbin.top:3005/api/getnewslist')
}).then(res=>{
  return axios.get('http://www.liulongbin.top:3005/api/getlunbo')
}).then(res=>{
  console.log('三个请求完事')
})

// async await
const asyncHandle = async function(){
  const res1 = await axios.get('http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1')
  const res2 = await axios.get('http://www.liulongbin.top:3005/api/getnewslist')
  const res3 = await axios.get('http://www.liulongbin.top:3005/api/getlunbo')
  console.log(res1,res2,res3)
}

asyncHandle()
// Promise all方法
const getComments = new Promise(()=>{
  axios.get('http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1')
})

Promise.all([
  axios.get('http://www.liulongbin.top:3005/api/getcomments/13?pageindex=1'),
  axios.get('http://www.liulongbin.top:3005/api/getnewslist'),
  axios.get('http://www.liulongbin.top:3005/api/getlunbo')
]).then(res=>{
  console.log(res)
})
```

#### axios拦截器

请求拦截

axios.interceptors.request.use

响应拦截

axios.interceptors.response.use

#### 路由

什么是路由？

路由就是对应关系，组件和url地址，根据不同的地址显示不同的组件，路由也是实现spa（单页面应用程序）的主要核心，因为单页面应用程序，就是只有一个html，在这个html里面切换组件，根据url，例如地址为/home,在这个页面中就显示home组件

前端路由：url和组件

后端路由：根据不同的地址请求不同的接口

[路由](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB)

##### 在vue中路由传参

- params传参

  - 在跳转的时候可以通过/home/10

  - 路由规则：

    ```js
    new VueRouter({
        routes: [
            {
              path: '/home/:id',
              component: Home
            }
        ]
    })
    ```

  - 组件内部怎么来接收参数

    ```js
    this.$route.params.id
    ```

- query传参

  - 在跳转的时候可以通过/home?id=10

  - 组件内部怎么来接收参数

    ```js
    this.$route.query.id
    ```

路由history模式注意的问题

##### 嵌套路由

##### 编程式导航

##### 路由钩子

全局钩子：都会对所有的路由进行拦截

beforeEach：进入之前

afterEach：已经进入了

路由独享钩子：可以针对某一个路由进行拦截，这个需要写在路由规则里

```js
 {
    path: '/',
    name: 'home',
    beforeEnter: (to,from,next)=>{
      console.log('即将进入home')
    },
    component: Home
  }
```

组件内的守卫：

针对组件进行拦截

```js
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('即将离开about')
    if(confirm('当前表单没有提交？确定要离开首页？')){
      next()
    }
    
  }
```

#### vue脚手架的安装和使用

##### 命令行方式

[配置文档](https://blog.csdn.net/weixin_41819098/article/details/88900820)

利用vue.config.js关闭esLint

##### ui界面方式

[文档](https://blog.csdn.net/weixin_41819098/article/details/91901115)

##### 安装element-ui

- 安装vue-cli-plugin-element插件

##### 使用element中select组件

- 注册组件

  ```js
  import Vue from 'vue'
  import { Button, Select } from 'element-ui'

  Vue.use(Button)
  Vue.use(Select)
  ```

- 使用组件

  ```html
  <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  ```

- 复制数据

  ```js
   options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          value: ''
  ```

##### 安装axios

- 安装依赖》运行依赖》axios
- 使用axios发送请求
- 利用Vue.prorotype挂载到原型上

#### vue动画

[文档](https://cn.vuejs.org/v2/guide/transitions.html)

##### 利用类名添加动画

在进入/离开的过渡中，会有 6 个 class 切换。

1. `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。
4. `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。

- 首先给需要添加动画的元素用transition包裹起来

- 利用类名实现动画

  ```css
  .v-enter,.v-leave-to{
    transform: translate(200px,0)
  }
  .v-enter-active,.v-leave-active{
    transition: transform 1s;
  }
  .v-enter-to,.v-leave{
    transform: translate(0,0)
  }
  ```

- 自定义动画类名

  ```html
  <transition name="box2">
    <div class="box" v-show="flag">

    </div>
  </transition>
  ```

  ```css
  .box2-enter,.box2-leave-to{
    opacity: 0;
  }
  .box2-enter-active,.box2-leave-active{
    transition: opacity 1s;
  }
  .box2-enter-to,.box2-leave{
    opacity: 1;
  }
  ```

##### 结合css动画库设置动画

- 引入css动画库


- 通过enter-active-class、leave-active-class设置动画

  ```html
  <transition
              enter-active-class="animated bounceIn"
              leave-active-class="animated bounceOut"
              >
    <div class="box" v-show="flag">

    </div>
  </transition>
  ```

### 加深面试题

#### 虚拟dom

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容

![](images/虚拟DOM.png)

#### Diff算法

虚拟dom高效更新执行过程

- 初次渲染时，会根据model数据创建一个虚拟DOM对象（树）
- 根据虚拟DOM生成真正的DOM，渲染到页面
- 当数据变化后，会重新根据新的数据，创建新的虚拟DOM对象（树）
- 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容
- 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面
- 什么是虚拟dom：用js对象来表示页面上dom元素的的样式体现
- 虚拟dom的作用：高效更新页面，还有就是让react脱离了浏览器的概念
- 怎么来高效更新页面的：就是在第一次渲染页面的时候生成一份初始的虚拟dom树，然后当数据改变之后，再生成一份虚拟dom树，然后根据新旧dom树进行对比，对比完成之后，把有区别的进行更新
- diff算法的作用就是：新旧虚拟dom树在对比的时候就是通过diff算法来对比的
- diff算法又是怎么去对比的：tree diff、component diff、element diff

![](images/diff算法.png)

面试语术：

你知道虚拟dom吗？简单又谈一下？

虚拟dom可以实现高效更新，（后面如果自己能说一气说出来）

如何实现高效更新的？

利用新旧虚拟dom树进行对比，从而进行局部进行更新

如何进行新旧dom树进行对比？

利用diff算法，主要是tree diff树对比，component diff 组件对比，element diff 元素对比

加上一些其他话术

所以虚拟dom在前端中不管是vue、react等等都采用

#### axios配置代理服务器

什么是跨域？

在浏览器里面域名、端口、ip地址、协议，有任何一项不同，则跨域

A网站：http://localhost:8080/#/

B网站：http://localhost:3000/#/

处理跨域的方式？

JsonP（只能处理get请求）、cors（后端开启）、代理服务器

```js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      },
      '/get': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}
```

#### 小程序分包加载

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个**主包**。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而**分包**则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

- 整个小程序所有分包大小不超过 12M
- 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

代码演示,分包加载之前

```json
pages: [
  'pages/tabs/home',
  'pages/tabs/cates',
  'pages/tabs/search',
  'pages/tabs/cart',
  'pages/tabs/my',
  'pages/goods_list',
  'pages/goods_detail/main',
  'pages/order',
  'pages/orderList'
]
```

抽离之后

```js
pages: [
      'pages/tabs/home',
      'pages/tabs/cates',
      'pages/tabs/search',
      'pages/tabs/cart',
      'pages/tabs/my',
      'pages/order',
      'pages/orderList'
    ],
    subpackages: [
      {
        name: 'goods',
        root: 'goods',
        pages: [
          'goods_list',
          'goods_detail/main'
        ]
      }
    ]
```

图片或者图标等资源文件使用线上资源

#### v-if和v-for避免结合使用

因为v-for的优先级大于v-if,所以会先根据所有数据生成结构，然后在根据，v-if进行按需渲染

```html
<div id="app">
    <ul>
      <li v-for="item in arr" v-if="item%2===0">{{ item }}</li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [
          1,2,3,4
        ]
      }
    })
  </script>
```

我们可以采用计算属性来避免此问题，这样的话，先通过计算属性，计算出要渲染的数据，然后直接循环计算属性即可

```html
<div id="app">
    <ul>
      <li v-for="item in newArr">{{ item }}</li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [
          1,2,3,4
        ]
      },
      computed: {
        newArr() {
          return this.arr.filter(item=>{
            return item%2===0
          })
        }
      }
    })
  </script>
```

#### vue中route和router的区别

+ route是当前路由信息，可以获取到当前路由地址参数等等
+ router是全局路由实例对象，可以通过router进行路由的跳转后退等等

#### 如何封装一个插件

+ 定义一个button组件，在index.js中引入并注册

+ 在components中创建一个index.js

  ```
  import sgButton from './button.vue'
  function install (Vue) {
    Vue.component(sgButton.name, sgButton)
  }

  export default {
    install
  }
  ```

+ 在main.js中导入该js文件，当调用Vue.use方法，会默认调用内部的install方法


面试题

你有封装过插件吗？  Vue.use的原理是什么？

当调用Vue.use方法，会默认调用内部的install方法,install这个方法默认的第一个形参就是Vue,这样的话我们就可以通过Vue注册一些全局组件，给Vue扩展一下方法。

#### vueI18n的使用

vue中实现语言切换的方式如何实现的

1.NPM 项目安装

 ```
 cnpm i vue-i18n
 ```

2.使用方法

```
/* 国际化使用规则 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
<!-- 需要国际化的数据定义在此处 -->
const messages = {
  en: {
    message: {
      hello: 'world hello'
    }
  },
  zh: {
    message: {
      hello: '世界'
    }
  }
}
<!-- 使用i18n -->
const i18n = new VueI18n({
  locale: 'zh',
  messages
})

export default {
  data () {
    return {
      hello: this.$t('message.hello')
    }
  },
  i18n
}
```
3.页面数据使用

```
<div id="#app">
  <p>{{ $t("message.hello") }}</p>
</div>
```

4.案例练习

###### 定义基本结构

```html
<div id="app">
  <button>切换语言</button>
  <ul>
    <li>首页</li>
    <li>新闻</li>
    <li>关于</li>
    <li>概况</li>
  </ul>
</div>
```

```样式
ul{
  list-style: none;
  li{
    width: 20%;
    height: 70px;
    line-height: 70px;
    background: green;
    color: #fff;
    float: left;
    margin-left: 2%;
    text-align: center;
    line-height: 70px;
  }
}
```

###### 定义语言包

zh.js

```js
export default {
  nav: ['首页', '新闻', '概况', '关于']
}
```

en.js

```js
export default {
  nav: ['home', 'news', 'gk', 'about']
}
```

###### 在main.js中引入语言包

```js
import zh from './i18n/zh.js'
import en from './i18n/en.js'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    zh,
    en
  }
})
```

###### 数据渲染和切换

```html
<template>
  <div id="app">
    <button @click="changeLang">切换语言</button>
    <ul>
      <li v-for="(item, index) in $t('nav')" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang () {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
    }
  }
}
</script>
```

#### keep-alive

### js

js静态成员和实例成员

静态成员：静态成员 在构造函数本身上添加的成员  如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问

实例成员：实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问