Vue2 和 Vue3 View

Vue2 和 Vue3 面试题总结

1. MVVM 和 MVC 的区别
   MVVM（Model-View-ViewModel）：

双向数据绑定：View 和 Model 通过 ViewModel 自动同步。
核心：数据驱动视图，ViewModel 负责处理业务逻辑和数据处理。
优点：解耦 View 和 Model，便于测试和维护。
MVC（Model-View-Controller）：

单向通信：View 通过 Controller 操作 Model，Model 变化后通知 View 更新。
缺点：View 和 Model 未完全解耦，Controller 可能变得臃肿。
2. Vue2 和 Vue3 的主要区别
特性 Vue2 Vue3
响应式原理 Object.defineProperty Proxy
组合式 API Options API Composition API
生命周期 传统钩子（如 created） setup + onMounted 等
性能优化 虚拟 DOM 全量对比 静态标记 + Block Tree
新组件 无 Fragment、Teleport、Suspense
3. Vue3 的优势
性能更好：Proxy 响应式、编译优化（Block Tree）。
组合式 API：逻辑复用更灵活（类似 React Hooks）。
更好的 TS 支持：类型推断更完善。
体积更小：Tree-shaking 优化。
新特性：Teleport（传送门）、Suspense（异步组件加载状态）。
4. 响应式原理
Vue2：

对象：Object.defineProperty 劫持属性。
数组：重写数组方法（如 push、pop）。
缺点：无法检测新增/删除属性，需用 $set。
Vue3：

使用 Proxy 代理整个对象，支持动态属性。
使用 Reflect 操作源对象。
优点：支持 Map/Set，性能更高。
5. Composition API vs Options API
Composition API：

逻辑按功能组织，代码复用更灵活（如自定义 Hook）。

更好的 TypeScript 支持。

示例：

javascript

setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
return { count, double };
}
Options API：

传统方式（data、methods 分块）。
适合简单场景。
6. 常用 API
响应式数据：

ref：基本类型（通过 .value 访问）。
reactive：对象类型。
toRefs：解构响应式对象不丢失响应性。
生命周期：

setup 替代 beforeCreate/created。
onMounted、onUpdated 等。
工具函数：

watch/watchEffect：监听数据变化。
provide/inject：跨组件通信。
7. 常见问题
v-if 和 v-for 优先级：

Vue2：v-for 优先。
Vue3：v-if 优先。
动态组件：

vue

状态管理：

Vue3 推荐 Pinia（替代 Vuex），更简洁。
8. 代码优化
script setup 语法糖：

自动注册组件，无需 return。

示例：

vue

性能优化：

shallowRef/shallowReactive：浅层响应式。
markRaw：跳过 Proxy 代理（如组件实例）。
9. 新组件
Teleport：将组件渲染到 DOM 任意位置。

vue

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

vue