2022面试题总结

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

一、BFC模式

1.BFC（Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区域，并且有⼀套属于⾃⼰的渲染规则：

• 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置
• 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的⾼度时，浮动⼦元素也参与计算
• BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然
  BFC⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素
  2.触发BFC的条件包含不限于：
• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、
  flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed
  3.利⽤BFC的特性，我们将BFC应⽤在以下场景：
  防⽌margin重叠（塌陷）
  清除内部浮动
  ⾃适应多栏布局

二、forceupdate的作用

• 下拉框中使用change事件并使用forceUpdate()函数进行强制更新，可以解决下拉框选中数据视图不更新的问题。

• this.$set赋值:this.$set(“prop”，key，value)

三、HTTP状态码

• 当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。

• HTTP 状态码的英文为 HTTP Status Code。
  下面是常见的 HTTP 状态码：
  200 - 请求成功
  301 - 资源（网页等）被永久转移到其它URL
  404 - 请求的资源（网页等）不存在
  500 - 内部服务器错误

四、v-if和v-for能不能一起使用

• v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
• v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)

五、vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？

• vue的路由底层是基于window对象的onhashchange封装的hash模式以及使用window.history封装的history模式。
• 传参方式：prams和query方式
• 跳转方式2种：router-link 标签跳转又叫声明式导航，$router.push js跳转又叫编程式导航。push向历史记录添加一个，replace是用当前记录替换最后一次记录，go，back
• 路由拦截器和路由生命周期都是指的路由守卫。

六、 vue常用的生命周期钩子函数：

• beforeCreate（创建前）
• created（创建后）
• beforeMount(载入前)
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

七、vue和jquery的区别

• ⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过di!算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,以上就是我对vue和jquery区别的理解。

八、为什么vue中的data是一个函数

• 如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果。
• 所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关。

九、什么是keep-alive

• keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现

十、vuex执行流程

• 通过dispatch去提交一个actions，
• .actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations
• actions通过commit去触发mutations，
• mutations去更新state数据，state更新之后，就会通知vue进行渲染

十一、vue常用指令

• v-if
• v-show
• v-html
• v-text
• v-on
• v-bind
• v-model
• v-for

十二、es6如何实现类以及如何实现类的继承

• es6提供了类的这个概念,在es5中是没有类的这个概念,如果想在es5中实现⼀个类型,我们只能构造
  函数的⽅式去创建⼀个类,⽽es6给我们提供⼀个更⽅便 的⽅.法,那就是class,这个class理解为是构造
  函数的语法糖.
• 我们创建⼀个类只需要⽤过关键词class去声明就可以了 , 他的调⽤⽅式和构造函数的调⽤⽅式是⼀样的
• 通过es6的类还给我们提供⼀个extends这样的⼀个关键字,来实现继承

十三、vue2如何获取dom元素

• 在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，

十四、vue的单向数据流

• 数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
• 注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法 开发环境会报警告
• 如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤$emit 通知⽗组件去修改

十五、节流防抖

• 节流
  如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效
• 防抖
  对于短时间内连续触发的事件，就是让某个时间期限内，事件处理函数只执行一次。

十六、组件通信

• ⽗传⼦
  在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值
• ⼦传⽗
  -⼦组件通过this.$emit(“⾃定义的事件”,要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收传递的数据
• ⾮⽗⼦组件通信
  通过中央事件总线,我们也称之为eventBus,
  我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

十七、var.let.const的区别

• var 存在提升，我们能在声明之前使⽤。 let 、 const 因为暂时性死区的原因，不能在
  声明前使⽤
• var 在全局作⽤域下声明变量会导致变量挂载在 window 上，其他两者不会
• let 和 const 作⽤基本⼀致，但是后者声明的变量不能再次赋值。

十八、说一下箭头函数和普通函数的区别

• 在es6中，提供了⼀种简洁的函数写法，我们称作“箭头函数”。
• 写法：函数名=(形参)=>{……} 当函数体中只有⼀个表达式时，{}和return可以省略，当函数体中形
  参只有⼀个时，()可以省略。
• 特点：箭头函数中的this始终指向箭头函数定义时的离this最近的⼀个函数，如果没有最近的函数
  就指向window。
• 区别:
  1.箭头函数不能⽤于构造函数，不能使⽤new** ⽽普通函数可以
  2 在普通函数中，this总是指向调⽤它的对象，如果⽤作构造函数，this指向创建的对象实例,
  ⽽箭头函数指向箭头函数定义时的离this最近的⼀个函数，如果没有最近的函数就指向
  window。

十九、axios拦截器的作用

• ⾸先呢,axios拦截器是axios给我们提供的两个⽅法,通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截). 这两个拦截器不需要⼿动触发,只要发送http请求的时候就会⾃动触发.

二十、判断数据类型的方法有几种

• 大概有四种：typeof、instanceof、constructor、object.prototype.toString.call

二十一、什么是npm

• NPM是Node Package Manager的缩写，是Node.js默认的、用JavaScript编写的软件包管理系统。
• 它有自己的node registry仓库，可以可以包之间的依赖关系，类比于maven之类的Java包管理工具。
• NPM相对于其它包管理工具，有自己一定的特殊性，比如它的包之间的依赖关系中版本之间是range的关系，而不是一个特定的版本号

二十二、什么是回流和重绘

• 回流：
  当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
• 重绘：
  当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

二十三、computed和watch的区别

• computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓存性,依赖属性值的变化⽽变化.
• ⽽watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发.

二十四、vue内置组件

• keep-alive 缓存组件；
• components组件 动态加载组件；
• slot插槽；
• template 模板；
• transition动画；

二十五、页面第一次加载时父子组件生命周期执行的顺序

• 执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

二十六、vue中的key的作用是什么

• 避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下表.

二十七、vue过滤器

• 所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据
• vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filet来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部

二十八、组件上写name有什么好处

• 增加name属性，会在components属性中增加组件本身，实现组件的递归调⽤。
• 可以表示组件的具体名称，⽅便调试和查找对应的组件

二十九、什么是模块化

• 把公共部分抽离成一个独立的文件/组件，这种模式就叫模块化开发。说白了，就是代码的复用。

三十、this指向的理解

• 全局下的this指向window
• 函数独立调用下的this指向window
• 函数当做对象的方法调用，this指向obj
• 自执行函数this指向window
• 闭包 this默认指向window

三十一、什么是mvvm模式

• M是数据模型model，V是view视图。model是js，V是页面。模型到视图，视图到模型，数据的双向绑定的。数据的双向响应模式。

三十二、new操作符的理解

• 创建一个新对象，新对象的__proto__指向了构造函数的prototype；
• 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
• 执行构造函数中的代码（为这个新对象添加属性） ；
• 对构造函数的返回值做判断
• 是对象类型则返回该对象
• 原始类型则返回第一步创建的空对象

三十三、什么是插槽

• 所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.
• ⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有slot标签上指定name属性,⽽在对应标签上添加v-slot属性.

三十四、vue双向数据绑定的原理

• vue.js 则是采⽤ 数据劫持 结合 发布者-订阅者 模式的⽅式，
  通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，
  在数据变动时发布消息给订阅者，触发相应的监听回调。
  这个时候就可以实现数据的双向绑定

三十五.seo爬虫是什么

• 流览器爬取网站内容的一种算法，也叫网络爬虫。 h1-h6 标题标签
• seo只愿意进入网页爬取写死的dom，静态网页，但是vue的内容都是js生成的，所以seo不会执行js文件，所以它认为你的页面是空的，就走了再也不来。

三十六、vue路由传参和获取参数的方法

• this.$router.push进行编程式路由跳转

• router-link 进行页面按钮式路由跳转

• this.$route.params获取路由传递参数

• his.$route.query获取路由传递参数

• params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的， query则是我们通常看到的url后面的跟在？后面的显示参数

三十七、js中同步和异步的区别

• 同步是指一个线程要等待上一个线程执行完才能开始执行，同步可以看做是一个单线程操作，只要客户端请求了，在服务器没有反馈信息之前是一个线程阻塞状态。
• 异步是一个线程在执行中，下一个线程不必等待它执行完就可以开始执行。异步肯定是个多线程。在客户端请求时，可以执行其他线程，并且在把这个线程存放在他的队列里面，有序的执行。
  异步的效率要高于同步。如果数据在线程间共享，那么必须使用同步！

三十八、for…of和for…in 的区别

• For in可以遍历对象 ⽽ for of遍历对象会报错
• for in 遍历数组得到的数组的下表 ⽽for of遍历得到的时候数组⾥⾯的每⼀个元素

三十九、v-show和v-if的区别

• ⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
  示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不是频繁操作的话,我们可以v-if

四十、js数据类型和存储的区别

• 基本数据类型和引用数据类型存储在内存中的位置不同：
  基本数据类型存储在栈中
  引用类型的对象存储于堆中
• 当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

四十一、深拷贝和浅拷贝

• 浅拷⻉
  浅拷⻉，指的是创建新的数据，这个数据有着原始数据属性值的⼀份精确拷⻉
  如果属性是基本类型，拷⻉的就是基本类型的值。如果属性是引⽤类型，拷⻉的就是内存地址
  即浅拷⻉是拷⻉⼀层，深层次的引⽤类型则共享内存地址
• 深拷⻉
  深拷⻉开辟⼀个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改⼀个对象的属性，不会
  改变另⼀个对象的属性

四十二、同源策略和非同源策略，怎么解决非同源策略跨域问题

• 协议、域名、端口一致为同源策略，同源策略是浏览器为了安全访问网页内容而出现的一种措施。 【https协议的默认端口号443，http端口80】
• 非同源策略就是当使用ajax请求时协议、域名、端口号中有一项不相同时出现的情况。
• 前端可以使用jsonp解决，也可以借助nodejs作为代理请求。

四十三、= . == . ===的区别

• =:赋值
• ==:等于(只是用于判断值是否相等,数据类型自动转换)
• ===:全等于或恒等于(比较 严格,数据类型不会自动转换,可用于比较数据类型)

四十四、网站优化的三大标签

title（标题）、description（说明）、keyword（关键词）

四十五、vue的路由模式

• vue的路由模式⼀共有两种,分别是hash和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.
• history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的. 以上就是我对vue路由模式的理解.

四十六、小程序wxss和css的区别

• WXSS WXSS
  wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚
  ⼩程序样式使⽤ @import 引⼊ 外联样式⽂件，地址为相对路径。
  尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。

四十七、css如何画一个三角形

• 实现过程似乎也并不困难，通过边框就可完成

<style>
 .border {
 width: 50px;
 height: 50px;
 border: 2px solid;
 border-color: #96ceb4 #ffeead #d9534f #ffad60;
 }
</style>
<div class="border"></div>

四十八、$route和$router的区别

• 可以理解为，一个是用来获取路由信息的，一个是用来操作路由的

四十九、xss攻击是什么？如何避免？

• 跨站脚本攻击就是xss攻击。有三种攻击方式：反射、注入、存储。
• 反射型：反射型XSS通常出现在网站的搜索栏，使用url地址挂载恶意的参数，一般主要是偷取cookie等。
• 注入：是在标签上使用属性添加的方式，恶意的破坏网站的数据。
• 存储：在接口请求中加入恶意代码，攻击或存储到数据库里。攻击，比如植入一段删除sql的语句；储存，把一段js脚本语法，早期很多网站有留言板，论坛，只要把内容中写入脚本，那么下一个来访问的人，他的信息就可能会被偷走。
• 标签攻击，尽量不要使用innerHTML这个语法。
• url：需要在接口处做参数的判断和url校验
• 存储：转移，使用正则把内容种<>变成xx%字符

五十、什么是函数重载？

-同一个函数，接收不同的参数，执行不同的业务，就叫函数重载。

五十一、什么是函数尾数调用

• 一个函数被调用，他要在内存中开一个空间去执行函数里的内容，执行完后，释放空间，释放函数。
  函数尾调用就是指当一个函数被执行完后，立即在该函数的最后面调用另一个函数，从而起到复用内存的作用
  fn () { xxxx; b()}

五十二、数组降维？

• 递归+判断如果该项中还有数组就继续调用递归，直到没有嵌套的数组为止
• se6的flat(Infinity) // Infinity正无穷大的数

五十三、数组去重？

• 双层for循环
• 使用se6的set数据类型 new Set(数组);

五十四、Socket是什么？

• 保持双向通信的持久连接，通过它前端可以向后端发送数据，后端也可以主动的向前端发送数据。
• 它的协议一般不是http但是可以配置成http，一般是ws,或者wss协议开头。

五十四、本地存储的区别？

• localStorage：永久存储，除非手动删除，而且容量一般是5M
• essionStorage：会话存储，只在当前页面打开的期间生效，页面关闭就没了，容量和localStorage一样
• cooki：可以被后端直接写入，每次会跟随http请求到服务端。容量只有4kb，可以设置过期时间，如果不设置过期时间，页面关闭时候它也会被清除。

五十五、对象，原型，原型链，构造函数的关系？

1. 构造函数其实就是普通函数被调用的时候用new了
2. 对象，对象是通过构造函数new出来的
3. 对象有一个__proto__ 指向构造函数的prototype对象
4. 对象只有__proto__叫对象的原型，也叫隐式原型
5. 函数只有prototype对象，叫显式原型
6. 对象有一个constructor指向构造函数
7. 原型链：当我们从对象上找属性的时候，如果对象自身没有该属性，会沿着对的__proto__一直找，找不到就报错了

五十五、 Js作用域？

一个变量所在的空间

• 全局作用域 指script标签种任意都可以访问到的变量，而这个变量所在空间叫做全局作用域，比如window和document对象就是属于全局作用域种的顶级对象。
• 局部作用域 函数天生自带局部作用域，函数外部访问不到函数里的变量值
• 块级作用域 由let和const带来的，只要是换括号，不管是if还是for等，且换括号内有let或const声明方法，这个空间就成了块级作用域和局部作用域是一样的

五十六、Function与箭头函数区别

• 普通函数有prototype对象，所以普通函数可以被new之后作为构造函数，而箭头函数没有，所以它不能被new也就不能做构造函数了。

• 箭头函数没有argument只能用扩展运算符来做一个形参集合。

• this指向不同，function指向调用它的对象，而箭头函数则会一直向上层作用域找对象。

• function可以修改this指向，因为他有原型对象，所以可以使用call，apply和bind，而箭头函数不可以修改this。

五十七、常见的布局有哪些？

• 双飞翼、多栏、弹性、流式、瀑布流、响应式布局

五十八、 vue2的生命周期

创建阶段

• beforeCreate
  实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this

• created
  创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了

• beforeMount
  组件挂载之前

• mounted
  组件挂载之后
  这个时候能拿到 dom 节点使用

运行阶段 只要修改 data 就会触发

• beforeUpdate
  数据变了 视图还没变
• updated
  数据变了 视图也变了

销毁阶段

• beforeDestory
  组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
• destoryed
  组件销毁之后

除了这八个 还有 三个
如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数

五十九、xss攻击如何预防？

xss攻击又叫前端注入攻击，一般发生在表单提交或富文本内容上传时。

（1）web 页面中可由用户输入的地方，需要对输入的数据转义（html转义成字符码）、过滤处理

（2）后台输出页面的时候，也需要对输出内容进行转义、过滤处理（因为攻击者可能通过其他方式把恶意脚本写入数据库）

（3）前端对 html 标签属性、css 属性赋值的地方进行校验

六十、vue 中的 provide 和 inject (依赖注入)

• 父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，都可以通过inject来调用provide的数据，但是这种写法传递的数据是不响应的。

provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

六十一、vue-router、vue-router 原理、vue 脚手架本地开发跨域请求设置

• 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
• 原理
  一般源码中，都会用到 window.history 和 location.hash
  原理：通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图，通过BOM中的location对象，其中对象中的location.hash储存的是路由的地址、可以赋值改变其URL的地址。而这会触发hashchange事件，而通过window.addEventListener监听hash值然后去匹配对应的路由、从而渲染页面的组件
  1.一种是# hash,在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
  2.一种是h5的history,使用URL的Hash来模拟一个完整的URL

//在根目录创建vue.config.js
///在module.exports中配置devserver的内容 
//主要是通过 proxy

devServer: {
        host:'0.0.0.0',
        port: 8080,//端口号
        open: true,//运行项目自启
        proxy:{
            '/api':{
                target:'http://localhost:3000/',//跨域请求资源地址
                ws:false,//是否启用websockets
                changeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{
                    '^/api':''//注册全局路径
                }
            }
        }
    }

六十二、token的由来

• 首先在token之前前后端判断身份标识用session，基于cookie来实现。最新的浏览器渐渐的淘汰了cookie了，所以这种形式慢慢就没了，于是大家换了一种校验形式，使用token.

六十三、token里的值都是什么

• token是由后端程序生成，里面一般封装了用户的id，用户本次登录的ip地址，过期的时间，可能还有一些其他后端加入的字符等。
• token在后端程序里可以解密，后端根据数据进行校验用户是否合法。

六十四、 利用token做记住密码：一定不是把密码存本地

• 本次登录勾选了记住我3天，当我登录的时候我需要给接口一个额外的参数，就是记住我并且保留3天，后端就会在token中加入一个3天过期的时间。
• 当我们登录成功后，我们需要把token存入本地，并且把记住我那个标记也存起来。
• 当我们退出登录时，先判断本地那个记住我标识是否为true，如果为true，则token不删除。
• 下一次打开登录页面，从本地读取记住我的标识，如果是true则把密码框给一个假的****，提交登录的时候，就把token上传就可以了。

六十五、有哪些场景需要登陆？

(1)进入客服的时候，要先判断是否登录
(2)进入订单的时候，需要
(3)购物车的时候，需要
所以登陆成功后，应该跳转回最开始被拦截的地方

六十六、nodejs是什么

• node.js本身不属于前端，但是属于前端的技术栈。
• node.js是前端工具链的重要成员，它参与前端开发，属于前端技术栈里的前端工具。类似于GWT，或者编辑器，它本身并不是属于前端。
• node.js是js的运行环境，即可以服务于前端，也可以服务于后端。

六十七、 webpack

1.mkdir webpack-demo

2.cd webpack-demo

3.npm init -y 初始化

4.npm i --save-dev webpack webpack-cli 下载webpack

5.webpack -v 查看版本号

6.新建src目录和index.js 入口文件

7.零配置打包 ：在 package.json 配置文件中的 scripts 中 配置 “build” : “webpack” ,通过命令 npm run build 打包（打包后的文件变成了一行，成为自执行函数）

8.webpack 默认只能打包 js 和 json 文件,其他类型的文件需要用loader和plugin去处理

9.webpack 默认只能打包 js 和 json 文件,其他类型的文件需要用loader和plugin去处理

// 安装：

npm install style-loader css-loader -D   //解析处理css文件的

npm install --save-dev html-webpack-plugin  //处理html模块的插件

npm install --save-dev file-loader  //解析字体图片等其他文件


//想解析 css 需要用到 style-loader 和 css-loader， css-loader 是把 css 文件转成 css 代码，style-loader 是把 css 代码插入到页面。
//想有一个自己的模板就需要用到 plugins 插件，plugins 是用来扩展自身没有的功能

10.新建一个 webpack.config.js;

commonjs语法 导入导出不是用的es6模块 
var test = require('模块名')   //导入	

var HtmlPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
	// loader用于处理模块的
	module:{
		// 匹配各种类型文件的规则
		rules:[ // 规则
			{
				test: /\.css$/,  // 正则
				// loader执行顺序是从右向左，从下向上执行 
				use:[ 'style-loader','css-loader','sass-loader' ]
			}
		]
	},
	plugins:[new HtmlPlugin({
		tempalte:'./src.index.html'
	})],
	//开启本地服务，自动编译
	//path是node自带的路径管理模块
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),//监听dist目录
        },
        compress: true,  //压缩代码
        port: 8080, //开启后的端口号
        open:true //程序执行完自动在浏览器打开
    },
    //模式必须配置
     mode:"development"//开发环境模式 | 生产环境模式production  
}

六十八、开启本地服务

npm install webpack-dev-server --save-dev
启动命令：npx webpack serve