2202_75345049的博客

Vue渲染过程及虚拟DOM解析 Vue的渲染过程主要包含以下步骤： 模板编译：将模板转换为AST，经过优化后生成可执行的render函数 虚拟DOM生成：通过render函数创建描述DOM结构的JavaScript对象（虚拟DOM） Diff比对：数据变化时对比新旧虚拟DOM，找出差异 真实DOM更新：仅更新变化的部分到真实DOM 虚拟DOM的核心作用： 作为真实DOM的轻量级JavaScript表示 通过批量更新减少DOM操作次数 实现跨平台能力（浏览器/小程序等） 提供高效的Diff算法优化性能 优缺点

Vue2的响应式原理核心是通过数据劫持、依赖收集和视图更新实现数据驱动视图。首先使用Object.defineProperty对数据进行递归劫持，在getter中收集依赖（Watcher实例），在setter中触发更新。当数据变化时，会通知相关Watcher执行回调函数，从而实现精准的局部更新。整个过程通过observe、Observer、defineReactive三个函数相互调用形成递归，确保嵌套对象也能被深度监听。这种机制避免了数据变化时全量更新视图的性能问题，实现了高效精准的响应式更新。