​

** # Vue路由**

分为history和hash

hash路由特点  有#  

hash模式所有的工作都是在前端完成的，不需要后端服务的配合,因此改变 hash 不会重新加载页面。

hash模式的实现方式就是通过监听URL中hash部分的变化，从而做出对应的渲染逻辑

hash模式下，URL中会带有#，看起来不太美观

history的实现，  前端的 URL 必须和实际向后端发起请求的 URL 一致，如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

需要服务器做以下简单的配置，通过监听pushState及replaceState事件，处理前端业务逻辑

# vue路由的跳转方式有几种

1、

2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4、this.$router.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

router.push、router.replace、router.go、router.back的区别？

router.push：跳转，并向history栈中加一个记录，可以后退到上一个页面

router.replace：跳转，不会向history栈中加一个记录，不可以后退到上一个页面

router.go：传正数向前跳转，传负数向后跳转

router.back 返回到上一级页面

# vue 路由传参数如何实现、query 和 params

主要通过 query 和 params 来实现

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

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

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

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

5）to=”/goods?id=1001”this.然后在接收的页面通过 $route.query.id 来接收

# 路由对象route和router的区别

route 是“路由信息对象”，包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

router 是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

# 路由懒加载

使用原因：在单页应用中，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 原理：vue 异步组件技术：异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。

# 指令部分进行扩展

vue常用修饰以及常见指令

修饰符

.stop  阻止事件冒泡

.cpture 设置事件捕获

.self  只有当事件作用在元素本身才会触发

.prevent 阻止默认事件，比如超链接跳转

.once 事件只能触发一次

.native 触发js原生的事件

.number 把文本框的内容转换为数字

.trim  去除文本框左右空格

⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析 html 标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素

⑻v-else：条件渲染指令，必须跟 v-if 成对使用

⑼v-else-if：判断多层条件，必须跟 v-if 成对使用

⑽v-cloak：解决插值闪烁问题

⑾v-once：只渲染元素或组件一次

⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

key值使用id 比index 好

# webpack 打包

说一下模块打包运行原理？

如果面试官问你Webpack是如何把这些模块合并到一起，并且保证其正常工作的，你是否了解呢？

首先我们应该简单了解一下webpack的整个打包流程：

1、读取webpack的配置参数；

2、启动webpack，创建Compiler对象并开始解析项目；

3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；

4、对不同文件类型的依赖模块文件使用对应的Loader进行编译输出资源：

根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

# 数组去重方法

1 数组排序  前后一个比较 如果相等就不push，不相等就push

2 利用indexof方法， 找不到返回-1      创建一个空数组 空数组.indexof(原数组每一项)    == -1 就 push进空数组里

3  用数组的includes()    创建一个空数组，newArr.includes(arr[i]) 结果是false的push到新数组里，结果是true的不做处理

4 利用 ES6的set 方法  function unique10(arr) {

            //Set数据结构，它类似于数组，其成员的值都是唯一的

            return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组

        }

        console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

        // 结果是[1, 2, 3, 5, 6, 7, 4]

5 利用for嵌套for，然后splice去重（ES5中最常用）

function unlink(arr) {

    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组

        for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组

            if (arr[i] == arr[j]) {          // 判断俩个值是否相等

                arr.splice(j, 1);           // 相等删除后者

                j--;

            }

        }

    }

    return arr

}

console.log(unlink(arr));

# 清楚浮动的方法？(多次出现在面试题)

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

http 状态码

2开头 请求成功  200成功

3开头 请求被重定向

4开头 请求错误 404 服务器找不到请求的页面

5开头 服务器错误

js哪些操作会引起内存泄漏

1 意外的全局变量

2 闭包引起的内存泄露

3 没有清理的DOM元素

4 被遗忘的定时器或者回调函数

bootstrap 响应式实现的原理

百分比布局＋媒体查询

# 事件冒泡  ：

通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

事件委托 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托

# CSS sprites css精灵图

  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置

# 从输入url到显示页面，都经历了什么？

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

# 闭包的特性

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

垃圾回收机制

1标记清除   标记清除法分为标记和清除两个阶段，标记阶段需要从根节点遍历内存中的所有对象，并为可达的对象做上标记，清除阶段则把没有标记的对象（非可达对象）销毁。

2引用计数   引用计数法主要记录对象有没有被其他对象引用，如果没有被引用，它将被垃圾回收机制回收。它的策略是跟踪记录每个变量值被使用的次数，当变量值引用次数为0时，垃圾回收机制就会把它清理掉。

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

# Vue生命周期

​      挂载阶段  beforeCreate create beroreMounted mounted

​                         更新阶段  beforeUpdate  updated

​          销毁阶段  beforeDestroy  destroyed

• vue的实例加载完成是在哪个声明周期完成呢

beforeCreate

• vue的dom挂载完成是在哪个声命周期里呢

mounted

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

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

代码更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

代码销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

代码常用钩子简易版

父create->子created->子mounted->父mounted

# watch

仅仅是数据发生改变的时候会侦听到；

只是会检测到你写在watch里的那些属性,没写的就不会触发。

# updated

执行到它的时候时候是数据发生变化且界面更新完毕；

不能监听到路由数据(例如网址中的参数)；

所有的数据发生变化都会调用(消耗性能)；

每次触发的代码都是同一个

# 什么是SSR？

SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

2、怎么在created里面操作dom?

this.$nextTick()

# React 生命周期 （新）

​ 创建时 constructor    getDerivedStateFromProps     render   componentDidMount

​ 更新时 getDerivedStateFromProps    shouldComponentUpdate    render     getSnapshotbeforeUpdate ( 未使用getSnapshotbeforeUpdate|  使用getSnapshotbeforeUpdate)     componentDidUpdate

​ 卸载时 componentWillUnmount

响应式

Vue2.0  definproperty  和Vue3.0proxy  

Vue2监听的是具体属性 新增加的就监听不到，需要用$set来修改

Vue3.0proxy   监听的是整个对象

# 浅拷贝实现方法

1 Object.assign()   

2 函数库lodash的_.clone方法  

3 展开运算符...   

4 Array.prototype.concat()

5 Array.prototype.slice()

# 深拷贝的实现方式

1 JSON.parse(JSON.stringify())    缺点 undefined和函数是不能复制的

2 函数库lodash的_.cloneDeep方法

3 jQuery.extend()方法    $.extend(deepCopy, target, object1, [objectN])//第一个参数为true,就是深拷贝

4 手写递归方法

juejin.cn/post/684490…      

# transition和animation的区别

1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；  “transition只能设置开始与结束2个关键帧的状态  需要出发事件才能执行

2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行

 可以设置多个帧。

# vue 初始化页面闪动问题。

需要在style中设置样式[v-clock]{display:none}

# vuex页面刷新数据丢失问题的2种解决方式

为什么说刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

方法1  存到sessionStorage  localStorage  cookie  

方法2  插件  vuex-along  好多插件

# vuex存储和本地存储(localstorage、sessionstorage)的区别

区别：

1.vuex存储在内存；

2.localstorage（本地存储）则以文件的方式存储在本地,永久保存；

3.sessionstorage( 会话存储 ) ,临时保存。

4.localStorage和sessionStorage只能存储字符串类型，

5对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到响应式，vuex可以绑定数据响应式。

# loader 和plugm的区别

由于webpack 本身只能打包commonjs规范的js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包

loader 但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。

plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

# js构造函数的静态成员和实例成员

js的构造函数（在别的后台语言上叫做类）上可以添加一些成员，可以在构造函数内部的this上添加，可以在构造函数本身上添加，通过这两种方式添加的成员，就分别称为实例成员和静态成员

实例成员:构造函数中this上添加的成员

静态成员：构造函数本身上添加的成员

实例成员，只能由实例化的对象来访问

静态成员，只能由构造函数本身来访问 实例化对象的proto指向构造函数的prototype属性指向的对象，实例化的对象可以访问到它后者身上的成员

# 构造函数生成实例的执行过程：使用面向对象编程时,new关键字做了什么？

新建了一个Object对象

修改构造函数this的指向，是其指向新建的Object对象，并且执行构造函数

为Object对象添加了一个proto属性，使其指向构造函数的prototype属性

将这个Object对象返回出去

要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有 length 属性，用于指定数组的长度。如果没有 length 属性，那么转换后的数组是一个空数组。

2、该类数组对象的属性名必须为数值型或字符串型的数字

# 类数组转数组

1 for 循环

2 [].slice.call() （calll方法：[].map.call()）

3 ES6语法：Array.from()

4 ES6语法：展开运算符

mtw.so/6cq7Wl

# vue 与 react的区别

相同点 ：

都是使用了虚拟dom

组件化开发

父子之间通信单项数据流

都支持服务端渲染

不同点：

reacct 的jsx vue的是 template

数据变化，react 手动 setState vue自动响应式处理 proxy object.DefineProperty

react 单向数据流 ，vue双向数据流

react 的 redux mobx vue 的vuex 。pinia

# Vuex

是什么    vuex是一个状态管理工具，所谓状态的是就是数据，采用集中式存储管所有组件的状态，是为了结局中大型项目一个数据共享的问题。vuex 他可以将数据保存到本地，数据是响应式的，能够保持数据页面的共享，提高开发效率。

vuex核心：

state：vuex的基本数据，数据源存放地，用于定义共享的数据。

getter：从基本数据派生的数据，相当于state的计算属性

mutation：提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是cmmi传过来的数据

action：action是用来做异步操作的，一般用来发请求，在 action 中写入函数，然后在页面中用dispatch调用，然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state。

modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理  

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。方便管理

本文为CSDN博主「有两把刷子」的原创文章

# vue的删除数组和原生删除数组的区别delete

删除数组

delete只是把数组元素的值变成empty/undefined，元素的键不变，数组长度不变。

Vue.delete直接删除数组，改变数组的键值和长度。

删除对象

两者相同，都会把键名（属性/字段）和键值删除。

# 组件特性及好处、组件的基本组成

(1) 特性:重用性、可指定性、互操作性、高内聚性、低耦合度

(2) 好处：组件可以扩展HTML元素、封装可重用代码

template 结构（html代码）

script行为

style样式

# VUE组件中的data为什么是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据)

Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

# slot (插槽)

插槽就是父组件往子组件中插入一些内容。

有三种方式，默认插槽，具名插槽，作用域插槽

默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据

具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。这样就可以指定多个可区分的slot，在使用组件时灵活地进行插值。

作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过v-slot=""要穿过来的数据“来接受数据。

# 函数式组件使用场景和原理

函数式组件与普通组件的区别

1.函数式组件需要在声明组件是指定 functional:true

2.不需要实例化，所以没有this,this通过render函数的第二个参数context来代替

3.没有生命周期钩子函数，不能使用计算属性，watch

4.不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件

5.因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement

6.函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)

优点 1.由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件 2.函数式组件结构比较简单，代码结构更清晰

使用场景：

一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件

“高阶组件”——用于接收一个组件作为参数，返回一个被包装过的组件

# vue的项目中问题

单页面应用和多页面应用区别以及优缺点，

单页面：只有一个html页面，跳转方式是组件之间的切换

优点：跳转流畅、组件化开发、组件可复用、开发便捷

缺点：首屏加载过慢

多页面：有多个页面，跳转方式是页面之间的跳转

优点：首屏加载块

缺点：跳转速度慢

# 为什么要使用脚手架

快速开始一个vue项目，不用手动配置，直接开发

# vue中如何解决跨域问题？

在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

 changOrigin: true,  //允许跨域

#  assets和static的区别？

assets中的文件会经过webpack打包，重新编译，推荐在assets存放js等需要打包编译的文件。

static中的文件，不会打包编译。static中的文件只是复制一遍。static中建议放一些外部第三方文件，自己的放assets里，别人的放static中。（图片推荐放在static里）

按需引用

首先安装按需引用插件，然后配置，然后才可以用

# 请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法

assets 文件夹是放静态资源；

components 是放组件；

router 是定义路由相关的配置;

view 视图；

app.vue 是一个应用主组件；

main.js 是入口文件

# Vue 怎么兼容 IE

使用 babel-polyfill 插件,和前缀名 hack

# vue-cli 替我们做了哪些工作

vue-cli 是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。

vue-cli 完成的功能：

.vue 文件 --> .js 文件 ES6 语法 --> ES5 语法 Sass,Less,Stylus --> CSS 对 jpg,png,font 等静态资源的处理 热更新 定义环境变量，区分 dev 和 production 模式 如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

# vue 中使用了哪些设计模式

1.工厂模式 - 传入参数即可创建实例 虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode

2.单例模式 - 整个程序有且仅有一个实例 vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

3.发布-订阅模式 (vue 事件机制)

4.观察者模式 (响应式数据原理)

5.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

# Vue和JQuery的区别在哪?为什么放弃JQuery用Vue?

jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据就行它是个框架

jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能它是个库

Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上

Vue集成了一些库，大大提高开发效率，例如Route、Vuex等等

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

① 把不常改变的库放到 index.html 中，通过 cdn 引入

③ 不生成 map 文件，找到 config/index.js 文件，修改为 productionSourcceMap：false

④vue 组件尽量不要全局引入

⑤ 使用更轻量级的工具库

⑥ 开启 gzip 压缩

# javascript原型与原型链

每个函数都有一个prototype属性，被称为显示原型

每个实例对象都会有_ proto _属性,其被称为隐式原型

每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype

每个prototype原型都有一个constructor属性，指向它关联的构造函数

# javascript 创建对象的几种方式

1、我们一般使用字面量的形式直接创建对象

（1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。

（2）第二种是构造函数模式。js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么我们就可以把它称为构造函数。

（3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。

（4）第四种模式是组合使用构造函数模式和原型模式，这是创建自定义类型的最常见方式。

（5）第五种模式是动态原型模式，这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。

（6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，

###  http1.0、http1.1、http2.0的区别

1. 1和1.0相比，1.1可以一次传输多个文件

2. http1.x解析基于文本，

3. http2.0采用二进制格式，新增特性 多路复用、header压缩、服务端推送(静态html资源)

### POST的content-type几种方式

POST 方法中对发送数据编码的方式，也就是 Content-Type 有四种方式，其中默认是 application/x-www-form-urlencoded，最方便的是 application/json 。

四种方式包括：

application/x-www-form-urlencoded （URL encoded）

multipart/form-data （键值对型数据）

application/json (Json 类型数据)

text/xml （xml）

传统的ajax请求时候，Content-Type默认为"文本"类型。

传统的form提交的时候，Content-Type默认为"Form"类型。

axios传递字符串的时候，Content-Type默认为"Form"类型。

axios传递对象的时候，Content-Type默认为"JSON"类型

# GET和POST区别（高频）

1.GET在浏览器回退不会再次请求，POST会再次提交请求

2.GET请求会被浏览器主动缓存，POST不会，要手动设置

3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会

4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制

5.GET参数通过URL传递，POST放在Request body中

6.GET参数暴露在地址栏不安全，POST放在报文内部更安全

7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作

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

Ge和post的选择：

1.私密性的信息请求使用post（如注册、登陆）。

2.查询信息使用get。

# Http和Https区别（高频）

1.HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头

2.HTTP 是不安全的，而 HTTPS 是安全的

3.HTTP 标准端口是80 ，而 HTTPS 的标准端口是443

4.在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层

5.HTTP 无法加密，而HTTPS 对传输的数据进行加密，证的网络协议，安全性高于HTTP协议。

6.HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书，一般免费证书少，因而需要一定费用。

# 什么是ajax？ajax有什么优缺点？

ajax不是语言，ajax是（异步的js和xml）一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

优点

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试

# 原生Ajax的创建过程

1.创建xhr 核心对象

var xhr=new XMLHttpRequest();

2.调用open 准备发送

参数一：请求方式

参数二: 请求地址

参数三：true异步，false 同步

xhr.open('post','www.baidu.com/api/search'…)

3.如果是post请求，必须设置请求头。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

4.调用send 发送请求 （如果不需要参数，就写null）

xhr.send('user=tom&age=10&sex=女')

5.监听异步回调 onreadystatechange

判断readyState 为4 表示请求完成

判断status 状态码 为 200 表示接口请求成功

responeseText 为相应数据。字符串类型。

xhr.onreadystatechange=function(){

    if(xhr.readyState==4){

        if(xhr.status==200){

            console.log(xhr.responseText);

            var res=JSON.parse(xhr.responseText);

            console.log(res);

            if(res.code==1){

            modal.modal('hide');

           location.reload();

       }

    }

            

            

备注：如果是post请求，想要传json格式数据。

设置请求头

1.xhr.setRequestHeader('Content-Type', 'application/json')

open发送数据

2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

# 什么是npm？Npm的使用场景？

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。

使用场景：

a. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

b. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

c. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

# Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

# git命令

1. git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)

2. git status 查看文件状态

3. git add 文件列表 追踪文件

4. git commit -m 提交信息 向仓库中提交代码

5. git log 查看提交记录

1.分支明细

（1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。

（2）开发分支（develop）：作为开发的分支，基于 master 分支创建。

（3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建

2.分支命令

（1）git branch 查看分支

（2）git branch 分支名称 创建分支

（3）git checkout 分支名称 切换分支

（4）git merge 来源分支 合并分支 (备注：必须在master分支上才能合并develop分支)

（5）git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除）

3.暂时保存更改

（1）存储临时改动：git stash

（2）恢复改动：git stash pop

#  判断是否为数组

1 instanceof      前提需要在同一个全局的window下才会返回true

 2  Array.isArray()

3  Object.prototype.toString.call()

 4  var a =[]    console.log（a.constructor ==Array）

（typeof  判断基本数据类型）

 数组的常用方法

​编辑

原型链

​编辑

function Fu(){

}

var son  =new  Fu()

son.__proto_==Fu.prototype

son.__proto__.__proto__==Fu.prototype.__proto__

son.__proto__.constructor == Fu

son.__proto__.__proto__.constructor ==Object

MVVM 和MVC

​编辑

 watch 和computed

​编辑

​