前端高频面试题 更新中

笑歪了狗头
240 阅读9分钟

1. vue最大的优势是什么

  1. 渐进式框架,按需引入
  2. 双向数据绑定,用数据驱动视图
  3. 组件式开发
  4. 入门教程很多, 容易上手

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

  • 相同点, 都可以显示隐藏元素
  • 不同点, 原理不同, v-show是通过display属性控制显示隐藏,而v-if是直接删除和创建DOM元素
  • v-if还可以配合v-else v-else-if 做多分支判断
  • 频繁操作DOM会影响性能,所以需要频繁显示隐藏的时候 用v-show

3. 计算属性和函数的区别

  • 计算属性会把第一次的结果存储到缓存中,只要涉及到的数据没有变化,多次使用只会在缓存中取
  • 而函数每次使用都会重新执行一遍
  • 所以计算属性的执行效率比函数高

4. key有什么用

  • 可以提高性能,主要用在vue的虚拟DOM算法,更好的更新虚拟DOM
  • 使用key会基于key的变化重新排列元素顺序
  • 不使用key会尽可能的尝试就地复用相同类型元素

5. scoped作用

  • 让组件内的style样式只对当前组件生效
  • 原理是: 给组件内的标签加上自定义属性, data-v-hash值, 用属性选择器找标签

6. 什么是组件 有什么用

  • 将重复使用的结构样式行为 封装成一个vue实例
  • 作用:组件可以重复调用,方便开发和维护,每个组价都是各自独立的 互不影响

7. 父子组件如何通信

父向子:

  • 通过属性绑定的方式传递数据, 子组件用props接收,接收后当做变量使用
  • provide
  • ref属性获取组件的实例，通过实例直接更新子组件的变量或调用方法来更新值
  • 全局状态管理

子向父:

  • 通过this.$emit(自定义父组件事件,传的值),然后在父组件中 子组件的标签上使用这个事件,接收子组件向组件传递的值
  • inject
  • 作用域插槽 slot标签
  • 全局状态管理
  • attrs可以接收props没有接收的 父组件属性绑定的值

8. 组件的生命周期

  • 分为4个阶段 8个函数
  1. 初始化阶段: beforeCreate created , beforeCreate很少用, created 可以获取data里面的变量 和 methods里面的函数
  2. 挂载阶段: befroreMount mounted , 在它们中间会做一件事 创建虚拟DOM替换成真实的DOM, 所以在mounted函数中可以获取到真实DOM的信息
  3. 更新阶段: beforeUpdate updated, 在数据发生改变时触发, DOM更新是异步的, 先更新虚拟DOM,再更新真实DOM
  4. 销毁阶段: beforeDestroy destroyed, destroyed是组件的最后一个阶段, 可以用来清除定时器

9. 作用域插槽

  • 简单的说就是子组件向父组件传值,具体方式↓
  1. 子组件slot标签通过属性绑定的方式将子组件的数据传到父组件,
  2. 父组件创建template标签, 用v-slot设置个自定义变量,变量点子组件的slot自定义属性,就可以获取到子组件传递给父组件的值

10. vuex的5个核心模块

  1. state: 定义存储状态数据
  2. mutation: 更新状态数据的同步函数
  3. action: 执行异步的操作, 如果要更新状态数据,不能直接更新, 需要通过mutation里的函数更新
  4. getter: 计算属性
  5. module: 模块化,让不同模块能够使用独属于自己的状态数据

11. 父子组件生命周期执行顺序

规律: 父组件开头,子组件执行完,最后父组件收尾

  • 挂载阶段:父beforeCreate -> 父Created -> 父beforeMount -> 子beforeCreate -> 子created -> beforeMount -> 子mounted -> 父mounted
  • 更新阶段:父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
  • 销毁阶段:父beforeDestroy -> 子beforeDestroy - 子destroyed -> 父destroyed

12. hash路由和history路由有什么区别, 以及原理

  1. 表现形式不同: hash路由会让地址栏显示一个#
  2. 特点: history需要后端配合做映射
  • 原理: hash路由是通过监听 hashChange 事件来实现的, history路由是通过 pushState方法 和 监听 popstate事件实现的

13. 说说你对BFC的理解

  • 叫块级格式化上下文
  • 是一个独立的布局环境, 内部元素的布局不会影响到外部, 同时也不会被外部影响

14. js延迟加载的方式

  1. 给js文件添加async属性
  2. js文件放到文档的底部
  3. 文档加载完成后 动态添加script标签 引入js脚本

15. 如何减少重绘和回流

  1. 减少DOM操作
  2. 元素脱离文档流
  3. 避免对css进行单个修改

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

  1. 路由懒加载
  2. 图片懒加载
  3. 组件缓存
  4. 大体积文件用CDN服务
  5. v-for和v-if避免一起使用
  6. 大数据长列表滚动加载

17. v-model和.sync的区别

  • v-model 是通过绑定value属性来获取数据, 通过绑定input事件来修改数据
  • .sync 是通过绑定 自定义属性.sync 来获取数据 , 通过绑定update:自定义属性来 修改数据

18. vue2中如何自定义指令

  • 在main.js中，通过Vue.directive进行全局注册
  • 在Vue实例的选项对象中 使用directives选项进行局部注册

19. http1和http2的区别

  1. 多路复用： http1同时只能发送一个请求，请求一个发送一个TCP请求， http2可以同时处理多个请求，单一长链接，只创建一个TCP链接，同时发送多个请求和响应，不需要按顺序， 避免阻塞
  2. 二级制传输： http1明文传输，http2将传输的信息分割成一个个二进制帧
  3. 报头压缩： http2客户端和服务器维护同一张表，传输报头索引即可
  4. 服务端主动推送： http2主动推送该请求后续可能用到的资源

20. 什么是虚拟DOM

本质上是一个js对象，用来模拟真实的DOM结构， 因为它不是真实的DOM，所以称之为虚拟DOM

21. ES6有什么新特性

  1. let const
  2. 解构赋值
  3. 展开运算符
  4. 箭头函数
  5. 模板字符串
  6. 新增bind /baɪnd/ 方法
  7. Object.keys() Object.values()
  8. 可选链 ?.
  9. promise对象 async await
  10. Set集合 Map字典
  11. Proxy

22. 检测数据类型有哪些方式

  1. typeof 只能检测基本数据类型
  2. instanceof 检测右边的构造函数是否在左边实例对象的原型链当中，返回bool值
  3. Object.prototype.tostring.call() 是最好用的，任何类型都能检测，返回固定格式的类型字符串

23. 开发项目优化了哪些东西

前端的优化：

  1. 路由懒加载，优化了首屏加载速度
  2. 大体积图片用CDN服务，把文件都上传到腾讯云对象存储，公司服务器只存储文件地址
  3. 给高频率使用且变化不大的组件设置keep-alive，配合路由可以缓存指定的页面

后端的优化：大量数据批量导入的效率！

  1. 接手公司一个老项目，数据表中已经有100万条数据，页面功能需要用excel批量导入5万条， 并且还要检测去重。
  2. 在没有做任何优化的情况下 需要近3小时， 尝试给where条件后面的字段建立索引后，效率大增， 只需要不到10分钟。
  3. 过了段时间对这个速度还是不满意，又找到SqlBulkCopy工具类，利用它先将数据放到内存中， 然后链接数据库映射好对应字段，一次性导入进去，效率提高一大截，只需要5秒左右。
  4. 但是这个写法没有检测去重，然后又查资料找到sql server 的merge方法，合并两个表并去重， 先创建个临时表存储导入的数据，再用merge合并两个表，最后删临时表， 此时性能优化到了最佳，并兼顾了去重。

24. 开发中遇到的哪些难点

一个录入表单页面，动态新增多个组件。 勾选框+输入框+图片上传 三个组件在一起， 点下按钮新增同样的三个组件。 想了很久才想到要用对象数组来做，用这个数据遍历生成组件。 这三个组件一起视为一个对象， 每个组件对应对象里的属性值， 只需要新增一个对象就能做到新增同样的三个组件

25. 对uni-app了解吗

  • 了解一些，它可以一次开发，多个平台发布
  • 大概原理是uni-app有相当于loader的效果，将uni-app代码转化成对应平台的代码

26. vue2的响应式原理

  • 使用Object.defineProperty() 它有两个钩子函数 get和set 通过get监听读取数据，通过set监听修改数据

27. vue3有哪些优点

  1. 性能更高：双向绑定的原理改成了proxy; 虚拟DOM的算法得到优化
  2. 体积更小：删除了不常用的Api，比如过滤器、.native、EventBus; 代码支持按需引入
  3. 对TS支持更好：因为源码使用TS重写的
  4. Composition Api: 组合Api 能够更好的封装复用代码，有利于大型项目开发维护
  5. 新特性：虚拟根节点Fragment、传送Teleport、

28.有哪些数组Api会更改原数组的值

push / pop / shift / unshift / reverse / sort / splice

29. vue3的v-model原理

  • 通过:modelValue获取数据，通过@update:modelValue更新数据
  • 结和vue2 v-model和.sync特点，可以同时写多个v-model，通过:属性名来区分 。 v-model:userName

30. Interface和type的区别（TS语法）

相同点：

  • 都可以类型注解和继承

不同点：

  1. Interface只能针对对象和函数，type可以针对任何类型
  2. Interface相同属性继承后覆盖 ，type相同属性继承会报错
  3. Interface用得最多的是描述对象，type一般用于描述类型之间的关系， 比如联合类型

31. 函数重载

  • 由函数签名和函数定义组成
  • 函数签名 有对参数和返回值的类型注解， 没有函数体
  • 函数实现 参数和返回值包含函数签名的， 有函数体
avatar
文章
阅读
粉丝