compileroptions仅影响模板编译阶段，决定ast解析、优化及渲染函数生成，不影响后续虚拟dom更新；生效需使用含编译器的构建版本，纯render函数或中无效。

Vue.js 渲染流水线中，编译器选项（compilerOptions）只影响“模板 → 渲染函数”这一阶段，不参与后续的虚拟 DOM 创建、diff 或 DOM 更新过程。

作用范围：仅限模板编译阶段

编译器选项是传递给模板编译器的配置参数，仅在构建时（或运行时动态编译时）生效。它决定 AST 如何解析、优化和生成渲染函数代码，例如是否保留空白、是否启用静态提升、如何处理插值分隔符等。一旦渲染函数生成完毕，这些选项就不再起作用。

• 影响解析行为：如 delimiters 修改插值符号（{{ }} → {!! !!}），会改变模板字符串的词法识别结果
• 影响 AST 优化策略：如 hoistStatic（默认开启）控制静态节点是否被提升为常量，直接影响生成函数的结构和执行效率
• 影响代码生成细节：如 prefixIdentifiers 决定是否对变量加前缀（用于作用域安全），关系到渲染函数能否在严格模式下运行

不作用于运行时环节

编译完成后，渲染函数作为纯 JavaScript 函数被调用，其执行完全由 Vue 运行时（runtime）接管。此时：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

• 数据响应式、依赖追踪、patch 算法、vnode diff、DOM 操作等均由 runtime 控制，与 compilerOptions 无关
• 补丁标志（Patch Flags）虽由编译器注入，但只是生成函数中的常量标记，运行时据此跳过比对逻辑，但标记本身不可在运行时修改
• compilerOptions 不影响 render() 函数内部的逻辑、slot 分发、props 解析或生命周期钩子行为

生效前提：必须使用含编译器的构建版本

只有当应用实际触发模板编译时，compilerOptions 才会被读取：

• 在 .vue 单文件组件中，通过 vue-loader 预编译，此时 compilerOptions 可通过 vue.config.js 的 configureWebpack.chainWebpack 或 compilerOptions 选项传入
• 在运行时使用 template 选项（如 new Vue({ template: '...' })），需搭配完整版 Vue（Runtime + Compiler），且选项需通过 Vue.compile() 显式传入或全局配置
• 若项目只用 render 函数或 SFC 中的 <script setup></script>，则根本不走模板编译流程，compilerOptions 完全无效

常见配置及其实际效果示例

以下配置均在编译阶段生效，可直接观察生成的渲染函数代码验证：

• preserveWhitespace: false → 移除模板中无意义的文本节点（如换行、缩进空格），减少 vnode 数量
• whitespace: 'condense'（Vue 3.4+）→ 更激进地压缩空白，适合对包体积敏感的场景
• isCustomElement: tag => tag.startsWith('x-') → 告知编译器哪些标签应作为原生自定义元素保留，不进行组件解析
• cacheHandlers: true（Vue 3.4+）→ 对事件处理器做缓存，避免每次渲染都新建函数实例

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！