Vue 概述与版本演进
Vue 是一个渐进式 JavaScript 框架。从 2013 年诞生,到 2016 年发布 2.0,再到 2020 年 9 月推出 3.0(代号海贼王),以及 2021 年 8 月的 3.2 版本引入 <script setup> 语法糖。
Vue 3 核心新特性
- 组合式 API (Composition API):相比选项式 API,更贴近原生 JS 逻辑,方便封装和复用逻辑。
- Script Setup 语法糖:在单文件组件中直接编写脚本,无需显式定义 setup 函数。
- Teleport 组件:允许将模板的一部分'传送'到 DOM 结构的其他位置。
- Fragments 片段:正式支持多根节点的组件。
- Emits 选项:用于声明组件触发的自定义事件,
.native修饰符已移除。 - Suspense:实验性异步依赖处理组件。
- CSS 变量绑定:在
<style>中使用v-bind实现状态驱动的 CSS 变量。
常用指令与语法
基础指令对比
- 插值表达式
{{}}:JS 环境,支持三元运算符、拼接等。 - v-text / v-html:覆盖元素内容,注意 XSS 风险。
- v-cloak / v-pre / v-once:开发阶段优化或特殊场景使用,生产环境较少见。
- v-bind (
:):动态绑定属性,减少 DOM 操作。 - v-on (
@):事件监听。建议函数名以on开头,在 methods 中定义,配合事件修饰符(stop, prevent)及系统/键盘修饰符。 - v-for:遍历数组、对象或数字。
key的作用至关重要,底层 Diff 算法通过 key 决定节点是替换、更新还是删除,避免 Bug 并提升性能。 - v-if / v-show:
- 区别:
v-if控制 DOM 的创建与销毁(惰性渲染);v-show仅切换 CSSdisplay属性。 - 选择:频繁切换用
v-show(如 Tab 切换、弹窗);条件很少变用v-if。 - 优先级:Vue 2 中
v-for优先;Vue 3 中v-if优先于v-for,以减少不必要的渲染。
- 区别:
v-model 原理
它是 :value 和 @input 的语法糖。在 Vue 3 组件上使用时,默认 prop 为 modelValue,事件为 update:modelValue。
类与样式绑定
- Class:支持字符串、对象
{class: bool}、数组[str1, str2]。 - Style:支持对象
{cssProp: value}。 - :Tab 切换、菜单高亮、动态字体颜色等。


