前端面试题集锦

简版速记

jQuery vs 框架：jQuery 直接操作 DOM（命令式）；框架数据驱动视图（声明式），DOM 操作被封装。
MVC：Model—View—Controller，Controller 负责逻辑，View 与 Model 耦合度较高。
MVVM：Model—View—ViewModel；ViewModel 双向绑定 View 与 Model，View 变化自动同步 Model，反之亦然。
ViewModel 的价值：前端场景下真正将数据与视图解耦，开发者只操作数据，不手写 DOM。
MVVM 三大要素：① 响应式（监听 data 变化）② 模板引擎（解析指令、插值）③ 渲染（模板 → render 函数 → vnode → DOM）。
响应式原理（Vue 2）：Object.defineProperty 劫持每个属性的 getter/setter；getter 收集依赖，setter 触发更新。
为何先监听 get 再监听 set：只有被 render 函数访问过（触发 get）的属性才需要订阅更新，避免无谓重渲染。
模板编译流程：template 字符串 → compiler 编译 → render 函数 → 执行得到 vnode → patch 到真实 DOM。
Vue 整体渲染四步：① 解析模板成 render 函数 → ② 响应式监听 data → ③ 首次渲染并收集依赖 → ④ data 变化触发 rerender（vdom diff + patch）。

一、说一下使用 jquery 和使用框架的区别

1.1 jQuery 实现 todo-list

1.2 vue 实现 todo-list

1.3 jQuery 和框架的区别

数据和视图的分离，解耦（开放封闭原则）
以数据驱动视图，只关心数据变化，DOM 操作被封装

二、说一下对 MVVM 的理解

2.1 MVC

M - Model 数据
V - View 视图、界面
C - Controller 控制器、逻辑处理

2.2 MVVM

Model - 模型、数据
View - 视图、模板（视图和模型是分离的）
ViewModel - 连接 Model 和 View

2.3 关于 ViewModel

MVVM 不算是一种创新
但其中的 ViewModel 确实是一种创新
真正结合前端场景应用的创建

2.4 MVVM 框架的三大要素

响应式：vue如何监听到 data 的每个属性变化？
模板引擎：vue 的模板如何被解析，指令如何处理？
渲染：vue 的模板如何被渲染成 html ？以及渲染过程

三、vue 中如何实现响应式

3.1 什么是响应式

修改 data 属性之后，vue 立刻监听到
data 属性被代理到 vm 上

3.2 Object.defineProperty

补充（现代做法）：Vue 3 已将响应式底层从 Object.defineProperty 替换为 Proxy。Proxy 拦截整个对象（而非逐属性劫持），天然支持数组下标变更、新增属性、delete 操作，无需 Vue.set / $set，性能也更好。面试时可主动提及这一演进。