面试题总结

1、小程序调接口请求用的https还是http
   https  苹果的APP 
2、token除了验证登录权限还能做什么，要放到请求头还是请求体里面
      字符串  可以存储不是太敏感的信息  用户id
3、做过安卓还是ios
   uniapp开发 可以打包为安卓和IOS 
     显示效果  头部的留海   底部安全区
4、支付流程
     https://opendocs.alipay.com/open/203/105285?ref=api
     https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_2.shtml#part-0

     角色
     用户 
     小程序  客户端
     管理后台 服务端
     微信支付平台  支付和确认支付是否完成

     营业执照  支付一定费用 申请不付费  营业额授权0.6%-1%

     小程序下订单,支付订单所进过的一些流程
     1、小程序下订单  管理平台 生成一个订单号 
     2、小程序拥有了一个订单号[商城内部]，订单号请求支付平台生成一个预付单号[确认支付]
     3、管理后台返回从支付平台获取到的预付单的相关信息传递给微信小程序
     4、小程序通过wx.requestPayment根据返回的预付单信息调用支付,根据返回结果，弹出支付窗口
     5、用户输入密码进行支付
     6、支付平台会查询是否支付成功
     7、支付成功就回调[管理平台提前填写一个回调地址]，在管理平台标准订单状态,成功标注后,
           通知支付平台，支付平台会通知小程序。
     8、小程序提示支付成功,根据后续业务逻辑，完成跳转

5、回调函数是什么  
     函数的参数是一个函数 这个函数被称为回调函数  异步通知
6、百度地图用的企业版和个人版有什么区别
      个人版有次数显示  企业版需要公司通过企业资质进行申请  付费  个人版不能够进行商用
7、地图轨迹动画怎么写，路线怎么实现的
     启点和终点的坐标  
8、App怎么打包，怎么自动更新字段  热更新
     HBX 云打包 
9、按钮权限、页面权限
     当登录后，会返回用户的权限列表
     根据用户权限列表判断用户的权限进行分类  页面权限通过路由拦截或者动态路由的方式 
      对用户的页面权限进行限制
     根据用户的操作权限进行判断，如果具有该操作权限就显示操作按钮，如果不存在权限就
      不显示权限按钮
     /user  页面权限 用户页面显示权限
     /user/add 用户的添加权限
    权限映射表 
    10000   控制台权限
    10001  用户页面显示权限
    10002  用户添加权限
 10、怎么做移动端适配
        单位  vh vw  rem   百分比   小程序 rpx   uniapp upx
    视窗 viewport 
    媒体查询  @media

11、vue2和vue3的区别
       语法  配置选项API  组合式API  setup  setup属性
       原理：监听object.defineProperty  vue3 proxy   IE11以上
       ref reactive  toRefs toRef  setup没有this  组件生命周期的变化

12、在线购买
       商品列表或者商品详情页=》购物车=》下订单=》支付=>购买成功
13、上传商品图片
    ①input type file  表单上传    element组件上传的  
       ②上传接口  接收上传的文件  post   成功返回图片地址  失败 返回错误原因

14、get和post区别
       get url地址传递参数  浏览器有长度限制  查询
       post 请求数据一般存储到请求体body中   添加 删除 修改
       put
    delete   
    restful

15、前后端联调过吗
       前后端分离开发 通过设计的数据模型进行数据创建
       后端 根据要求建立数据表  并提供对应的接口服务   根据业务需求  请求参数和返回响应数据
       前端 根据数据格式  进行创建mock数据(json-server json fakerjs)
    服务端提供接口文档    可以通过接口调试工具APIFOX postman APIpost curl axios

16、真机调试用过吗
       微信开发者工具可以直接点击真机测试按钮  通过步骤实现
       H5 手机浏览器
       安卓
   
17、微信授权登录
       wx.getuserInfo
    wx.getUserProfile
    wx.login
    ①获取到code 登录凭证 字符串
       ②code请求开发者服务器 请求微信服务器获取openid
    openid获取成功 登录成功 openid是用户的唯一识别码

18.eventBus弊端：
      EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，
      就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。
      EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个地方注册事件，
      有另外一个或多个地方订阅事件。
     eventBus优点：
    可全局使用
    订阅和发布都很灵活，代码量少
    跨组件通信，无需使用缓存
    eventBus缺点：
    订阅和发布必须成对出现，不然就没有意义
    由于在页面使用里的灵活性，一旦事件多了后，难以对事件进行维护
    在订阅事件的组件里，必须手动销毁监听，否则会引发多次执行
    对于一些包含业务逻辑的通信，复用性差，需要在多个地方重复写逻辑

      总结：    中大型项目都不推荐用EventBus，建议用vuex做状态管理，方便日后维护。
    小型项目，涉及到多处跨组件通信的情况，可以考虑使用。

19.Axios
      定义：   Aaxios是一个基于promise的HTTP库 ， 可以用在浏览器和node.js中
      特点：   支持从浏览器中创建XMLHttpRequests
       支持从node.js创建http请求
       支持Promise API
       能拦截请求和响应
       能转换请求数据和响应数据
       能取消请求
       自动转换JSON数据
       客户端支持防御CSRF

20.vue响应式：
           Vue2.x在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，
          当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)，如果属性发
          生变化会通知相关依赖进行派发更细(发布订阅模式)。

         vue3.0采用es6中的proxy代替Object.defineProperty做数据监听。

21.vue双向绑定：
      vue2使用Object.defineProperty结合发布者-订阅者模式
      vue3使用proxy

22.http常用状态码
            200:请求成功
            3xx：表示完成请求需要进一步操作 301重定向跳转
            4xx:请求错误
            5xx:服务器错误 

23.type 和 interface的区别
            type是类型，interface是接口
           都是用来定义对象或函数的形状
            interface使用extends继承,type使用&（交叉类型）继承

24.es6新增
            let和const 先声明后使用 不能重复声明 都存在块级作用域
            解构赋值
            map和set
            assign用于浅拷贝对象
            includes（）用于判断字符串中是否包含参数字符串 返回boolean值
            箭头函数
            导入以及导出import和export
            异步请求promise

25.从浏览器输入网址到渲染更新经历了哪些
            - [ ] 查找缓存
            - [ ] DNS解析（1.浏览器会先检查是否存在缓存，如果存在直接在缓存里拿数据进行渲染 ）
            - [ ] 建立TCP连接（通过三次握手确认连接）
            - [ ] 发送HTTP请求（连接建立完毕，浏览器可以和服务器开始通信及发送请求）
            - [ ] 网络响应
            - [ ] 页面渲染
            - [ ] 解析过程
            - [ ] 渲染

26.原型
            原型就是一个对象，每个原型都有他自己对应的原型对象，每个对象都可以使用他
            对象对应原型对象上的属性和方法
            每创建一个对象，就会生成一个_proto_属性，被称为隐式原型；这个_proto_属性
            指向的是这个对象的构造函数的prototype；被称为显式原型。每一个对象都会从原
            型中继承属性

27.原型链
            当访问一个对象的属性或方法时，首先对象先从自身去找，如果找不到，就会往原型
            中去找，即_proto_，也就是它构造函数的prototype中，如果原型中也没有该属性，
            因为构造函数也是对象，也有_proto_，就会往原型上去找，这样就形成了链式的结构
            称为原型链。

28.防止按钮连续点击
            给变量flag属性值设置为false，使得按钮可以点击（disabled：true）
            当用户点击之后设置按钮不可点（disabled：false）
            等待事件执行完成或者相应的间隔时间后，恢复按钮为可点击状态

29.vue优化
            v-for遍历为item添加key
            v-for遍历避免同时使用v-if
            v-if跟v-show区分使用场景

30.foreach与map的区别
            1.相同点：都是循环遍历数组中的每一项;匿名函数中的this都是指向window。
            2.不同点：map()会分配内存空间存储新数组并返回，forEach()不会返回数据;
     forEach()允许callback更改原始数组的元素。

31.splice和slice的区别
            1.splice改变原数组，slice不改变原数组。
            2.splice除了可以删除之外，还可以插入。
            3.splice可传入3个参数（start，deleteCount移除的个数，item），
                slice接受2个参数（start，end）

32.ajax请求 

        Vue中使用Ajax请求可以使用Vue-resource或者Axios。

1. 安装Axios：

   npm install axios --save

2. 在Vue组件中引入Axios：

   import axios from 'axios'

3. 发送GET请求：

   axios.get('/api/getData') .then(response => { console.log(response.data) })
    .catch(error => { console.log(error) })

4. 发送POST请求：

   axios.post('/api/postData', { data: 'example' }) 
   .then(response => { console.log(response.data) }) 
   .catch(error => { console.log(error) })

5. 发送PUT请求：

   axios.put('/api/putData', { data: 'example' })
    .then(response => { console.log(response.data) })
    .catch(error => { console.log(error) })

6. 发送DELETE请求：

   axios.delete('/api/deleteData') 
   .then(response => { console.log(response.data) }) 
   .catch(error => { console.log(error) })

33.跨域

        在Vue中实现跨域可以通过以下两种方式：

1. 通过配置代理

        在vue.config.js中进行配置：

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', 
// 目标地址 changeOrigin: true, // 允许跨域
 pathRewrite: { '^/api': ''} // 将/api替换为空 } } } } }

        这里配置了一个/api代理，访问/api时会转发到http://localhost:3000/api，并且允许跨域。

1. 使用CORS（跨域资源共享）

        在服务端设置Access-Control-Allow-Origin头，允许指定的源访问该资源。

        代码示例：

const express = require('express')
const app = express() app.use((req, res, next) => 
    { res.header('Access-Control-Allow-Origin', '*') next() })
app.get('/api/data', (req, res) =>
     { res.json({ message: 'Hello World!' }) }) 
app.listen(3000, () => 
    { console.log('Server started on port 3000') })

 这里使用了express框架，设置了Access-Control-Allow-Origin头，允许任何源访问/api/data接口。

34.深浅拷贝

        完成一个带数据页面的开发大体流程
        发请求    那数据    存本地    作展示
        1.获取数据 ajax    axios    接口地址url 请求类型 携带参数
        2.存数据 data[响应式数据] compostion写法 setup函数 一定记得return和ref响应式
        3.页面布局  通过html+css 进行页面布局  通过组件进行实现
        4.将数据渲染到页面中  渲染指令 v-if  v-show  v-text  v-html  v-bind  v-on.

35.this指向找不到怎么解决？
        1.bind绑定this  传递参数
        2.call （会立即调用）
        3.apply（会立即调用）
        4.使用闭包：在函数内部定义一个变量保存this的值，然后在函数内部使用该变量即可。
        5.使用ES6的解构赋值：可以将需要使用的对象属性解构出来，然后在函数内部使用解构后的变量即可。
        6.使用类的方法：类中的方法默认绑定为实例对象，因此可以使用类的方法来解决this指向的问题。构造函数中记得调用父类super（）否则this会丢失
        7.使用箭头函数：箭头函数中的this指向定义时所在的作用域，而不是调用时所在的作用域。

36.Reatful编码风格
        RESTFUL是一种网络应用程序的设计风格和开发方式，基于HTTP，可以使用 XML 格式定义或 JSON 格式定义。最常用的数据格式是JSON。由于JSON能直接被JavaScript读取，所以，使用JSON格式的REST风
格的API具有简单、易读、易用的特点。

37.什么是虚拟DOM？
        用js表示DOM的一个结构，将频繁的操作DOM 的操作用js对象进行描述一次性插入以提高效率

38.vm.$set()实现原理是什么?

        通过$set可以对指定的属性 通过 Object.defineProperty 增加get 和set 从而让其具备响应式。

39.Vue 组件 data 为什么必须是函数 ?

        组件是复用的，所以需要保证每个组件都单独的维护一份状态，所以需要写成函数返回一个对象。

40.什么是MVVM框架？

        我的理解是数据驱动视图，通过状态的修改MVVM的框架就会去主动的更新视图。

41.v-model双向数据绑定原理？

        v-model本质上是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件

42.v-show 和 v-if 有哪些区别？

• v-if 会在切换过程中对条件块的事件监听器和⼦组件进⾏销毁和重建，如果初始条件是false，则什么都不做，直到条件第⼀次为true时才开始渲染模块。
• v-show 只是基于css进⾏切换，不管初始条件是什么，都会渲染。 

43.Vue-Router 的导航守卫和执行流程？ 

• 触发进入其他路由。
• 调用要离开路由的组件守卫 beforeRouteLeave
• 调用全局前置守卫：beforeEach
• 在重用的组件里调用 beforeRouteUpdate
• 调用路由独享守卫 beforeEnter。
• 解析异步路由组件。
• 在将要进入的路由组件中调用 beforeRouteEnter 组件守卫
• 调用全局解析守卫 beforeResolve
• 导航被确认。
• 调用全局后置钩子的 afterEach 钩子。
• 触发DOM更新 (mounted)。
• 执行 beforeRouteEnter 守卫中传给 next 的回调函数

44.Vue-Router 中的hash和history路由模式和区别？ 

• hash 模式，使用 URL 中的 # 作为路由，支持所有的浏览器。hash+pushState/hashChange 兼容性好，不刷新页面，因为服务端无法获取hash值，对 seo 优化不好，比如https://baidu.com/a 会直接显示未找到，而 https://baidu.com/#a 还是显示的是百度的首页，因为服务器获取不到# 后面的数据。
• history 模式，浏览器提供 historyApi( go/back/forward ) 和新增的两个 pushState()/replaceState ()，这两个api可以在不刷新的情况下读取浏览器的历史记录，history模式美观，但是需要服务端的至此否则会出现404状态。
• abstract 模式，在不支持浏览器的环境下使用。 (可以回答为没用过)

45.说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明？   

        所谓的vue 过滤器就是将数据进⾏⼆次处理 , 得到我们想要的结果数据

        vue的过滤器分为两种 , 第⼀种是全局过滤器 , 通过 vue.filet 来进⾏定义 , 第⼆种是局部过滤器 ,需要定义在组件内部

        项⽬中我们通过过滤器将后台返回的状态0 和 1 转化为⽀付或者未⽀付

46.如果new一个箭头函数会怎么样

        箭头函数是ES6中提出来的，他没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能new一个箭头函数

        new操作符的实现步骤如下：

        1.创建一个对象

        2.将构造函数的作用域赋给新对象（也就是将对象的proto属性指向构造函数的prototype属性）

        3.指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）       

        4.返回新的对象

        所以，上面的第二、三步，箭头函数都是没有办法执行的

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

1. 语法不同：箭头函数使用箭头（=>）来定义函数，而普通函数使用 function 关键字。

2. this 的指向不同：箭头函数的 this 指向定义时所在的作用域，而普通函数的 this 指向调用时所在的对象。

3. arguments 对象不同：箭头函数没有 arguments 对象，而普通函数有 arguments 对象。

4. 构造函数不同：箭头函数不能用作构造函数，而普通函数可以用作构造函数。

5. return 语句不同：箭头函数可以省略 return 关键字，而普通函数必须使用 return 关键字来返回值。

6. 箭头函数不能使用 yield 关键字。

48.数组的常用方法  

1. push()：向数组末尾添加一个或多个元素，并返回新数组的长度。
2. pop()：删除数组末尾的一个元素，并返回该元素的值。
3. shift()：删除数组第一个元素，并返回该元素的值。
4. unshift()：向数组开头添加一个或多个元素，并返回新数组的长度。
5. splice()：从数组中删除或添加元素，可以指定删除/添加的位置和数量。
6. slice()：返回数组的一部分，可以指定起始和结束位置。
7. concat()：合并两个或多个数组，并返回新数组。
8. join()：将数组中的所有元素转换为一个字符串，可以指定分隔符。
9. reverse()：将数组中的元素顺序颠倒。
10. sort()：对数组进行排序，可以指定排序规则。

49.typeof和instanceof的区别

        

typeof是一个操作符，用于确定一个值的类型，返回一个字符串表示该值的数据类型，例如"number"、"string"、"boolean"、"undefined"、"object"、"function"等。它适用于基本数据类型和函数，但对于null和数组等复杂数据类型，typeof的返回值并不准确。

instanceof是一个运算符，用于检查一个对象是否是某个类的实例，返回一个布尔值。它适用于复杂数据类型，如数组、对象、函数等。但是，如果检查的对象是通过字面量创建的，那么instanceof无法判断其类型。

因此，typeof和instanceof适用的范围不同，typeof适用于基本数据类型和函数，instanceof适用于复杂数据类型。

50.在那用到过localStorage

        

localStorage可以在Web开发中用于本地存储数据，常用的应用场景包括：

1. 记住用户的登录状态，以便下次访问时自动登录。

2. 存储用户的个性化设置，如主题颜色、字体大小等。

3. 缓存数据，减少服务器请求，提高网站性能。

4. 存储临时数据，如表单数据、购物车数据等。

5. 存储离线数据，使得应用在离线状态下也能够正常运行。

6. 存储用户的历史记录，以便下次访问时快速回到之前访问的页面。

7. 存储应用的配置信息，如API地址、版本号等。

总之，localStorage是一个非常实用的Web API，可以在很多场景下帮助我们实现更好的用户体验和更高的性能。

51.二次封装axios

二次封装axios是指在axios的基础上进行再次封装，以便于在项目中更加方便地使用。一般来说，二次封装axios的目的有以下几个方面：

1. 统一处理请求和响应的错误信息，例如网络异常、服务器错误等。
2. 统一处理请求和响应的数据格式，例如将后端返回的数据格式进行统一转换。
3. 统一处理请求和响应的拦截器，例如在请求头中添加token等。
4. 简化axios的使用方式，例如将一些常用的配置进行默认设置。

以下是一个简单的二次封装axios的示例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

instance.interceptors.request.use(
  config => {
    // 在请求头中添加token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    // 统一处理响应数据格式
    return response.data
  },
  error => {
    // 统一处理响应错误信息
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 跳转到登录页面
          break
        case 404:
          // 页面不存在
          break
        case 500:
          // 服务器错误
          break
        default:
          break
      }
    }
    return Promise.reject(error)
  }
)

export default instance

在上面的示例中，我们通过create方法创建了一个axios实例，并设置了一些默认配置，例如基础URL、超时时间和请求头。然后，我们通过interceptors属性设置了请求和响应的拦截器，用于处理请求和响应的错误信息、数据格式和请求头。最后，我们将封装好的axios实例导出，以便于在项目中使用。

52.有var了为什么还需要let，const 

        var, let和const都是用来声明变量的关键字，但它们有着不同的作用和用法。

        1. var：在ES5中，var是声明变量的唯一关键字。它的作用域是函数作用域或全局作用域，如果在函数内部声明，那么变量只在函数内部有效。var声明的变量可以被重复声明，而且可以被重新赋值。

        2. let：在ES6中，let是新引入的关键字，用来声明块级作用域变量。let声明的变量只在当前块级作用域内有效，如果在块级作用域内部声明，那么变量只在块级作用域内有效。let声明的变量不可以被重复声明，但可以被重新赋值。

        3. const：const也是在ES6中引入的关键字，用来声明常量。const声明的变量也是块级作用域，但是一旦被赋值，就不能被重新赋值。const声明的变量也不可以被重复声明。

        总结来说，var在ES6中已经被let和const所取代，因为let和const更加严格、安全和易于维护。使用let和const可以避免变量的意外修改和重复声明，同时也可以更好地控制变量的作用域。

53.说一下promis

        Promise是一种异步编程解决方案，它可以避免回调地狱，提高代码的可读性和可维护性。Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise处于pending状态时，可以通过resolve方法将Promise状态改为fulfilled，也可以通过reject方法将Promise状态改为rejected。Promise一旦状态改变，就会调用then方法或catch方法，then方法用于处理fulfilled状态的Promise，catch方法用于处理rejected状态的Promise。Promise还可以通过链式调用then方法实现多个异步操作的顺序执行，这种方式称为Promise链。

54.说一下箭头函数

        箭头函数是ES6中新增的一种函数定义方式，它的语法简洁，使用起来方便。

        箭头函数的语法如下：

(param1, param2, …, paramN) => { statements }

        其中，`param1, param2, …, paramN` 是函数的参数列表，`statements` 是函数体。

        箭头函数有以下特点：

        1. 箭头函数没有自己的 `this`，`this` 的指向由上下文决定。这意味着箭头函数中的 `this` 指向的是定义时所在的对象，而不是执行时所在的对象。

        2. 箭头函数没有自己的 `arguments` 对象，但可以使用 `rest` 参数来获取所有传入的参数。

        3. 箭头函数不能作为构造函数使用，不能使用 `new` 关键字调用。

        4. 箭头函数没有 `prototype` 属性，不能使用 `call()`、`apply()`、`bind()` 等方法绑定 `this`。

箭头函数的优点是语法简洁，可以减少代码量，同时由于没有自己的 `this`，可以避免 `this` 指向的混乱问题。但是，由于其不能作为构造函数使用，也不能使用 `call()`、`apply()`、`bind()` 等方法绑定 `this`，在某些情况下可能会有限制。

55.说一下防抖节流

        防抖和节流都是前端优化中常用的方法，用于减少页面的性能消耗和提升用户体验。

防抖：在一段时间内，多次触发同一个事件，只执行最后一次触发的事件。例如，当用户在搜索框中输入关键字时，我们可以设置一个延时时间，在这个时间内，如果用户继续输入，就重新计时，直到用户停止输入，才执行搜索操作。

        节流：在一段时间内，多次触发同一个事件，只执行一次事件。例如，当用户滚动页面时，我们可以设置一个时间间隔，在这个时间间隔内，只执行一次滚动事件。

        防抖和节流的实现方式可以使用原生JS或者第三方库，如Lodash。它们的使用可以减少页面的性能消耗，提升用户体验。

56.说一下vite

        Vite是一种新型的前端构建工具，它的目标是提供一种更快、更简单的开发体验。Vite采用了ES modules的方式加载代码，利用浏览器原生支持的模块化特性，避免了传统的打包过程，使得开发者可以更快地启动项目和热更新。此外，Vite还支持TypeScript、React、Vue等主流框架，并且可以通过插件扩展更多的功能。总之，Vite是一种非常有前途的前端构建工具，可以大大提高开发效率和用户体验。

57.npm的库是什么

        npm的库是指在npm（Node Package Manager）上发布的可重用的JavaScript代码包。这些库可以包含各种功能，如数据操作、网络请求、UI组件、工具函数等，可以被其他开发者在他们的项目中引用和使用。npm的库被广泛用于Web开发、服务器端开发、移动应用开发等各个领域。

58.用户同时请求了三个接口，但是此时他的token过期了，每次请求都提示一个弹框，一次请求了三个  就会造成屏幕闪烁，如何解决这个问题？

        可以使用以下两种方法解决这个问题：

        1. 使用Token刷新机制：在每个接口请求之前，先检查用户的Token是否过期，如果过期则使用刷新Token的接口获取新的Token，然后再进行接口请求。这样可以避免多次弹出Token过期提示框，提高用户体验。

        2. 使用队列机制：将用户的接口请求放入一个队列中，每次只处理队列中的一个请求，如果发现Token过期则弹出提示框，等待用户操作后再进行下一个请求。这样可以避免多次弹出提示框，但可能会影响接口请求的响应速度。

59.BFC是什么，怎么处理BFC的问题

        BFC是“块级格式化上下文”的缩写，是Web页面中的一种渲染模式。在BFC中，每个盒子（元素）都会按照特定的规则进行排列和布局，不会影响到其它盒子的布局。

        处理BFC的问题通常有以下几种方法：

        1.使用浮动：将需要创建BFC的元素设置为浮动，可以触发BFC的创建。

        2.使用定位：将需要创建BFC的元素设置为绝对或固定定位，也可以触发BFC的创建。

        3.使用overflow属性：将父元素设置为overflow:hidden或overflow:auto，可以触发BFC的创建。

        4.使用display属性：将元素设置为inline-block或table-cell，也可以触发BFC的创建。

        5.使用clear属性：在需要清除浮动的元素后添加一个空元素，并设置clear属性为both，可以解决浮动元素引起的高度塌陷问题。

60.请求接口闪屏解决方法

        1. 使用Vue的keep-alive组件缓存页面，避免重复请求接口造成闪屏。

        2. 使用loading组件或者加载动画，让用户知道数据正在加载。

        3. 将接口请求放在Vue的created或mounted生命周期函数中，避免页面加载完成后再请求数据造成闪屏。

        4. 对于大量数据的接口请求，可以使用分页或者懒加载的方式，避免一次性请求过多数据造成闪屏。

        5. 对于网络较慢的情况，可以设置请求超时时间，避免用户长时间等待造成不良体验。

61.计算属性的原理是什么？

        计算属性是一种特殊的属性，其值不是直接存储在对象中，而是根据其他属性的值计算得出。计算属性的原理是通过 getter 和 setter 方法来实现的。getter 方法用于获取计算属性的值，setter 方法用于设置计算属性的值。当访问计算属性时，会自动调用 getter 方法计算属性的值；当设置计算属性时，会自动调用 setter 方法设置计算属性的值。计算属性可以依赖于其他属性的值，当依赖的属性值发生变化时，计算属性的值也会相应地发生变化。

62.简单介绍一下常用的hooks

React中常用的hooks有以下几种：

        1. useState：用于在函数组件中添加state状态，可以通过设置初始值来初始化状态，并且可以通过setState方法来更新状态。

        2. useEffect：用于在函数组件中处理副作用，比如在组件挂载、更新或卸载时执行一些操作，可以通过传入依赖项来控制何时执行。

        3. useContext：用于在函数组件中使用上下文，可以通过创建上下文对象并将其传递给组件来实现组件之间的数据共享。

        4. useReducer：用于在函数组件中管理复杂的状态，可以通过创建reducer函数来处理状态更新逻辑，并通过dispatch方法来触发状态更新。

        5. useCallback：用于在函数组件中缓存函数，可以通过缓存函数来避免在每次渲染时重新创建函数实例。

        6. useMemo：用于在函数组件中缓存计算结果，可以通过缓存计算结果来避免在每次渲染时重新计算结果。

        7. useRef：用于在函数组件中引用DOM节点或其他值，可以通过创建ref对象来引用组件中的DOM节点或其他值。

63.什么是受控组件？

        受控组件是指表单元素的值被 React 组件的 state 所控制的组件。在受控组件中，表单元素的值被 React 组件的 state 所控制，每当表单元素的值发生变化时，都会调用一个事件处理函数来更新组件的 state，从而实现表单元素的双向绑定。相比于非受控组件，受控组件可以更加精细地控制表单元素的值，以及对表单元素的输入进行更加细致的验证和处理。

64.数组的方法（重点）

        push        pop        unshift        slice        splice        concat        reverse         includes

        some        filter        map        forEach        every        reduce

65.hooks如果你需要依赖的项太多，有什么解决思路？

        1.可以考虑使用组合式API来重构代码，将复杂的逻辑拆分成多个小的逻辑块，每个小的逻辑块只依赖于必要的数据，然后再将这些小的逻辑块通过组合式API组合起来。

        2.也可以考虑使用状态管理工具，如Vuex或Redux，来管理应用的状态，这样可以避免过多的props传递和组件之间的耦合，提高代码的可维护性。

66.ajax和axios的区别

        Ajax和Axios都是用于发送异步请求的JavaScript库，但是有以下区别：

        1. Ajax是一种原生的JavaScript技术，而Axios是一个第三方库。

        2. Ajax使用XMLHttpRequest对象来发送请求，而Axios使用Promise封装XMLHttpRequest对象，使得代码更加简洁。

        3. Axios可以在浏览器和Node.js环境中使用，而Ajax只能在浏览器中使用。

        4. Axios支持拦截器，可以在请求和响应中添加一些额外的逻辑，而Ajax不支持。

        5. Axios支持取消请求，而Ajax不支持。

        总的来说，Axios更加方便易用，支持的功能也更加丰富。但是如果只是简单的发送请求，使用Ajax也是可以的。

67.什么是链式调用，需要满足什么才能链式调用，用过哪些链式调用?

        链式调用是一种编程风格，它允许在一行代码中调用多个方法。在链式调用中，每个方法都返回一个对象，该对象可以直接调用下一个方法，而不需要中间变量来存储结果。

        要实现链式调用，需要满足以下条件：

        1. 每个方法都必须返回对象本身，以便可以继续调用其他方法。

        2. 每个方法都必须在对象上执行，以便可以访问对象的属性和方法。

        3. 方法的顺序必须正确，以便可以按照正确的顺序调用它们。

        一些常见的链式调用包括：

        1. jQuery：jQuery是一个流行的JavaScript库，它允许使用链式调用来选择和操作HTML元素。

        2. Lodash：Lodash是一个JavaScript实用程序库，它提供了许多有用的功能，包括链式调用。

        3. D3.js：D3.js是一个数据可视化库，它允许使用链式调用来创建和操作图表和其他可视化元素。

        4. React：React是一个流行的JavaScript库，它允许使用链式调用来创建和操作组件。

68.http和https的区别

        HTTP（超文本传输协议）和HTTPS（安全超文本传输协议）是用于在Web浏览器和Web服务器之间传输数据的协议。它们的主要区别在于安全性和加密性。

        HTTP是一种基于文本的协议，它将数据以明文的形式传输。这意味着，如果黑客截获了传输的数据，他们可以轻松地阅读和修改它们，从而威胁到数据的安全性和完整性。

        HTTPS则是一种安全的协议，它使用SSL（安全套接层）或TLS（传输层安全性）协议来加密数据。这意味着，即使黑客截获了传输的数据，他们也无法阅读或修改它们。HTTPS协议通常用于传输敏感信息，如信用卡号码、密码等。

        另外，使用HTTPS协议的网站还会获得更高的搜索排名，因为搜索引擎通常会将HTTPS作为一个重要的SEO指标。

69.权限管理

        权限管理是指在一个系统或应用程序中，对用户或角色进行授权和限制其访问特定资源或执行特定操作的过程。通过权限管理，可以确保只有授权的用户或角色才能够访问敏感信息或执行重要操作，从而保护系统的安全性和完整性。

        权限管理通常包括以下几个方面：

        1. 用户/角色管理：包括用户/角色的创建、修改、删除等操作，以及用户/角色的权限分配和管理。

        2. 权限控制：对用户/角色进行授权，限制其访问特定资源或执行特定操作。

        3. 审计跟踪：记录用户/角色的操作记录，以便发现异常行为或安全事件。

        4. 安全策略：制定安全策略，包括密码策略、访问控制策略等，以确保系统的安全性和完整性。

        权限管理是信息安全的重要组成部分，广泛应用于企业内部系统、网络应用程序、电子商务等领域。

70.浏览器的缓存

        浏览器缓存是指浏览器在访问网站时，将网站的一些资源（如图片、样式表、脚本等）存储在本地计算机上，以便下次访问同一网站时可以更快地加载这些资源，提高用户体验和网站访问速度。

        浏览器缓存可以分为两种类型：强缓存和协商缓存。

        强缓存是指浏览器在第一次请求资源时，服务器会在响应头中指定该资源的缓存时间，浏览器会根据这个时间来判断是否使用缓存。如果缓存时间未过期，则直接从缓存中获取资源，否则重新向服务器请求资源。

        协商缓存是指浏览器在第一次请求资源时，服务器会在响应头中指定该资源的标识（如ETag或Last-Modified），浏览器会将这个标识值保存下来。下次请求时，浏览器会将这个标识值发送给服务器，服务器会根据这个标识值来判断资源是否有更新。如果资源未更新，则返回304状态码，告诉浏览器可以使用缓存；如果资源有更新，则返回新的资源。

        浏览器缓存可以通过清除浏览器缓存或者在开发中使用版本号等方式来控制。