vue3面试题进阶版

news2025/2/21 17:04:30

覆盖 Vue3 的核心知识点、高频考点及实战场景

一、基础与核心概念

MVVM 与 MVC 的区别
- MVC：Model（数据）、View（视图）、Controller（控制器），视图更新需手动操作 DOM。
- MVVM：通过 ViewModel 实现双向绑定（数据变化自动更新视图），如 Vue 的响应式系统。
Vue3 的 SFC（单文件组件）优势
- 将模板、逻辑、样式集中在一个文件，支持模块化开发，预编译模板减少运行时开销。
Vue3 为何弃用 Object.defineProperty？
- Proxy 可直接监听对象和数组的动态增删，无需手动调用 $set，性能更高。
- Object.defineProperty 需递归遍历对象且无法监听新增属性。
Vue3 的 Tree-shaking 原理
- 仅打包代码中实际使用的功能，未使用的 API（如未用到的指令）不会包含在最终代码中。

二、响应式与 API

手写简易响应式函数（Proxy 实现）

function reactive(obj) {  
  return new Proxy(obj, {  
    get(target, key) {  
      track(target, key); // 模拟依赖收集  
      return Reflect.get(target, key);  
    },  
    set(target, key, value) {  
      trigger(target, key); // 模拟触发更新  
      return Reflect.set(target, key, value);  
    }  
  });  
}

watch 与 watchEffect 的底层区别
- watch：需显式指定监听源，支持配置延迟执行和旧值捕获。
- watchEffect：自动追踪依赖，立即执行一次，适合副作用逻辑（如日志记录）。

ref 解构响应性丢失问题

使用 toRefs 解构 reactive 对象，保持响应性：

const state = reactive({ a: 1 });  
const { a } = toRefs(state); // 解构后仍为响应式

三、性能优化与编译原理

Vue3 的编译优化策略
- 静态提升（Hoist Static）：将静态节点（如纯文本）提取到渲染函数外，避免重复创建。
- Patch Flags：标记动态节点类型（如文本、Props），Diff 时跳过静态内容。
- 事件缓存：缓存事件处理函数（如 @click），避免每次渲染重新生成。
v-memo 的使用场景
- 缓存组件渲染结果，仅在依赖项变化时重新渲染，适合长列表优化：
```
<div v-for="item in list" :key="item.id" v-memo="[item.id]">  
  {{ item.name }}  
</div>  
```

四、组件与生态实战

Vue3 与 Web Components 集成

使用 defineCustomElement 将 Vue 组件转化为自定义元素：

import { defineCustomElement } from 'vue';  
const MyElement = defineCustomElement({ /* 组件选项 */ });  
customElements.define('my-element', MyElement);

Pinia 核心优势
- 无 mutations，直接通过 actions 修改状态，代码更简洁。
- 支持 Composition API，TypeScript 类型推导更友好。
Vite 与 Webpack 的区别
- Vite：基于浏览器原生 ESM，开发环境无需打包，启动速度极快。
- Webpack：适合复杂项目，但构建速度和热更新较慢。

五、项目经验与设计模式

封装可复用的表单校验组件
- 实现步骤：
  1. 通过 props 接收校验规则（如必填、邮箱格式）。
  2. 使用 v-model 绑定表单数据。
  3. 暴露 validate() 方法返回校验结果。
  4. 通过插槽支持自定义 UI 布局。
SSR（服务端渲染）优化策略
- 使用 Nuxt3 实现服务端渲染，结合 useAsyncData 预取数据。
- 避免在 setup 中直接访问浏览器 API（如 window），应在 onMounted 中调用。
前端安全实践
- XSS 防御：对用户输入使用 DOMPurify 过滤危险内容。
- CSRF 防御：请求中携带后端生成的 CSRF Token。

六、高频原理深入题

虚拟 DOM 的 Diff 算法优化
- Vue3：通过 Block Tree 将动态节点分组，Diff 时跳过静态内容。
- Patch Flags：用二进制标记动态节点类型（如 TEXT、CLASS），减少对比范围。
nextTick 的实现原理
- 基于微任务队列（优先使用 Promise，降级到 MutationObserver 或 setTimeout）。

七、生态系统与新特性

Vue3 对 TypeScript 的支持
- defineProps 和 defineEmits 自动生成类型，无需手动定义。
- 支持在 <script setup> 中使用泛型定义组件 Props。

Vue3 的 Suspense 组件

处理异步组件加载状态，展示加载中的占位内容：

<Suspense>  
  <template #default><AsyncComponent /></template>  
  <template #fallback><LoadingSpinner /></template>  
</Suspense>

Vue3 的 CSS 新特性
- 在 CSS 中直接使用 JavaScript 变量：
```
.text { color: v-bind(themeColor); }  
```

八、代码手写题

实现简易版 reactive

function reactive(obj) {  
  return new Proxy(obj, {  
    get(target, key) {  
      console.log('读取:', key);  
      return Reflect.get(target, key);  
    },  
    set(target, key, value) {  
      console.log('更新:', key);  
      return Reflect.set(target, key, value);  
    }  
  });  
}

自定义指令：图片懒加载

app.directive('lazy', {  
  mounted(el, binding) {  
    const observer = new IntersectionObserver((entries) => {  
      if (entries[0].isIntersecting) {  
        el.src = binding.value; // 图片进入视口时加载  
        observer.unobserve(el);  
      }  
    });  
    observer.observe(el);  
  }  
});