2024-09 面试总结/复盘 (一)

禅yi下
7 阅读5分钟

第一家，一个初创型公司，目前看起来只有10个人不到。

面试官是技术负责人，问了以下几个问题，在此复盘总结一下,

技术栈vue3，uniapp，要求能够从零到一搭建项目

1.说说一个弹窗表单，关闭后再打开，会自动检验表单，未填写的项会出现校验提示（红框和底部提示文案），是什么原因，你是怎么解决的？

回答：在关闭之前调用resetFields方法即可

ps:这个问题在听面试官提问的时候，可能没有听清是怎么触发校验，可能是点了了一下保存，表单触发校验，然后关闭弹窗再打开，检验还在。

2.通常在什么情况下会进行组件封装？

回答：一般在一个功能或者一段代码，在两个以上的页面中出现，我就会将他封装成组件，

3.vue3生命周期

回答：

  1. setup(): 这不是生命周期钩子，但它是组合式 API（新的 Reactivity/Composition 系统）的入口点。在这里面，你可以定义响应式数据、生命周期函数、方法等。

  2. onBeforeMount: 组件挂载之前调用。

  3. onMounted: 组件挂载之后调用。

  4. onBeforeUpdate: 组件更新之前调用。

  5. onUpdated: 组件更新之后调用。

  6. onBeforeUnmount: 组件卸载之前调用。

  7. onUnmounted: 组件卸载之后调用。

4.vue3中的reactive和ref有什么区别

回答：1.ref是定义基本类型 和单一的对象 2.reactive 定义复杂的类型；在使用方式上，ref需要使用.value获取；如果重新将reactive赋值成新对象，那么它会失去响应式 如下

const state = reactive({ name: '' }); 
state = { name: '张三' }；

vue文档介绍

1. 数据类型不同：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。

 2. 使用方式不同：ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用，而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。

 3. 访问方式不同：对于通过ref函数创建的响应式数据，我们可以通过.value属性来访问其实际值；而对于通过reactive函数创建的响应式对象，我们可以直接访问其属性或调用其方法。

 4. 设计理念不同：ref主要是为了解决单一元素/数据的响应式问题，而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题。

4.浏览器标签栏图标动态变化 favicon.ico

回答：通过document.querySelector('link[rel="shortcut icon"]').href 修改

ps: 面试没回答上来

5.vite和webpack有什么区别，做过哪些性能优化

回答：

1.首先vite运行时比webpack快，这得益于浏览器支持ES Module，vite在运行时不会打包依赖，只有在需要时才会编译对应的模块。Webpack则需要先打包代码，转换为浏览器可识别的模块格式，无法实现按需加载。

2.Vite使用更简单的json配置文件，只包含必要的启动信息。Webpack复杂的JavaScript配置文件，需要配置loader、plugin等组件。因此Webpack对新手不够友好；而Vite在设计上更注重开箱即用，大部分场景下用户无需自己写配置文件，鼓励0配置。

性能优化

1.生产环境调优主要是通过利用缓存、减少代码体积、分包等方式提升页面响应速度。对于spa单页的话通常需要通过优化减少首屏渲染时间。

 2.开发环境调优的目的是提升webpack构建速度。如开启热更新和热模块（HMR）替换、缩小代码编译范围、多线程打包等

6.uniapp接收参数方式

回答：一般情况下在onload的生命周期的回调函数里就能获取得到options，也可以通过this.$route.query获取

7.说说看uniapp，全局生命周期，页面生命周期和组件生命周期

回答：全局主要是App.vue中，包含以下生命周期

onLaunch: 当uni-app初始化完成时触发（全局只触发一次）。
onShow: 当uni-app启动，或从后台进入前台显示时触发。
onHide: 当uni-app从前台进入后台时触发。
onError: 当uni-app遇到错误时触发。

页面生命周期

onInit:页面初始化（百度小程序）
onLoad: 页面加载 （只触发一次）
onShow: 页面显示 （每次进入页面都会触发）
然后会进行组件的生命周期
    beforeCreated
    created
    如果是vue3
    就是setup
    beforeMouned
    mounted
onReady: 页面此时初次渲染完成
如果数据发生变化
    组件    
    beforeUpdated
    updated
onHiden: 页面隐藏 
onBackPress: 点击返回
oonUnload: 页面关闭
    组件
    beforeUnmouned
    unmounted

8.有没有使用过动画库或者插件

回答：我直接回答没有用过。。。

1.使用transition元素包裹动态组件或条件性的元素块，并通过特定css类来实现效果

<transition name="fade">
  <div v-if="show">Hello World</div>
</transition>

/* 定义进入和退出的动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */ {
  opacity: 0;
}

2.使用动画库

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
 
<div id="example-2">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
    @after-enter="resetAnim"
    @after-leave="resetAnim"
  >
    <div v-if="show" class="animate__animated">
      Hello World!
    </div>
  </transition>
</div>

9.vue中的动态组件有用过吗

回答：其实就是 用is的值来判断当前要使用的组件

其他的就不记录了....

avatar
文章
阅读
粉丝