跳到主要内容

说说 Vue 内置指令

面试速答（30 秒版 TL;DR）​

  • 最常用：v-if / v-show / v-for / v-bind / v-on / v-model / v-slot
  • 其他高频：v-html、v-text、v-once、v-pre、v-cloak
  • 指令的作用：把模板语法编译成渲染函数时的控制逻辑或 DOM 操作。

常用内置指令（按类别记）​

渲染控制​

  • v-if / v-else-if / v-else：条件渲染
  • v-show：显示/隐藏（display: none）
  • v-for：列表渲染（配合 :key）

属性与事件​

  • v-bind（缩写 :）：绑定属性
  • v-on（缩写 @）：绑定事件

表单与插槽​

  • v-model：双向绑定语法糖
  • v-slot（缩写 #）：插槽（包括作用域插槽）

文本与 HTML​

  • v-text：设置文本内容（等价于 textContent）
  • v-html：设置 HTML（有 XSS 风险，必须确保内容可信或消毒）

性能与调试相关​

  • v-once：只渲染一次，后续不再更新
  • v-pre：跳过该节点及子节点的编译（原样输出）
  • v-cloak：配合 CSS 避免编译前的模板闪烁（直到 Vue 挂载后移除）

面试加分点​

  • v-html 一定要提 XSS：不可信内容必须消毒，否则就是漏洞。
  • v-for 一定要提 key 的意义：稳定复用、防止状态错位、减少无效 patch。