Vue.js渲染流程中，数据预处理和编译缓存协同提升性能：前者通过initState递归响应化data，建立getter/setter与依赖收集；后者缓存模板字符串到render函数的映射，避免重复编译。
Vue.js 渲染流程中，数据预处理和编译缓存是两个独立但协同工作的环节：前者发生在响应式系统初始化阶段，负责将原始 data 转为可追踪的响应式对象；后者作用于模板编译阶段，用于避免重复解析相同模板字符串，提升首次渲染与组件复用时的性能。
数据预处理：让 data 变成“可观测”的源头
Vue 在 new Vue() 或组件实例化时，会调用 initState 对传入的 data 选项做预处理。这不是简单的赋值，而是深度响应化：
- 递归遍历 data 对象所有属性，对每个属性调用
defineReactive，使用Object.defineProperty（Vue 2）或Proxy（Vue 3）建立 getter/setter - 为每个响应式属性创建依赖收集器（Dep），并在 getter 中记录当前正在求值的 Watcher
- 对数组方法（如 push、pop）做拦截重写，确保变更能触发更新；对新增属性默认不响应，需用
Vue.set或vm.$set - 若 data 是函数，会执行它并合并返回对象，保证组件实例间数据隔离
这个过程不涉及模板，只聚焦于数据本身——它是后续 render 函数执行时能自动触发更新的前提。
编译缓存：避免反复 parse 同一 template
当使用字符串模板（如 template: '<div>{{ msg }}</div>'）或未提供 render 函数时，Vue 需在运行时将模板编译为 render 函数。这个编译过程开销较大，因此内置了基于模板字符串的缓存机制：
立即学习“前端免费学习笔记（深入）”；
- 缓存键为原始 template 字符串（含空格、换行等细节），值为编译后的 render 函数
- 缓存对象是一个 LRU（Least Recently Used）结构，限制最大条目数（默认 100），超出后淘汰最久未用项
- 仅对完整版 Vue（含编译器）生效；运行时版（如 CDN 引入的 vue.runtime.min.js）不包含此逻辑，需提前通过 vue-loader 预编译
- 同一组件多次实例化、动态
v-if切换、keep-alive缓存组件等场景，都会命中该缓存
例如：template: `<div>{{ count }}</div>` 第一次编译生成 render 函数后，后续同字符串模板直接复用，跳过 parse → optimize → generate 全流程。
二者如何配合工作
数据预处理和编译缓存不直接交互，但共同支撑高效渲染：
- 预处理后的响应式 data，是 render 函数执行时读取变量的“活水源”；没有它，模板里的
{{ msg }}就不会自动更新 - 编译缓存节省的是 render 函数生成时间；而 render 函数一旦生成，每次数据变化时都快速执行，产出新 vnode
- 两者都服务于“减少重复计算”：一个防数据监听重复建立，一个防模板解析重复执行
实际开发中，无需手动管理这两者——Vue 内部自动完成。但理解它们的存在，有助于判断性能瓶颈：若首屏慢，可能是模板复杂导致编译耗时高（可预编译或简化 template）；若响应延迟，更可能是 data 深度嵌套或大量未声明属性导致响应化负担重（可用 Object.freeze 或合理拆分 data）。
