前端八股文(面试题)

1. Promise 的理解

promise是为了解决异步回调地狱(回调地狱:回调函数嵌套回调函数的意思)的一种状态机,共有三种状态,pending等待中,fulfilled成功,reject失败.

promise的优点:

1)不受外界影响,只由pending-fulfilled状态改变或者只由 pending-reject状态改变,且状态不可逆

2)promise支持链式.then()写法

3)promise.all(),

promise的缺点:

1) 无法取消Promise,一旦新建它就会立即执行，无法中途取消
2) 如果不设置回调函数，Promise内部抛出的错误，不会反映到外部

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

1).箭头函数没有this指向,只能通过作用域链寻找this属性

2).箭头函数不支持apply(),call(),bind(),改变this指向的方法

3).箭头函数没有原型,不支持arguments,不能构造函数

3.Call(), bind(), apply()的区别

1).apply()方法接受两个参数,第一个参数是this指向,第二个参数是数组,当第一个参数为undefind,null时,默认指向windows,apply()方法会立即执行且临时执行一次

2).call()方法接受两个参数,第一个参数是this指向,第二个参数是参数列表,当第一个参数为undefind,null时,默认指向windows,apply()方法会立即执行且临时执行一次

3).bind()方法接受两个参数,第一个参数是this指向,第二个参数是参数列表(与call()方法不同的是此参数列表可多次传入),bind()方法不会立即执行而是返回一个永久改变this指向的函数

4.防抖和节流

1).防抖:是指函数在n秒内只执行一次,如果n秒内又触发了此事件,则会重新计算

2).节流:是指函数在n秒内只执行一次,执行过程中不会被打断

5.闭包

补充: 作用域,作用域链

作用域:作用域定义变量的使用范围,分为局部作用域和全局作用域

作用域链: 作用链的是从内向外查找变量的过程，可以站在局部作用域去调用全局作用域的属性，反过来是不允许的。

1)概念:函数嵌套函数,函数内部可以使用函数外部定义的变量

示例如下所示:

fn1(){
   let a = 9999;
   fn2() {
      alert(n);
}

 2).优点:闭包可以避免全部变量污染,延长变量的生命周期,变量可以不被垃圾回收机制回收

 3).缺点:闭包会造成内存泄漏,影响网页性能

6.深浅拷贝

深拷贝和浅拷贝只针对Object和Array引用数据类型的

浅拷贝:只复制对象或者数组的地址值,新旧对象共用同一个内存

深拷贝:重新拷贝对象或者数组的地址值,新旧对象不共用同一个内存,新对象改变不影响旧对象的数据

7.Vuex状态管理模式

Vue属性:vuex一共有5种属性分别是,state,mutation,getter,action,module

1.state:是仓库的数据源管理库类似于vue中的data函数,项目中使用this.$store.state.属性获取

2.mutation:是直接改变state属性状态值方法,项目中使用this.$store.commit('state',value)改变

3.getter: 可以对State进行计算操作，它就是Store的计算属性

4.action: 异步请求接口数据通过thia.$store.commit('mutation',value)向mutation中传值,在项目中使用this.$store.dispatch('postSApi')调用action中接口方法

5.module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

import { post } from '@/api/business.js'
export default {
  state: {
    dataObject: { }
  },
  mutations: {
   // 向state里传值
    setSystemPattern(state, data) { state.dataObject= data },
  },
  getters: {},
  actions: {
    postApi ({ commit }) {
      return new Promise(reslove => {
        post().then(res => {
          if (res.code == 200) {
            // 向mutations里传值
            commit('setSystemPattern', res.data)
          }
          reslove()
        })
      })
    }
  }
}

8.vue响应式原理

vue实现响应式主要是订阅者模式,主要由Observer数据劫持,Compile解析模板更新,Watcher是Observer和Compile的中间桥梁订阅Observer数据变化实现Compile视图更新,三者相互配合.vue是MVVM框架,既modal,view,viewModal,在响应式系统中给data的每一个属性都创建一个新的订阅者模式,modal数据变化时就通过getter,setter监听数据变化实现view视图更新.

9.data为什么是一个函数

 一个组件可能在很多地方使用，也就是会创建很多个实例，如果data是一个对象的话，对象是引用类型，一个实例修改了data会影响到其他实例，所以data必须使用函数，为每一个实例创建一个属于自己的data，使其同一个组件的不同实例互不影响。

10.VUE的6种事件修饰符

1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素才触发事件
6.passive：事件的默认行为立即执行，无需等待事件回避执行完毕

11.输入一个URL到页面过程中发生了什么

1.在地址栏输入一个url链接

2.通过DNS解析该域名下的ip

3.跟服务端建立tcp链接

4.向服务端发送http请求

5.关闭tcp链接,解析html内容并渲染出来

12.vue路由的两种模式

1.hash模式
特点:在url地址上有#号
实现的原理:原生的hasChange事件来实现,来监听hash值的变化
window.onhaschange=function(){}
刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式
特点:在url地址上没有#号,比较与hash模式看起来好看一些
实现的原理:利用的是history的api 来实现的 popState() 来实现的
刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决

13.事件冒泡与事件捕获原理

1.事件捕获：触及的事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个节点，并在这些节点上触发捕获事件，直至到达事件的目标节点。是由外到内层

2.事件冒泡：与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。由内到外

14.请描述一下 cookies sessionStorage和localstorage区别

相同点：都存储在客户端
不同点：

1.存储大小

· cookie数据大小不能超过4k。

· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

· localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage  数据在当前浏览器窗口关闭后自动删除。

· cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

4.sessionStorage,localStorage方法

存储:window.sessionStorage.setItem('方法名',val值)

读取:window.sessionStorage.getItem('方法名',val值)

删除:window.sessionStorage.removeItem('方法名')

清空所有数据:window.sessionStorage.clear()

15.diff算法

1. vue的diff算法是从两侧向中间节点去对比的。并且使用了双指针，边对比边更新。而react的diff算法是从左到右去对比的，对比时把改变的节点生成patch树，对比完才去打补丁。

2. diff算法一般要指定节点key，也就是唯一值，这样才能在节点进行删除或者排序操作后，保证diff对比的准确性。

3. vue3的diff算法相比vue2做了优化，它会在编译阶段判断每个节点是否是动态节点，通过看节点上有没有像v-on，:class等这种符号，然后收集动态节点生成block tree，在dom发生变化时，只会去比对block tree。因为vue3对静态节点做了静态提升，所以静态节点只会渲染一次。

4. vue3的diff算法还再用了patchFlag标记动态节点，更高效的判断修改了哪些东西。

16.loader和plugin的区别

1.loader主要用于转换某些类型的模块，它是一个转换器和加载器。

2.plugin是插件，它是对webpack本身的扩展，是一个扩展器

17.什么是内存泄漏

概念:内存泄漏指任何对象在您不再拥有或需要它之后仍然存在

哪些操作会造成内存泄漏？

1.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

2.闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

18.HTTP的请求方式

1.get请求:对应select查找数据,请求地址无加密处理,请求参数直接拼在请求地址后面,

2.post请求:对应update更新数据,请求参数在请求体里发送

3.put请求:对应创建或更新数据

4.delect:对应删除数据

19.画一条0.5px的直线

height: 1px;
transform: scale(0.5)

20.说说你对 SPA 单页面的理解，它的优缺点分别是什么？ 

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页> 面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 > HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
---优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
---缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一> 加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所> 有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

21.怎样理解 Vue 的单向数据流？

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

22.vue模板如何编译

Vue的模板编译就是将“HTML”模板编译成render函数的过程。这个过程大致可以分成三个阶段：

1.解析阶段：将“HTML”模板解析成AST语法树；
2.核心 parseHTML( template ,{}) Vue定义了很多匹配HTML的正则表达式 ,parseHTML根据正则匹配
3.parseHTML是解析模板字符串的“主线程”，它的第一个参数是要解析的模板字符串， 也就是单文件组件中最外层 所包裹的部分；第二个参数是一个选项对象，它会包含一些回调，以及一些配置项。

23.vue3新增特性

1.响应性能提升:

响应性能提升,由vue2.0的Object.defineProperty改为Es6的Proxy使其更新速度更快,比如vue2.0之前针对对象和数组等对象的更新是不能自动更新到试图的,是需要结合$set()方法实现试图更新,vue3.0的Proxy实现了深度监听从而可以达到实时更新的效果

2.更好的支持typeScript

3.新增Composition Api比原有的Mixin混淆更强大,它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强。

3.新增组件:

• Fragment 不再限制 template 只有一个根几点。

• Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。

• Supense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。

4.Tree-shaking：支持摇树优化

摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快。

24.vue3 组合式API生命周期钩子函数有变化吗？

1.setup()函数取代了beforeCreate()和created(),

vue2.0选项式API生命周期	vue3.0组合式API生命周期
beforeCreate	无
created	无
beforeMounte	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdate
beforeDestroy	onBeforeDestroy
destroy	onDestroy
activated(缓存生命周期)	onActivated

25.watch 和 watchEffect 的区别？

watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：

1. watch 需要传入监听的数据源，而 watchEffect 可以自动手机数据源作为依赖。

2. watch 可以访问倒改变之前和之后的值，watchEffect 只能获取改变后的值。

3. watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。

26.