# 2025-02 面试题

## 宁波面试

### 常用的CSS单位

> em、rem、px、%、vh、vw、vmin、vmax

## 无锡面试

### vue2和vue3区别

> **Vue 2**：
>
> + Vue 2 主要使用 Options API（选项式 API），通过定义 `data`、`methods`、`computed`、`watch` 等来构建组件。
> + vue2组件必须有一个根节点
>
> **Vue 3**：
>
> + Vue 3 引入了 Composition API，允许开发者通过 `setup()` 函数来组织和管理逻辑。Composition API 提供了更好的代码重用性和可维护性，尤其是在大型应用中。
> + vue3支持Fragment
> + Vue 3 在 Composition API 中引入了 `onMounted`、`onUpdated`、`onBeforeUnmount` 
> + **Vue 3**：Vue 3 引入了 `Suspense` 组件，提供更好的异步组件处理机制。此外，`Teleport` 组件可以让子组件的 DOM 渲染到另一个 DOM 节点，而不是父组件的 DOM 树中，这对于像模态框这样的场景非常有用。

### vue中生命周期

| 生命周期钩子 | Vue 2           | Vue 3 (Options API) | Vue 3 (Composition API) |
| ------------ | --------------- | ------------------- | ----------------------- |
| 实例创建前   | `beforeCreate`  | `beforeCreate`      | `beforeCreate`          |
| 实例创建后   | `created`       | `created`           | `created`               |
| 挂载前       | `beforeMount`   | `beforeMount`       | `onBeforeMount`         |
| 挂载后       | `mounted`       | `mounted`           | `onMounted`             |
| 更新前       | `beforeUpdate`  | `beforeUpdate`      | `onBeforeUpdate`        |
| 更新后       | `updated`       | `updated`           | `onUpdated`             |
| 销毁前       | `beforeDestroy` | `beforeUnmount`     | `onBeforeUnmount`       |
| 销毁后       | `destroyed`     | `unmounted`         | `onUnmounted`           |
| 激活时       | —               | —                   | `onActivated`           |
| 停用时       | —               | —                   | `onDeactivated`         |

### ref和reactive区别

> `ref` 用来创建一个单一的响应式数据，通常用于基本类型（如 `string`、`number`、`boolean`）或需要变动的引用类型（例如 `DOM` 元素或组件实例）。修改 `ref` 的值时需要使用 `.value`。
>
> `reactive` 用来创建一个深度响应式对象。它会将对象的所有属性变为响应式，适合用于处理复杂的数据结构（如对象、数组等）。不需要 `.value` 来访问和修改数据。

> `ref` 是用于处理基本数据类型或需要封装为引用类型的响应式数据。
>
> `reactive` 是用于处理复杂对象、数组等，并且它会递归地将对象中的每个属性变成响应式。

## 苏州面试

### Vue2 和 Vue3 区别

- **响应式原理**：Vue2 使用 `Object.defineProperty` 劫持对象属性，Vue3 改用 `Proxy` 代理对象，支持监听动态新增/删除属性及数组索引变化。
- **组合式 API**：Vue3 引入 `setup` 函数和组合式 API（如 `ref`、`reactive`），替代 Vue2 的选项式 API。
- **性能优化**：Vue3 支持 Tree-shaking，减少打包体积；虚拟 DOM 优化（静态节点提升、补丁标记）。
- **生命周期**：Vue3 将 `beforeCreate` 和 `created` 合并到 `setup` 中，其他钩子名前加 `on`（如 `onMounted`）。
- **TypeScript 支持**：Vue3 源码用 TypeScript 重写，提供更好的类型推断。

---

###  Vue3 双向数据绑定的实现
- **原理**：通过 `v-model` 语法糖实现，底层基于响应式系统（`Proxy`）和事件监听。
- **示例**：`<input v-model="value">` 等价于：
  ```html
  <input :value="value" @input="value = $event.target.value">
  ```
- **Proxy 的作用**：拦截对象的读写操作，在 `get` 中收集依赖，在 `set` 中触发更新。

---

### 响应式数据的实现
- **Vue3**：使用 `Proxy` 代理对象，支持深层次监听，无需递归遍历初始化。
  ```javascript
  const proxy = new Proxy(obj, {
    get(target, key) { /* 收集依赖 */ },
    set(target, key, value) { /* 触发更新 */ }
  });
  ```
- **Vue2**：通过 `Object.defineProperty` 劫持对象属性，需递归初始化，无法监听新增/删除属性。

### Vue Proxy 底层实现
- **Proxy 代理**：对数据对象包装，拦截 `get`、`set`、`deleteProperty` 等操作。
- **依赖收集**：在 `get` 中通过 `track` 收集当前依赖（副作用函数）。
- **触发更新**：在 `set` 中通过 `trigger` 通知依赖更新，触发组件重新渲染。

---

### Vue 生命周期钩子
- **Vue2**：`beforeCreate`, `created`, `beforeMount`, `mounted`, `beforeUpdate`, `updated`, `beforeDestroy`, `destroyed`。
- **Vue3**：`setup` 替代 `beforeCreate` 和 `created`；其他钩子加 `on` 前缀（如 `onMounted`）。

---

### Pinia 响应式与持久化

- **响应式**：基于 Vue3 的 `reactive` 和 `ref` 管理状态，自动跟踪变化。
- **刷新数据保留**：默认不持久化，需配合插件（如 `vuex-persistedstate`）或手动使用 `localStorage`。

---

### Vue Diff 算法
- **双端对比**：新旧子节点数组的头尾指针同时比对，减少移动次数。
- **Key 的作用**：通过唯一 `key` 识别节点，复用相同元素。
- **优化策略**：
  - 同类型节点比较属性变化。
  - 静态节点跳过比对。
  - 最长递增子序列优化移动逻辑。

