一些个面试题

许多金
185 阅读5分钟

新项目为什么选 Vue3

  • 性能方面：
    编译阶段：diff 算法优化，vue3 在 diff 算法中相比 vue2 增加了静态标记。已经标记静态节点的虚拟 DOM 在 diff 过程中不会比较，提高了性能；静态提升：vue3 中对不参与更新的元素，做了静态提升，只会被创建一次，在渲染时直接复用。
    源码体积：tree shaking，打包体积变小。
  • 组合 API：可以在 Vue3 中使用组合 API 编写更具可读性和更易于维护的代码。它还有助于重用和共享代码。
  • 更好的 TypeScript 集成：Vue3 支持 TypeScript，这使得代码更易于维护和阅读。
  • fragment: 在 vue2 中，一个组件只能有一个根节点，在 vue3 中，去掉了只有一个根节点的限制。
  • 响应式系统：vue2 采用 Object.defineProperty 来劫持整个对象，然后深度遍历所有属性，给每个属性添加 getter 和 setter，实现响应式。vue3 采用 proxy 重写了响应式系统，不需要深度遍历。

vue2 的问题：

1.对于对象，无法检测 property 的添加或者移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转为响应式的。需要使用 this.$set(this.someObject, 'b', 2)

  1. 对于数组，利用索引修改数组或者修改数组的长度不是响应式的。
vm.items[1] = 'x'   // 利用索引修改数组
vm.items.length = 2   // 修改数组长度都不是响应式的

需要使用：

Vue.set(vm.items, indexOfItem, newValue)   // 修改数组内容
vm.items.splice(newLength)      //  splice 修改数组长度

vue3没有这个问题：

const arr = ref<number[]>([])
  const arrReactive = reactive<{list: number[]}>({
    list: []
  })
  setTimeout(()=>{
    arr.value[0] = 1
    arrReactive.list[0] = 1
  }, 0)

  setTimeout(()=>{
    arr.value.length = 0
    arrReactive.list.length = 0
  }, 1000)

深入响应式原理 — Vue.js
Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？ | web前端面试 - 面试官系列

Vue2 升级 vue3

生命周期：Vue2 的 destroyed 和 beforeDestroy 钩子在 Vue3 中已经被废弃，需要改用 onUnmounted 和 onBeforeUnmount。

被移除的 API：

  • 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。
  • $on，$off 和 $once 实例方法已被移除。事件总线模式可以被替换为使用外部的、实现了事件触发器接口的库，例如 mitt 或 tiny-emitter。

v-model 变化：

  • vue2 中 v-model 用来表示组件双向数据绑定。prop默认表示：value；事件默认为 input 事件。
  • vue3 中，v-model 也表示组件的双向数据绑定。prop 默认表示：modelValue，事件默认为 update:modelValue 事件。

全局 API 变化： vue2 中全局 API 在 Vue 上，如 Vue.config、Vue.component、Vue.use 等。vue3 中引入 createApp 返回一个 Vue 实例 app，对应实例 API，app.config、app.component、app.use 等。

v-if 与 v-for 优先级变化：vue2 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。vue3 版本中 v-if 总是优先于 v-for 生效。

组件库升级： 组件库需要升级到 vue3 版本。

非兼容性改变 | Vue 3 迁移指南

遇到哪些兼容性问题

safari 日期格式

低版本 safari 日期格式只支持 2021/09/09，使用 new Date() 传入短横线的日期格式会报错。

div 的 contenteditable

通过设置 div 的 contenteditable 属性让 div 具有输入功能，成为一个简单的编辑器。在企业微信端，chrome53 版本，div 的 input 事件不会返回 event.data 不会返回当前输入的值，需要通过 keydown 事件中记录。
可以编辑的 DIV - 掘金

iphon X 适配

image.png iPhone X 需要适配的地方有两个一个是顶部的齐刘海，还有一个是底部的黑色的线。对于顶部齐刘海浏览器已经为我们做了适配。对于底部的黑色的线要做的适配通常需要两步：

第一步：设置 viewport-fit=cover, 使得网页内容占据整个手机屏幕可视区域，效果如下：

image.png

<meta name='viewport' content="width=device-width, viewport-fit=cover" />

第二步：通过设置 padding 使得网页内容在黑色线条之上正常显示：

image.png

body { 
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top); 
  padding-top: env(safe-area-inset-top); 
  /* 适配底部黑条*/ 
  padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom); 
}

移动端的一些技能 - 掘金
（建议收藏）前端开发中常见的浏览器兼容性问题及解决方案大汇总 - 掘金

做过哪些性能优化

  • 小图片通过 url-loader 转为 base64 编码
  • bundle 加 hash 命中缓存（contentHash）
  • 使用 CND 加速
  • gzip 压缩 （CompressionWebpackPlugin）
  • tree shaking

为什么面试官这么爱问性能优化？ - 掘金

职业规划

1、技术深度发展路线：

  • 前端初级工程师：在这个阶段，主要是熟悉并学习掌握一门或几门前端主要技术，如HTML、CSS和JavaScript，以及学习和了解前端的相关知识，如浏览器的基本工作原理、HTTP协议等。
  • 前端中级工程师：在这个阶段，需要熟练掌握前面所提到的技术，并且开始接触和学习一些前端的框架，如React、Vue、Angular等，并且开始尝试独立完成一些如页面制作、交互设计等较为复杂的工作。
  • 前端高级工程师/专家：在这个阶段，需要有深厚的技术积累，这包括对前端技术的深入理解和熟练应用，以及对某个前端框架或者技术的深入专研，同时也要有一定的架构设计能力，能够对大型前端项目进行架构设计和技术选型。

2、技术管理发展路线：

  • 前端团队Leader： 在这个阶段，除了要有一定的技术积累外，也需要具备一定的团队管理和项目管理能力，需要能够带领团队完成项目的开发工作，并且需要能够进行一定的技术指导。
  • 技术经理/主管：需要有较强的团队管理和项目管理能力，同时也需具备一定的技术视野和技术判断能力，需要能够对项目的技术实现进行把控，同时也要能够对团队的技术能力进行提升。

3、技术宽度发展路线： 前端全栈工程师：在精通前端技术的同时，也需要学习并熟悉一些后端的技术，如Node.js，Python，Java等，以及数据库相关的知识，进而能够进行从前端到后端的全栈开发工作。

avatar
文章
阅读
粉丝