一些前端面试题总结

艾特shark
193 阅读12分钟

1.http和https的区别

http 和 https 区别

  1. http是超文本传输协议，明文传输，https是安全性较高的加密传输协议
  2. https需要ca证书，费用比较高
  3. 由于链接的方式不同，端口也不用，一般来说http的端口是80，https的端口是443

2.vuex的工作流程

a17eb83767e1817409e6c431e8e7dc5

3.自定义指令实现水印

用canvas画出来的一张图片，当成目标元素的背景就可以了

4.小程序中页面通信的方式

I.通过getCurrentPages来操作

从B页面打开A页面

const pages=getCruuentPages()
const prevPage=pages[pages.length-2]

2.通过EventChannel来操作

B打开A页面

B->A

A：通过在navigateTo的success中通过res.eventChannel,on绑定事件 B：通过this,getopenerEventChannel()得到eventChannel,然后调用emit来触发事件

A->B

A：通过在navigateTo的success中通过res.eventChannel.emit触发事件 B：通过在onLoad中获取到this.getopenerEventChannel()得到eventChannel,调用on来绑定事件

3.通过？传参，

然后再B中通过onload的query，对象中获取到传递的参数 传递参数 A跳转到B时，在u1地址后通过？号传递参数过去 B 页面在onLoad的参数中获取即可。

4.通过Promise来进行通信

在A页面创建一个函数 ，返回一个new Promise函数，保存下来resolve和reject函数，跳转到B页面之后，获取B页面的数据，并调用A中写的触发promise函数，传递参数并调用resolve函数，此时A中的resolve函数就执行了，在调用这个函数时，用。then可以获取到数据

5.小程序里面使用npm包

image-20230912112806325

5.1使用dayjs对日志时间处理

image-20230912113024813

6。小程序中获取最新的用户信息的方式是什么

7.小程序中的代码运行在逻辑层，视图层（webview）和逻辑层是分离的，通过native进行连接，

不能直接在wxml中使用函数，要使用可以用 wxs写法，内部不能使用es6及其以上的语法

7.有阴影的按钮

image-20230914084827327

image-20230914084849033

8.小程序开发和普通网页开发有什么区别

image-20230914090840812

9.proxy相比较Object.defineproperty有什么优势

1.Proxy可以直接代理一整个对象，而无需像defineProperty
那样循环劫持对象的每一个属性，能让组件的初始化更快
2.defineProperty本身有局限，

2.1.它无法劫持到对象属性的新增与删除 2.2.它无法劫持到数组的针对下标来修改某一项 针对上面这两个点，Vue需要额外提供setsetdelete方法来实现劫持 2.3.它无法劫持到数组的API方法的调用 针对这点，Vue内部对数组7个方法做了重写 push shift pop unshift reverse sort splice Proxy 没有这个局限：

10.vue3新增的emits选项的作用是啥

image-20230914091700764

11。vue中新增的Teleport组件的作用是什么

image-20230914093258104

12.vue3中新增的expose的作用是什么

image-20230914093515261

3.就是那个写setup语法糖时，用ref标记拿到的是一个空对象，然后可以使用defineexpose函数暴露子组件的状态和方法给父组件

13.小程序的一键登录的流程（一键）

image-20230914094309866

14 小程序获取用户信息流程

image-20230914104634872

15.如何查看网页的运行环境，是pc端还是移动端

window.navigator.userAgent

image-20230914140843816

16.小程序的支付流程

image-20230914160005171

1.用户下单
2.调用云端提供的下单支付接口
2.1后端会生成一个订单
2.2后端会去调用微信支付的统一下单接口，得到预付单标识
2.3后瑞会返回带有支付参数的内容给到前端
3.前端获取到后端接口返回的支什参数【时间戳随机数、签名、签名类型、预付单标识】
4.使用这些支付参数调用wx.requestPayment()方法，调出支付界面
4.1.用户输入密码支付
5.wx.requestPayment(.)在success成功的回调里面做支付成功的业务逻辑处理
6.wx.requestPayment()在fail失败的回调里面做支付失败的业务逻辑处理

17.小程序如何获取用户的手机号码

image-20230914161403066

18.小程序中的一次性订阅消息是怎么做的

19.小程序的优化点

01：处理分包
02：处理本地图片，讲本地图片资源上传到存储桶，使用网络资源，减少包体积
03：可以定义数据，不引起页面更新的数据不妨到data下
04：合理调用setData函数，setData是逻辑层向视图层的通信
05:频繁事件可以直接交给wxs去使用，wxs是运行在视图层，不参与逻辑层渲染

06:

20.小程序里面的图片 （减少小程序的体积）

找你们老大/组长要一个存储桶，把本地图片 可以上传到腾讯云的存储桶，把本地图片！换成在线链接 ，上线最多2M。

21.分包

思想和pc端的路由懒加载是一样的，用到的时候再加载出来，每个2M，最多可以分十个包 总体积不超过20M

先加载主包资源页面，当用户进入到某个分包页面的时候，再把分包页面下载下来

刚出现的时候分包不能超过8M，随着业务变大又变成了16M，到现在变成了20M
***问到分包的时候，你的小程序分了几个包，怎么配置的，每个包多大，每个包里面有哪些内容（可以按照模块进行分包，tabbar页面不可以放在分包页面，都放在主包里面，）
***主要不能直接获取分包的数据和方法，分包是用到的时候才能加载出来，可以把分包里面定义的方法定义到全局

22.上线

体验版本如何使用console来查看控制台调试

image-20230916092520033

image-20230916092621363

image-20230916092558329

23.网页上如何使用vconsole

01.使用在线链接

image-20230916093004947

02.框架里面的话 可以使用npm包

24.vue2和vue3的区别

1.首先是双向绑定的原理不同

vue2是使用ES6的语法，Object.defineProperty()对数据进行劫持，然后结合发布订阅模式实现的，Object.defineProperty()只能监听对象上的某个属性，无法监听后续添加的属性。 vue3是使用ES6的语法，proxy对数据进行代理实现的。proxy是可以代理整个对象，当对象出现变化时都可以监听到。

2.生命周期不同

vue3引入了beforeUnmount和unmounted 两个新钩子，替换了vue2中的beforeDestroy和destroyed,除了命名不同，所指的阶段都是一样的

3.v-if和v-for的优先顺序不一样

vue2中v-for优先级高于v-if，两个都可以同时使用，效果也能实现，但是不推荐，当数据量比较大的时候可能会导致性能上的问题。可以通过计算属性或者其他办法过滤出符合条件的结果，再把结果传给v-for进行循环 vue3中v-if的优先级高于v-for，同时使用会报错，

4.API不一样

vue2是选项式API，vue3式组合式API

25.vue的生命周期以及每个钩子函数做的事情

生命周期 概念：指的是一个组件从创建到销毁（卸载）的一系列过程。这个过程中Vue内部会做很多的事情：包含有 数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM

生命周期的钩子函数 概念：在一个生命周期中，特定的时机会触发的一些函数，就叫做生命周期的钩子函数。

生命周期的钩子函数有哪些：

  1. 创建阶段 beforeCreate => 创建之前

    1. 数据代理还未完成，不能通过 this 获取到 data、methods、computed 选项中的数据 created 创建完成

      1. 数据代理已完成，这是可以获取到 data、methods、computed 选项中的数据

        1. 可以在这儿做一些数据初始化的工作。比如给 this 上绑定一些额外的数据

          1. 可以调用后端接口来获取数据
          2. 挂载阶段 beforeMount => 挂载之前
          3. 不能获取真实的DOM mounted => 挂载完成
          4. 这时，可以获取到真实的DOM
          5. 我们一些第三方的库需要用到真实DOM做初始化的，需要在这儿调用。比如 swiper、echarts、等等
          6. 可以调用后端接口来获取数据，甚至更多时候都推荐在 mounted 来调回初始接口
          7. 如果想让请求更早的发出，可以选择使用 created
          8. 如果为了兼容服务端渲染SSR，就使用 mounted
          9. 更新阶段 beforeUpdate => 更新之前
          10. 获取不到更新之后的最新DOM updated => 更新完成
          11. 能获取到更新之后的最新DOM
          12. 卸载（销毁）阶段 beforeDestroy => 销毁之前(vue2) beforeUnmount => 卸载之前(vue3)
          13. 都是去干一些清理收尾的工作，一般会选择在这里来做
          14. 之前全局绑定的滚动事件, 要做 remove
          15. 之前设置的计时器，要做 clear
          16. 之前订阅的一些消息来做取消订阅 ... destroyed => 销毁完成(vue2) unmounted => 卸载完成(vue3)
          17. 都是去干一些清理收尾的工作
          18. 缓存阶段 当一个组件被 KeepAlive 包裹时就会被缓存，不会触发卸载(销毁)阶段，会多出两个生命周期的钩子函数 activated => 激活(可见状态)
          19. 默认会触发一次，后续组件重新可见会再次触发
          20. 应用场景：类似与mounted做全局事件绑定、计时器、消息订阅等工作 deactivated => 失活(不可见状态)
          21. 不可见时触发
          22. 应用场景：类似于卸载做清理收尾的工作

    26.computed(计算属性)和watch有什么区别

    相同点：都是用来处理响应式数据的工具， 不同点： 1.computed是计算属性，它会根据依赖的属性自动计算并返回一个值，当依赖的数据发生变化时，数据才会更新；watch是一个监听器，用来监听一个值的变化，当出现变化的时候执行对应的操作

2.computed是有缓存的，当依赖的数据没有发生变化时，会从缓存中取出之前的数据，反之就会重新计算；watch没有缓存，每次监听的值发生变化时都会调用回调函数

3.computed有返回值，返回的值计算出的结果；watch没有返回值

4.computed不支持异步操作；watch支持异步操作，可以在回调函数中执行异步操作

5.当一个属性的值是通过其他属性计算而来时或者一个数据被多个数据影响时，可以使用计算属性，比如购物车中计算商品的价格；当我们需要在数据变化时，需要执行异步操作或者一个数据影响多个数据的情况，可以使用watch

27.v-if和v-show的区别

相同点：首先他们的共同点都是控制元素的显示和隐藏 不同点： 1.v-if 是真正的 条件渲染，当条件为true是元素会创建，条件为false元素会销毁；v-show 只是简单的控制元素的 css 样式 display: none 2.v-if 有更高的 切换开销； v-show 有更高的 初始渲染开销； 3.如果元素需要频繁的切换显示，使用 v-show. 其余一般都使用 v-if

  1. v-if 可以配置 template 使用，但是 v-show 不能。因为 template 不会生成 html 标签在页面，v-show 不能去修改他的 css

28.vue中data为什么不能用对象式而是用函数式

如果组件中data使用对象式写法，如果组件里直接将data定义为一个对象的话，那么在模板中多次复用该组件，组件中的data会指向同一个引用。改变一个组件中的data，会导致其他组件data中的数据被污染。而如果使用函数的话，每个组件中的data就会有单独的引用，就不会存在变量污染的问题了

29。小程序的页面的生命周期

onload

onready

onshow

onhide

onunload

30. 小程序的分享页面

onshareAppMessage 开启分享按钮

avatar
文章
阅读
粉丝