前端面试题全搜集

前端面试题全搜集

一、高频面试题

1、实现一个左侧固定，右侧自适应的布局？

• 1.左侧固定宽度，右侧flex自适应
• 2.左侧浮动，右侧设置宽度100%，占据左侧普通流位置
• 3.左侧固定宽度左浮动，右侧设margin-left等于左侧宽度
• 4.左侧固定宽度、固定定位，右侧宽度100%
• 5.左侧固定宽度、固定定位，右侧宽度100%
• 6.双左浮动，右侧计算属性计算宽度
• 7.左侧左浮，右侧右浮动，右侧计算宽度
• 8.左侧固定宽度，display:inline-block，右侧右浮动，计算宽度

2、说一下对 BFC 的理解？

BFC是什么

• BFC是一种特性，拥有自己的一套渲染规则，他决定了其子元素将如何布局，以及和其他元素的相互关系和作用

如何触发BFC特性

1. 根元素（html）
2. 浮动元素（元素的float不是none）
3. 绝对定位元素（元素的position为absolut或flxed）
4. 行内块元素（元素的display为inline-block）
5. 表格单元格（元素的display为table-cell，html表格单元格默认为该值）
6. overflow不等于visible
7. 更多的触发方法参考MDN

BFC特性的作用

1. 可以包含内部浮动元素
2. 可以排除外部浮动带来的影响
3. 阻止外边距重叠
4. 解决margin塌陷

3、如果数组里边是字符串类型如何排序

• arr.sort()

4、原型链

• 1.原型链 : 每一个实例对象都有自己的原型,而原型也是对象,也有自己的原型,以此类推形成链式结构。称之为原型链。
• 2.对象访问原型链规则 : 就近原则
• 对象优先访问自己的属性，自己没有才会访问原型，原型也没有就访问原型的原型，以此类推直到原型链终点(null),如果还没有。 属性则获取undefined, 方法则报错 xxx is not a function

3.原型链作用(面试题) : 继承

5、闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

6、如何判断this的指向

• 谁调用我，我就指向谁
• 普通函数； 函数名（） this指向window
• 对象方法: 对象名.方法名（） this指向对象
• 构造函数； new 函数名（） this指向new创建的实例对象
• 总结：this指向三选一， 先找new， 再找点

7、call apply bind的使用

同

• 第一个参数都是用来改变函数内部this指向的
• 都可以利用后续传参

异

• 传参方式不同 ： call是单个传参，apply是数组、伪数组传参
• 执行机制不同 : call和aplly会立即执行， bind不会立即执行而是得到一个修改this的新函数

8、数组常用api

• 筛选数组： arr.filter()
• 检测是否所有元素满足条件（开关法） ： arr.every()
• 遍历数组 : arr.forEach()
• 数组叠加(求累加和) ： arr.reduce()

9、什么是伪数组，伪数组怎么转真数组

• 具有length属性
• 安索引方式存储数据
• 不具有数组的方法push pop等方法
• 转真数组：Array.from(),[].slice.call,Array.prototype.slice.call

10、什么是回调地狱，如何解决

什么是回调地狱:回调函数套回调函数的情况就叫做回调地狱，简称：异步函数,层层嵌套

如何解决 ：async/await解决方式

11、promise的使用

怎么用

• 一般作为一个构造函数来使用，即需要new一下来创建一个promise实例
• 有三种状态分别是pending（进行中），fulfilled（已成功），rejected（已失效）；成功会触发then，失败会触发catch；还有一个finally是永远都会被触发的

promise相关的几个静态方法

1. promise.race():接收多个promise实例，可以得到最先处理完毕的结果（可能成功，可能失败）
2. promise.all():接收多个promise实例，都成功会触发then，有一个失败就会触发catch
3. promise.any():接收多个promise实例，可以得到最先处理成功的结果，都失败会触发catch

解决的问题

• 解决了回调地狱的问题

替代方案

• promise虽然解决了回调地狱，但是并不能简化代码，所以一般工作中会配合async/await来使用

12、new 的执行过程？

1. 创建新对象
2. 构造函数this指向新对象
3. 执行构造函数代码，修改this，添加新的属性
4. 返回新对象

13、防抖和节流

防抖：简单概括：短时间内多次触发事件时只生效最后一次

节流：简单概括：在一段时间内多次触发相同事件时，只触发一次

14、说一下 DOM 事件流？

1.捕获阶段：一开始从文档的根节点流向目标对象

2.目标阶段：然后在目标对向上被触发

3.冒泡阶段：之后再回溯到文档的根节点

15、函数传参，传递复杂数据类型和简单数据类型有什么区别？

简单数据类型：传递的是值的拷贝，函数内部对参数的修改不会影响到外部

复杂数据类型：传递的是引用地址，函数内部对参数内容的修改会影响到外部，对参数引用的修改不会影响外面

16、for in和for of的区别

1.for-in 只是获取数组的索引；而for-of会获取数组的值 2.for-in 会遍历对象的整个原型链，性能差；而for-of只遍历当前对象，不会遍历原型链

17、递归及应用场景

递归就是函数直接或者间接调用自身的一种方法，来解决比较复杂的函数逻辑。

优点： 1. 解决重复执行任务 2. 处理不定层级数据

缺点： 1. 时间 空间的消耗较大 2. 重复计算 3.栈溢出

使用场景：树形菜单，递归组件，快速排序

18、eventloop事件循环

• 1.先解析外层的script标签 （宏任务）
• 2.如果是同步立即执行
• 3.如果是异步，则放入事件队列中
• 4.等当前同步任务全部执行完毕，先执行微任务
• 5.微任务执行完毕，在执行宏任务
• 6.执行完毕在进入下一次事件循环

19、深拷贝和浅拷贝

深拷贝和浅拷贝都只针对引用数据类型，浅拷贝会对对象逐个成员依次拷贝，但只复制内存地址，而不复制对象本身，新旧对象成员还是共享同一个内存；深拷贝会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改变原对象。

区别：浅拷贝只复制对象的第一层属性，而深拷贝会对对象的属性进行递归复制。（JSON.parse(JSON.stringfy())不能拷贝对象中的function）

20、说一下 HTTP 的状态码，400、401、403、405、301、302、304？

• 400：参数错误
• 401：未身份验证(没登录) 这个错误是未经授权 token错误 请求要求身份验证。
• 403：服务器拒绝访问(没有权限)
• 404：：路径错误 前端调用的URL不存在
• 405：服务器知道请求方法，但目标资源不支持该方法。例如，API 可能不允许调用DELETE来删除资源。
• 301：被请求的资源已永久移动到新位置
• 302：重定向，服务器主动修改浏览器地址
• 304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应

21、await async的使用方式

• async 表示函数里有异步操作，
• await 表示紧跟在后面的表达式需要等待结果。
• async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

22、https和http的区别

1、https的端口是443，而http的端口是80，且两者的连接方式不同

2、http传输是明文的，而https是用ssl进行加密的，https的安全性更高；

3、https是需要申请证书的，而http不需要

23、常见http的状态码

• 400：参数错误
• 401：未身份验证(没登录) 这个错误是未经授权 token错误 请求要求身份验证。
• 403：服务器拒绝访问(没有权限)
• 404：：路径错误 前端调用的URL不存在
• 405：服务器知道请求方法，但目标资源不支持该方法。例如，API 可能不允许调用DELETE来删除资源。
• 301：被请求的资源已永久移动到新位置
• 302：重定向，服务器主动修改浏览器地址
• 304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应

24、js延迟加载的方式

js延迟加载就是当页面全部加载完毕，然后再加载js文件，这样做有助于提高页面加载的速度。

• 1.defer属性

  给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。

• 2.async属性

  给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

• 3.动态创建DOM方式

  动态创建script标签，当页面的全部内容加载完毕后，在执行创建挂载。

• 4.使用setTimeout

  在每一个脚本文件最外层设置一个定时器。

• 5.把js文件放在最后

  当外部加载js文件是，应该将js脚本放在最后，当全部的文件都加载完成后，再开始加载执行js脚本。

25、如何减少重绘和回流

• 1.尽量使用css属性简写

• 2.批量修改元素样式elem.className

• 3.尽量避免用table布局(table元素一旦出发回流就会导致table里所有的其它元素回流)

• 4.需要创建多个DOM节点时，使用DocumentFragment创建。

  因为：每次创建一个页面就会发生回流，所以采用DocumentFragment批量创建

• 5.避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)

26、描述输入url地址到网页展示的过程

• 1.DNS解析
• 2.建立tcp连接
• 3.客户端发送HTPP请求
• 4.服务器处理请求
• 5.服务器响应请求
• 6.浏览器展示HTML
• 7.浏览器发送请求获取其他在HTML中的资源

27、跨域问题及解决方案

1.JSONP跨域 原理：就是利用标签没有跨域限制，通过标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据 2.跨域资源共享（CORS） 具体来说，就是在头信息之中，增加一个Origin字段。 上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。 3.nginx代理跨域 nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。 4.nodejs中间件代理跨域 5.document.domain + iframe跨域 两个页面都通过js强制设置document.domain为基础主域，就实现了同域。 6.location.hash + iframe跨域 7.window.name + iframe跨域

28、说一下 localstorage/sessionStorage/cookie 之间的差异？

• localstorage会永久储存，只能手动删除，不会自动把数据发给服务器，仅在本地存储
• sessionStorage仅会在当前会话下有效，关闭页面或浏览器就会被清除，不会参与和服务器的通信
• cookie 只在设置cookie过期时间之前一直有效，即使窗口或浏览器关闭。有个数限制，一般不能超过20个数据不能超过4k，如果使用cookie保存过多数据会带来性能问题

29、get请求和post请求的区别

1.传参方式不同

get : 参数直接在url后面拼接 (请求行)

post：参数在xhr.send()中发送(请求体)

2.传参速度不同

get : 速度快

post : 速度慢

3.数据大小不同

get : 有大小限制。 不同浏览器大小不一样 。 一般2-5KB

post : 无限制

* 一般带文件的接口都是post

4.安全性不同

get : 安全性低

post : 安全性高

* 一般登录注册都是post

30、什么是伪数组，伪数组怎么转真数组？

1.具有length属性，可以获取长度

2.具有索引(下标)，可以通过遍历获取所有元素

3.不能使用数组的内置方法和属性

伪数组转真数组：

1..Array.prototype.slice.call( 数据 )

2.Array.from方法(推荐)

31、请求头中的contentType有什么用处

在Request Headers里面，告诉服务器，我们发送的请求信息格式

32、事件冒泡和事件捕获

（1）事件冒泡：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。

查找事件（事件响应）的顺序：文本节点–>元素节点—>body—>html—>document（例如点击事件）<向上响应>

（2）捕获事件：网景公司提出的，事件由父元素传递到子元素的过程叫做事件捕获。（ture）

查找事件（事件响应）的顺序：document–>html–>body–>元素节点–>文本节点 <向下响应>

33、事件委托

当多个子元素要注册相同的事件处理函数时，可以给上级元素注册事件处理函数

事件委托的原理就是事件冒泡

优点

1. 减少事件注册，节省内存。
2. 在table上代理所有td的click事件。
3. 在ul上代理所有li的click事件。
4. 简化了dom节点更新时，相应事件的更新。
5. 不用在新添加的li上绑定click事件。
6. 当删除某个li时，不用移解绑上面的click事件。

缺点

1. 事件委托基于冒泡，对于不冒泡的事件不支持
2. 层级过多，冒泡过程中，可能会被某层阻止掉。
3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件

34、如何添加和删除事件

• 1、使用addEventListener()事件，用于向指定元素事件；
• 2、使用removeEventListener()事件，用于移除由addEventListener()的事件。

35、你知道和 Vue 相关的性能优化有哪些？

1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。 2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。 3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。 4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。 5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。 6、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。 7、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等

36、哈希路由和history路由的区别以及原理

1.hash路由在地址栏URL上有#，而history路由没有，会好看一些

2.我们进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般会404报错(刷新是网络请求，没有后端准备时就会报错)

3.hash路由支持低版本的浏览器，而history是HTML5新增的API

4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，对于后端没有影响，所以hash不会重新加载页面，这也是单页面应用的必备

5.history运用了浏览器的历史记录栈，之前有back，forward，go方法，之后在HTML5中新增了pushState()和replaceState()f方法(需要特定的浏览器支持)，提供了对历史记录修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求

37、vue 组件中的 data 为什么需要是一个函数？

vue中，组件使用来复用的，为了防止data复用，将其定义为函数

38、父子组件的生命周期钩子

1. 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

39、组件之间传参方式

1. 父传子：先在父组件上通过自定义属性传递变量，再在子组件上通过props接收，在接收时有两种接收方式(数组形式，对象形式)，可以规定传来的数据类型
2. 子传父：先在子组件中定义一个事件，再通过this.$emit去调用这个函数，$emitf方法有两个参数，第一个参数是定义的函数名，第二个参数就是子组件要传的变量，最后在父组件通过v-on接收并重新定义函数名
3. 子访问父相互传使用 $refs
4. 父子相互访问 $parent / $root / $children
5. 非父子组件(兄弟)组件之间的通信,EventBus,事件总线.
6. 作用域插槽
7. vuex

40、v-mode和.sync的对比

1.v-model就是一个语法糖，本质上做了两件事：

• 1.给子组件绑定一个value属性，对应一个变量
• 2.给子组件绑定一个input事件，在事件处理函数中给变量赋值

2..sync

• v-model 只能在组件 或 标签上设置 一次 , 如果需要有多个变量双向绑定 , 就无法很好的实现 .
• v-model 只能在 表单上双向绑定 , 在父组件和子组件之间对某个属性值进行双向绑定时, 就要用 .sync修饰符实现.

3.v-model和.sync的区别

1. v-model 在标签上只能绑定 1 个 , 表单上只能使用 v-model.
2. v-model 用的事件名 input, 属性名是 value , .sync 用的事件名 update:属性名, 属性名自定义.

41、vue路由钩子beforeEach的参数

to是跳转后的页面路由，

from是跳转前的，

next是必须要执行的，加上next路由才会跳转

42、vuex的基本使用步骤

#####

npm install vuex

2.引入并使用Vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

3.实例化一个Vuex对象--Store状态机 并抛出

const store = new Vuex.Store({})

​

export defaul store 

4.在main.js中引入并注入Vuex

import Vue from 'vue'

import App from './App.vue'

import store from './store'

new Vue({

 render: h => h(App),

 store

}).$mount('#app') 

5.通过this.$store访问Vuex的数据

到此，Vuex已准备完成，接下来就根据自己需要加入数据吧~

43、组件之间传参方式

1. 父传子：先在父组件上通过自定义属性传递变量，再在子组件上通过props接收，在接收时有两种接收方式(数组形式，对象形式)，可以规定传来的数据类型
2. 子传父：先在子组件中定义一个事件，再通过this.$emit去调用这个函数，$emitf方法有两个参数，第一个参数是定义的函数名，第二个参数就是子组件要传的变量，最后在父组件通过v-on接收并重新定义函数名
3. 子访问父相互传使用 $refs
4. 父子相互访问 $parent / $root / $children
5. 非父子组件(兄弟)组件之间的通信,EventBus,事件总线.
6. 作用域插槽
7. vuex

44、vue路由钩子beforeEach的参数

to, from, next

45、vuex的getter的作用

主要作用是对state属性进行计算，可以理解类似于Vue中computed。

46、mutation和action的使用区别

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作

2、action改变状态，最后是通过提交mutation

47、计算属性和watcher的使用区别

区别：

1、计算属性在调用时需要在模板中渲染，修改计算所依赖元数据；watch在调用时只需修改元数据。

2、计算属性默认深度依赖，watch默认浅度观测。

3、计算属性适合做筛选，不可异步；watch适合做执行异步或开销较大的操作。

48、vue2中v-model是一个语法糖，那具体是怎么实现的？

1. v-bind绑定响应式数据
2. 通过oninput触发事件获取当前$event.target.value，然后赋值给当前变量。

49、v-if和v-show的区别

1）v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

50、key的作用

key主要是为了高效的更新虚拟DOM

51、vue2常用指令有哪些

vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

52、vue2和vue3的区别

1、性能更比Vue 2.0强。

2、打包更科学不再打包没用到的模块

3、Composition API（组合API）

4、Fragment, Teleport, Suspense

5、更友好的支持兼容TS

6、Custom Renderer API（自定义渲染AP

53、vue2中过滤器是怎么使用的

过滤器：对绑定的数据以及格式进行整理

添加位置：v-bind绑定值 ，{{}}添加过滤器。 表达式的尾部以管道的方式引入 |

到现在2.x版本 过滤器都是自定义的 vue允许自定义过滤器

两种过滤器： 全局过滤器 和 局部过滤器

54、vue2中如何自定义指令

全局自定义指令：

新建一个文件加 directive 里面新建一个 directive.js 文件

写入代码 引入在main.js中

使用的时候用 v-自定义指令名 就可以直接使用

局部自定义指令：

局部自定义指令是定义在组件内部的，只能在当前组件中使用,directives后是一个对象,对象里面key是指令名字,值是一个对象,这个对象里面有钩子函数update,bind,inserted,参数是el,binding,vnode

55、vue2中vue.use是怎么用的

1. 安装Vue.js插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install方法。install 方法调用时，会将Vue作为参数传入。
2. 该方法需要在调用 new Vue() 之前被调用。
3. 当 install 方法被同一个插件多次调用，插件将只会被安装一次。

56、vue2中$nextTick

概念

nextTick 接收一个回调函数作为参数， 它的作用是将回调延迟到下次dom更新周期之后， 如果没有回调且在支持Promise的环境中，则返回一个Promise

应用场景

当更新了数据之后， 需要对新的dom做一些操作， 实际上刚更新数据后，视图不会马上更新，这时我们是获取不到更新后的dom，因为还没有重新渲染 在时候就需要nextTick方法

57、vue2中响应式的原理

Vue通过Object.defineProperty知道数据发生了改变

Vue通过依赖收集去更新视图

Vue通过依赖更新时去更新视图

58、webpack的了解吗? webpack做过哪些配置?

webpack 是一个模块打包器。

webpack 五个核心配置是

1. entry 入口文件 :从哪个文件开始打包
2. output 输出 : 打好包文件输出到哪里
3. module loader配置 : webpack 默认只能打包js/json资源 想要打包其他资源则需要借助loader
4. plugins 插件 : 打包html资源（需要下载适用于html的plugin插件，html-webpack-plugin -D）
5. mode 打包模式 : 压缩js html 在修改mode属性为 production生成模式

59、你平常怎么判断数据类型，你觉得怎样判断才是比较准确的？

typeof 只能准确判断除 null 以外的基本类型

instanceof 是用来 判断数据是否是某个对象的实例，返回一个布尔值

在判断数据类型时，Object.prototype.toString 为 “万能方法” “终极方法”，工作中也是比较常用而且准确

60、v-for / v-if 为什么不建议放一行？如何处理？Vue3 呢？

为什么:

vue2 中 v-for优先级比v-if高

把 v-if 和 v-for 同时用在同一个元素上， 会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

处理:

在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

vue3:

vue3 中 v-if优先级比v-for`高 但是还是不建议放在一行

项目:

1.说一下你最近负责的一个项目，有碰到什么问题吗，你认为的难点是什么？

1. 说一下页面访问控制和权限管理你是怎么做的？

v-model实现原理

1.v-model实现原理：的实现原理其实很简单，可以 为在input框里面通过v-bind动态绑定一个value，然后在input框里面通过@input方法去动态获取input输入的值，然后重新给变量赋值就可以

key的作用

key的作用 ：key的作用主要是为了更高效的对比虚拟DOM中的某个节点是相同节点，判断两个节点是否是相同节点，key值key值是一个必要的条件，在渲染列表时候key值是唯一的 如果不定义，会导致频繁的更新元素，影响性能。

vue2与vue3区别

vue2与vue3：vue2 的双向数据绑定是利用了Es5的API Object.definepropert()的方法对数据进行劫持 vue3 是用了Es6的proXyAPI对数据进行处理

vueRouter的两种形式

Vue-Router有两个路由模式，分别是哈希hash模式和历史history模式，然后默认的是哈希hash模式。

hach: 哈希路由它只是改变hash值，不会重新加载页面

history模式的URL中没有#，它使用传统的路由分发模式，就是说用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的处理，也就是它向服务器发起了一个请求

Es6新语法

1.箭头函数

2.点点展开运算符

3.导出导入 import、export

4.模板字符串

5.let 、const

6.promise

7.解构赋值

8.class 类

json的局限性缺点

不能传空

不能是函数

vue的单向数据流

props的数据只能是父传子，子不能修改，如果子组件修改了父组件的数据不会告诉父组件，就会导致不同的页面数据不同步。

钩子函数的执行过程

vue在第一次渲染的时候会走四个钩子

第一个钩子：beforeCreated: 创建vue实例，但是还没有创建 el和data

第二个钩子：created:创建了data 但是还没有创建el

第三个钩子：beforeMount: 创建el，但是还没有把data挂载到el

第四个钩子：mounted: 完成第一次渲染，把data中的数据渲染到$el上

当数据发生改变会走：

第五个钩子：beforeUpdate ： 只要data中的数据发生变化，就会执行这个钩子

第六个钩子：updated: 完成数据更新，大更新之后的data渲染到页面上

当数据销毁会走

第七个钩子：beforeDestroy:vue准备销毁 ---------内部移除数据监听和侦听器

第八个钩子：destroyed：已经销毁 -------- 解除el和 data之间的关联 修改以后的data，el不会更新

口述全局注册组件

1.在components文件夹中创建一个index.js文件

2.在main.js中导入这个文件

3.Vue.ues(params)方法中 params一般是以对象作为参数 ，对象中有一个方法 install

4.install方法会自动执行 方法中的是形参 vue

5.用export default暴露出去 install方法会自动执行 方法中的是形参 vue

6.通过Vue.sue（component（ 组件名））然后以使用了

vue简写有几个

v-on @

v-bind ：

v-slot #

前端的异步的you那些

三宏任务两微任务 ： 宏：定时器 事件 axios 微任务：promise then

常用的静态方法（函数自己的方法）

Array.from (伪数组转真数组)

Object.keys(一键取所有的对象名)-----键

Object.values(一键取所有的对象值)----值

Object.assign(目标对象，源对象1，源对象2) ---------简写 {...展开运算符}

3.开发项目的时候你都优化了哪些东西？