Vue2 和 Vue3 面试题总结--1Vue2 和 Vue3 面试题总结 1. MVVM 和 MVC 的区别 MVVM

MVVM（Model-View-ViewModel）：
- 双向数据绑定：View 和 Model 通过 ViewModel 自动同步。
- 核心：数据驱动视图，ViewModel 负责处理业务逻辑和数据处理。
- 优点：解耦 View 和 Model，便于测试和维护。
MVC（Model-View-Controller）：
- 单向通信：View 通过 Controller 操作 Model，Model 变化后通知 View 更新。
- 缺点：View 和 Model 未完全解耦，Controller 可能变得臃肿。

Vue2：
- 对象：Object.defineProperty 劫持属性。
- 数组：重写数组方法（如 push、pop）。
- 缺点：无法检测新增/删除属性，需用 $set。
Vue3：
- 使用 Proxy 代理整个对象，支持动态属性。
- 使用 Reflect 操作源对象。
- 优点：支持 Map/Set，性能更高。

Composition API：
- 逻辑按功能组织，代码复用更灵活（如自定义 Hook）。
- 更好的 TypeScript 支持。
- 示例：
  
  javascript
```
setup() {
  const count = ref(0);
  const double = computed(() => count.value * 2);
  return { count, double };
}
```
Options API：
- 传统方式（data、methods 分块）。
- 适合简单场景。

响应式数据：
- ref：基本类型（通过 .value 访问）。
- reactive：对象类型。
- toRefs：解构响应式对象不丢失响应性。
生命周期：
- setup 替代 beforeCreate/created。
- onMounted、onUpdated 等。
工具函数：
- watch/watchEffect：监听数据变化。
- provide/inject：跨组件通信。

script setup 语法糖：

示例：

vue

<script setup>
import { ref } from 'vue';
const msg = ref('Hello!');
</script>

性能优化：
- shallowRef/shallowReactive：浅层响应式。
- markRaw：跳过 Proxy 代理（如组件实例）。

Teleport：将组件渲染到 DOM 任意位置。

vue

<Teleport to="body">
  <Modal />
</Teleport>

Suspense：处理异步组件加载状态。

vue

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