第一次面试，总结一下吧😀

前言

第一次面试，还是挺紧张，准备面试这几天一直在看面经，总体面完之后，感觉还行。

自我介绍

如果有面试不会自我介绍的大家也可以看看，感觉挺有用的， 面试自我介绍5句话公式马上进入三月份，各个大厂的春招也陆续开了，正是大家所谓的"金三银四"的时期。 想进入大厂必不可少的 - 掘金 ，总之讲自己会的，面试前可以把稿子写下来，内容不吹嘘，该怎么怎么样，真情流露一点，不要念稿子一样，就可以啦。

面试题

1. vue3中常用的API

回答这个的时候，有点太紧张了，而且最近也一直在看react相关的，一开始没听懂在问什么，后面陆陆续续说了一些。

• setup函数：这是Composition API的入口点，所有的响应式逻辑都可以在这个函数内部定义。
• ref和reactive ：用于创建响应式数据。ref通常用于基本类型的数据，而reactive适用于复杂类型（如对象或数组）。
• computed：用来声明计算属性，基于响应式依赖进行缓存，只有当依赖发生变化时才会重新计算。
• watch和watchEffect ：这两个函数用于监听响应式数据的变化并执行相应的回调函数。watch允许你明确指定监听的目标，而watchEffect则会自动追踪其内部使用的响应式数据。

2. ref和reactive的区别

回答：ref是用于简单数据类型，reactive用于复杂的，都可以让数据变成响应式

改进：

数据类型适用性：

• ref：适用于任何类型的响应式数据，但常用于基本类型（如字符串、数字等）。对于复杂类型（如对象或数组），也可以使用ref，但通常推荐使用reactive。
• reactive：专为复杂类型设计，如对象或数组。它通过Proxy实现深层的响应式转换，使得对象内的所有嵌套属性也都是响应式的。

访问方式：

• ref：返回的是一个包含.value属性的对象，需要通过.value来访问或修改其值。在模板中，Vue会自动解包ref，因此不需要手动添加.value。
• reactive：直接操作对象及其属性，无需使用.value。例如，可以直接通过state.count来访问或修改属性。

3.compute和watch有什么区别

目的：

• computed：用于根据其他数据动态计算并返回一个值，适合派生状态。它具有缓存功能，只有依赖的数据变化时才会重新计算。
• watch：用于监听数据变化并在变化时执行副作用操作（如网络请求、更新DOM等），不缓存结果。

触发机制：

• computed：依赖的数据不变时，不会重新计算，直接返回缓存结果。
• watch：监听的数据每次发生变化都会触发回调函数。

使用场景：

• computed：适合需要基于已有状态进行简单转换或组合的场景。
• watch：适合需要响应数据变化并执行复杂逻辑或副作用的场景。

4.打包类工具的使用

因为我的项目也没打包，这个不怎么好回答，我只知道一个npm run build,打包静态文件在dist文件夹中。

5.vue 中v-if v-show 之间的区别，从组件的角度使用v-if有什么效果

工作原理：

• v-if：这是一个条件渲染指令。当条件为假时，Vue会完全移除该元素或组件及其相关的DOM节点，不会保留在DOM中；当条件为真时，才会创建并插入DOM。
• v-show ：这是一个切换显示指令。无论条件真假，元素总是存在于DOM中，只是通过CSS的display属性来控制其是否可见。

性能影响：

• v-if ：由于它涉及DOM节点的创建和销毁，因此在频繁切换显示状态的情况下性能开销较大。但是，如果条件很少变化，使用v-if更为高效，因为它避免了不必要的渲染。
• v-show：虽然初始渲染时需要处理整个DOM结构，但在后续切换显示状态时只需修改CSS，因此更适合于频繁切换显示状态的场景。

初始渲染成本

• v-if：仅当条件为真时才会进行渲染，因此初始渲染成本较低。
• v-show：无论条件如何，都会进行完整的渲染，因此初始渲染成本较高。

从组件角度使用v-if有什么效果？

生命周期钩子：

• 当条件变为 false 时，Vue 会销毁该组件，并触发其生命周期钩子 beforeDestroy 和 destroyed。
• 当条件再次变为 true 时，Vue 会重新创建该组件，并依次触发 beforeCreate、created、beforeMount 和 mounted 生命周期钩子。

6.组件从生命周期的角度

创建阶段 (Creation Phase)

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created：在实例创建完成后被调用。此时已完成数据观测、属性和方法的运算，但尚未挂载到 DOM 上。

挂载阶段 (Mounting Phase)

• beforeMount ：在挂载开始之前被调用。相关的 render 函数首次被调用。
• mounted：在实例挂载到 DOM 后被调用。此时可以访问 DOM 元素，并且可以进行依赖于 DOM 的操作。

更新阶段 (Updating Phase)

• beforeUpdate：在数据更新时，虚拟 DOM 重新渲染和打补丁之前被调用。你可以在这个钩子中进一步修改状态，不会触发额外的重渲染过程。
• updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后被调用。此时 DOM 已经更新，可以执行依赖于最新 DOM 的操作。

销毁阶段 (Destruction Phase)

• beforeDestroy （在 Vue 3 中已更名为 onBeforeUnmount）：在实例销毁之前被调用。此时实例仍然完全可用。
• destroyed （在 Vue 3 中已更名为 onUnmounted）：在实例销毁后被调用。此时所有指令都被解绑，所有的事件监听器被移除，所有的子组件也被销毁。

7.如何使用flex实现垂直居中，水平居中

他问这个的时候，我是知道还有其他别的方法的，遇到自己会的就勇敢表达 实现垂直和水平居中的基本方法

• flex
  • 使用 display: flex 将父容器设置为 Flex 容器。
  • 使用 justify-content: center 水平居中对齐子元素。
  • 使用 align-items: center 垂直居中对齐子元素。
• grid
  • display: grid：将容器设置为 Grid 容器。
  • place-items: center：这是一个简写属性，等同于同时设置 justify-items: center 和 align-items: center，用于同时水平和垂直居中子元素。
  • height: 100vh：将容器的高度设置为视口高度，确保有足够的空间进行垂直居中。
• 用绝对定位和 transform 实现垂直和水平居中
  • position: relative：设置父容器为相对定位，以便子元素可以相对于它进行绝对定位。
  • position: absolute：设置子元素为绝对定位，使其相对于最近的已定位祖先元素（这里是 .container）进行定位。
  • top: 50% 和 left: 50%：将子元素的左上角移动到父容器的中心位置。
  • transform: translate(-50%, -50%)：通过平移子元素自身宽度和高度的一半，将其精确地居中。

8.组件传输的一些方法：

父组件向子组件传递数据（Props）

• 使用 Props：父组件通过属性（props）将数据传递给子组件。 子组件向父组件传递数据（Events）
• 使用 $emit ：子组件通过 $emit 触发自定义事件，将数据传递给父组件。
• Vuex | pinia（状态管理库） Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

9.JS有哪些数据类型：

刚好也是复习过了，轻松回答。 不了解可以看看： oi 哥们 来解锁JavaScript数据类型与内存奥秘：2024年最新指南前言： 在这个数字化飞速发展的时代，前端开发 - 掘金

10.JS数组常用的方法有哪些

• 添加/删除元素 ：push(), pop(), unshift(), shift(), splice()
• 查找元素 ：indexOf(), lastIndexOf(), find(), findIndex(), includes()
• 遍历和映射 ：forEach(), map(), filter(), reduce()
• 排序 ：sort()
• 其他操作 ：slice(), concat(), join(), reverse()

11.聊聊 ts 的用法

我扯了扯自己的项目中写到了ts，用于约束传入数据的类型，还可以通过？决定一下约束或不约束该数据，然后讲了讲ts在实际开发中可维护性强。

• 类型注解：确保变量、函数参数和返回值的类型安全。
• 接口和类：定义对象结构和行为，支持面向对象编程。
• 泛型：编写灵活且类型安全的函数和类。
• 联合类型和交叉类型：组合不同类型，满足复杂需求。
• 枚举和类型别名：简化常量定义和类型管理。
• 模块：组织代码，避免全局命名空间污染。

12.Vue中你知道哪里用到了树型结构吗

刚好我前天看了一下虚拟DOM的概念，就讲了一下。

• 组件树：应用中的组件按照父子关系组织成树形结构。
• 虚拟 DOM 树：Vue 使用虚拟 DOM 来优化 DOM 操作，形成一个轻量级的对象树。
• 事件传播机制：事件通过组件树从子组件向上传播到父组件或反之。
• 插槽（Slots） ：通过插槽机制，可以在组件间传递内容，形成嵌套的树形结构。
• 递归组件：递归组件用于展示具有层次结构的数据，如树形菜单或嵌套列表。

13.react里常用的hooks ? use state怎么用 ?use effect怎么用?

usesate、usememo、useeffect、

• useState 是最基础的 Hook，用于在函数组件中添加状态。
• useEffect 用于执行副作用操作（如数据获取、订阅、手动 DOM 操作等），并支持清理副作用。
• useMemo 用于缓存计算结果，防止不必要的重复计算。它接受一个计算函数和依赖项数组，并在依赖项变化时返回新的计算结果。

14.业务里面假如有个按钮，考虑什么?怎么设计?

这个我可能回答的不太好。

• 功能性需求：明确按钮的作用，处理各种状态（如加载、禁用等）。
• 用户体验（UX） ：确保按钮易于使用、可访问，并且在不同设备上表现良好。
• 视觉设计：通过颜色、大小、图标等方式提升按钮的可识别性和美观度。
• 交互设计：提供悬停、点击等反馈，增强用户的交互体验。
• 性能优化：优化事件处理，防止不必要的操作。
• 安全性：防止重复提交和其他安全问题。

反问：

公司的业务内容

什么时候有面试结果

总结：

对于这次面试表现还是挺满意的，虽然还不知道结果，但至少把会讲的都讲了，一次又一次加强自己的表达吧，最后祝大家面试顺利，