请阐述 Vue 框架的核心工作机制，包括其响应式系统的实现方式、模板编译的过程以及虚拟 DOM 的作用。
考察说明
考察对 Vue 内部核心原理的理解，包括响应式、编译和渲染机制。
回答思路
- 【回答框架 1】Vue 的核心原理包括响应式系统、模板编译和虚拟 DOM。响应式系统通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）拦截数据访问和修改，建立依赖收集与派发更新的机制。
- 【回答框架 2】模板编译将 template 字符串解析为 AST，再生成渲染函数。渲染函数执行时生成虚拟 DOM 树，通过 diff 算法对比新旧虚拟 DOM，最小化更新真实 DOM。
- 【回答框架 3】虚拟 DOM 是一个轻量的 JavaScript 对象，描述真实 DOM 结构。在数据变化时，Vue 重新执行渲染函数生成新的虚拟 DOM，并与旧虚拟 DOM 进行 diff，计算出需要更新的节点，最后批量更新真实 DOM，提升性能。
- 【关键点 1】Vue 2 使用 Object.defineProperty 实现响应式，Vue 3 使用 Proxy 并支持 WeakMap 缓存。
- 【关键点 2】模板编译过程：template -> AST -> render 函数。
- 【关键点 3】虚拟 DOM 通过 diff 算法减少不必要的 DOM 操作。
- 【关键点 4】依赖收集发生在 getter 中，派发更新在 setter 中触发。
- 【易错点 1】Object.defineProperty 无法监听新增属性和数组索引变化，Vue 2 需要额外处理。
- 【易错点 2】虚拟 DOM 并不总是比直接操作 DOM 更快，其优势在于保证跨平台和可维护性。