我要招人

前端/移动开发面试题更新 2026-08-05

请解释 Vue 中 v-if、v-show 与 v-html 这三个内置指令各自的实现机制，以及它们在运行时表现上的主要差异。

前端/移动开发安全意识技术原理方案权衡Vue

考察说明

考查候选人对 Vue 常用指令底层机制与适用场景的区分能力。

回答思路

  1. 【回答框架 1】Vue 的指令是编译期标记，在模板编译阶段生成渲染函数，运行时通过虚拟 DOM 的 patch 过程执行对应的更新逻辑。v-if、v-show 和 v-html 在编译后会生成不同的代码分支和更新函数。
  2. 【回答框架 2】v-if 是真正的条件渲染，通过 createElement 或注解方式控制元素是否存在虚拟 DOM 中。当条件变化时，编译后的 render 函数会执行元素的新增或移除，同时触发组件的创建或销毁，因此会执行组件的生命周期钩子，而不会保留元素状态。
  3. 【回答框架 3】v-show 总是渲染元素，通过绑定 style 属性中的 display 值来实现显示或隐藏。编译后生成一个静态的 vnode，在更新函数中根据条件的真假切换 display 为 none 或其他值。因此元素始终保留在 DOM 中，其组件状态和事件绑定都会保留。
  4. 【回答框架 4】v-html 将绑定值作为 HTML 字符串插入元素内部，编译后生成一个包含 innerHTML 属性或类似机制的更新。使用 v-html 会覆盖元素原有的内容，并且由于浏览器解析 HTML，其中包含的标签和事件会被执行，存在 XSS 风险。需要注意 v-html 不会进行 HTML 转义，应避免用在用户输入上。
  5. 【回答框架 5】总结三者差异：v-if 条件变化开销大，适合低频率切换；v-show 初始渲染开销大，但切换仅修改样式，适合高频切换；v-html 直接替换 DOM 内容，不适合用户可控数据。
  6. 【关键点 1】v-if 通过条件判断控制元素的创建或销毁，每次切换都会执行销毁和挂载过程，成本较高。
  7. 【关键点 2】v-show 通过切换 CSS 样式控制显示隐藏，元素保留在 DOM 中，初始渲染消耗高但切换成本低。
  8. 【关键点 3】v-html 将字符串作为 HTML 解析并插入元素内部，可能引发 XSS 攻击，应仅用于可信内容。
  9. 【关键点 4】三者编译后的代码结构不同，v-if 存在模板编译分支，v-show 包含样式绑定，v-html 包含 HTML 赋值逻辑。
  10. 【关键点 5】选择依据：需要频繁切换用 v-show，条件在生命周期内很少变化用 v-if，必须渲染 HTML 且内容可信时才用 v-html。
  11. 【易错点 1】错误认为 v-show 只是依赖 display: none，实际上它会在需要时移除或设置其他 display 值（如 flex），而不仅仅是 none。
  12. 【易错点 2】将 v-if 与 v-for 同时使用在同一元素上，会导致 v-if 无法访问 v-for 的变量，且优先级关系可能造成性能问题，最好使用计算属性或避免直接连用。
  13. 【易错点 3】v-html 会替换元素内部原有内容，如果绑定值中包含 script 标签则可能被解析执行，增加安全风险，需严格校验输入。