Henry's Log.

搜尋文章

前端面试 P081：StrictMode 的检查与版本边界JavaScript 函数传参：值传递与对象引用前端面试 P018：手写柯里化与参数个数边界前端面试 P010：普通函数、箭头函数与 this前端面试 P088：Immer 草稿与结构共享前端面试 P006：对象遍历与属性键的选择前端面试 P009：执行上下文、调用栈与词法作用域前端面试 P094：SSE 分片解码与事件边界前端面试 P097：请求并发池、任务启动与失败释放前端面试 P076：Fiber 的协作调度与不可中断边界前端面试 P013：节流、防抖与取消待执行任务前端面试 P033：Object.create、描述符与共享属性前端面试 P057：Vue Router 配置、历史模式与导航前端面试 P030：构造函数与 new 的返回规则前端面试 P077：key、组件身份与状态重置前端面试 P039：同源策略、CORS 与请求是否发出前端面试 P032：instanceof、原型链与自定义判断前端面试 P047：Proxy 与 Vue 2 属性拦截的区别前端面试 P019：函数组合与同步数据管道前端面试 P004：手写深拷贝、循环引用与实现边界前端面试 P059：导航守卫、顺序与权限边界前端面试 P083：函数式更新、队列与纯度前端面试 P014：call、apply、bind 与模拟实现边界前端面试 P012：高阶函数、柯里化与部分应用前端面试 P041：事件委托、目标匹配与 React 事件前端面试 P048：track、trigger、动态依赖与清理前端面试 P066：自定义指令与 DOM 资源清理前端面试 P075：props 只读、状态归属与派生数据前端面试 P062：Pinia 创建、实例范围与使用前端面试 P073：JSX 编译、React 元素与表达式前端面试 P026：Promise 延迟与顺序任务队列前端面试 P016：纯函数、副作用与参数共享前端面试 P094：流式文本的 SSE 与 WebSocket 取舍前端面试 P064：storeToRefs 与 action 解构纠错前端面试 P044：Composition API 与组合式函数前端面试 P051：副作用清理与过期请求前端面试 P021：事件循环、微任务与渲染机会前端面试 P003：原始值、对象共享与赋值行为前端面试 P098：用户偏好存储、TTL 与命名空间前端面试 P056：插槽作用域与 slot props前端面试 P011：闭包、变量绑定与循环回调前端面试 P027：async 错误处理与 return await前端面试 P036：CSP、nonce 与防护边界前端面试 P007：隐式转换、ToPrimitive 与空数组比较前端面试 P035：继承方式对照与寄生组合式继承前端面试 P025：手写 Promise 的最小状态机前端面试 P079：受控表单与非受控输入前端面试 P072：虚拟 DOM 的价值与性能边界前端面试 P005：数组方法、可变性与回调副作用前端面试 P100：Proxy 沙箱为何不是安全边界前端面试 P040：发布订阅、事件总线与退订前端面试 P053：props、组件事件与 v-model 约定前端面试 P008：相等比较、NaN 与 Object.is前端面试 P065：Pinia 最小变更与对象替换的取舍前端面试 P087：Redux 单向数据流与状态边界前端面试 P002：数据类型与 typeof 的陷阱前端面试 P085：useReducer 与 useState 的实际取舍前端面试 P078：React 合成事件与旧事件池纠错前端面试 P025：Promise 解析过程与实现验收前端面试 P043：Vue 渐进式与声明式 UI前端面试 P091：SWR、TanStack Query 与服务端缓存前端面试 P074：函数组件快照与类实例的输出纠错前端面试 P071：UI 是状态映射与渲染纯度前端面试 P054：provide、inject 与跨层级依赖前端面试 P061：何时引入全局状态管理前端面试 P097：请求去重、缓存键与过期策略前端面试 P086：Context 拆分与订阅更新边界前端面试 P024：Promise 并发组合与空输入边界前端面试 P089：Redux middleware、next 与异步返回值前端面试 P022：Promise 状态、链式调用与错误传播前端面试 P084：状态提升、单一来源与范围选择前端面试 P034：class、super 与语法糖的边界前端面试 P058：路由参数、query 与组件 props前端面试 P020：定时器延迟、轮询重叠与清理前端面试 P029：对象原型、prototype 与属性查找前端面试 P095：AI SDK、编排框架与生成 UI 工具前端面试 P092：Signals、细粒度依赖与 React 集成边界前端面试 P046：Vue 响应式陷阱与 ref 自动解包纠错前端面试 P090：Zustand、Jotai 与状态作用域前端面试 P100：微前端 JS 隔离方案与资源生命周期前端面试课程：学习目录与纠错记录前端面试 P023：async、await、异步恢复与并发前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别前端面试 P015：IIFE、作用域隔离与现代模块前端面试 P063：Pinia 状态、getter 与 action前端面试 P052：Vue 条件、列表与表单指令前端面试 P050：Vue 生命周期、DOM 时机与 SSR前端面试 P060：路由 meta、合并与界面配置前端面试 P045：ref、reactive、computed 与 watch前端面试 P096：令牌无感刷新、重试与安全边界前端面试 P093：MCP 架构与前端集成场景前端面试 P080：组合、children 与自定义 Hook前端面试 P082：useState 更新请求、快照与批处理前端面试 P067：Vue 模板编译与运行时边界前端面试 P031：手写 new 与 Reflect.construct 的区别前端面试 P069：nextTick 等待 DOM 刷新与绘制的区别前端面试 P055：默认插槽、具名插槽与内容接口前端面试 P038：嵌套定时器的最小延迟与调度选择前端面试 P099：倒计时截止时间、漂移与完成事件前端面试 P019：记忆化缓存与递归调用的纠错前端面试 P049：Vue 与 React 的更新范围和批处理前端面试 P004：浅拷贝、深拷贝与 structuredClone前端面试 P042：Vue 面试导学与学习顺序前端面试 P096：共享刷新 Promise 与并发失败恢复前端面试 P070：React 面试导学与复习主线前端面试 P028：异步输出顺序的逐步推演前端面试 P001：var、let、const 与暂时性死区前端面试 P037：内存泄漏的快照与引用链排查前端面试 P017：手写 bind、重复绑定与构造调用你好，這裡是 Henry 的自留地給想法找一個落腳的地方，也給那些解決過的問題留下一點記錄。
Esc 關閉
全部文章

前端面试 P067：Vue 模板编译与运行时边界

前端2 分鐘

目前顯示中文（中國）原文

来源：方格前端讲面试 · 25.Vue模板编译流程，7 分 02 秒。

回看定位：00:34 三个阶段 · 03:09 静态优化 · 04:20 代码生成

模板不是每次直接交给浏览器重新解析

模板经解析形成 AST，经过相应转换与优化，再生成渲染代码。渲染函数运行后描述虚拟节点，运行时再负责挂载与更新。常见单文件组件会在构建阶段预编译，生产运行时不必再次从模板源码编译。

<template>
  <section><h1>固定标题</h1><p>{{ message }}</p></section>
</template>

这个片段中固定部分与动态文本提供了不同优化机会。实际输出与 Vue/编译器版本、选项有关，不能仅看示意伪代码就声称它等同当前源码。

Vue 3 的优化不限于静态节点

静态提升或缓存、patch flag、block tree、动态属性分析等都能减少运行时工作。parse → transform → codegen 是更贴近 Vue 3 编译主线的描述；课程用独立“静态标记优化阶段”帮助入门，但忽略了其他转换。

需要纠正版本混合

视频提到通过 with(this) 生成渲染函数，这是 Vue 2 等旧模式常见形式；Vue 3 现代构建输出通常采用明确上下文与辅助函数等形式，不应把旧式 with 模板作为所有 Vue 版本的固定实现。

模板表达式也不是随意执行服务端代码的通道。不要把不可信用户内容当模板编译；HTML 字符串显示、v-html 与可信模板编译有不同的安全边界。

手写极简 parser 可能不处理完整 HTML、指令、插值和错误恢复。它适合说明 AST，不是可替换官方编译器的实现。

依据：Vue：渲染机制。关联：前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别。

#前端面试#Vue#编译#AST#render
看看其他文章 →