知识库

Appearance

Vue3 组合式 API ​

Composition API · <script setup> · 修饰符 · SSR

一、Composition API vs Options API ​

  • Options API：按 data/methods/computed/watch 等选项组织，组件变大后碎片化难维护
  • Composition API：按逻辑功能组织代码，一个功能相关的所有 API 放在一起（高内聚低耦合）
  • 逻辑复用：Vue2 用 mixin（命名冲突、数据来源不清晰），Vue3 用组合函数（数据来源清晰、无冲突）
  • setup() 相当于 beforeCreate + created，只执行一次

二、<script setup> 语法糖 ​

  • 声明的变量/函数直接在 template 中使用，无需 return
  • import 的组件直接在 template 中使用，无需 components 注册

编译器宏（无需 import）：

宏作用
defineProps声明接收的 props
defineEmits声明可触发的事件
defineExpose显式暴露数据给父组件 ref 访问
withDefaults为 defineProps 设置默认值

defineExpose 示例：

vue
<!-- 子组件 -->
<script setup>
const state = reactive({ name: 'Jerry' })
defineExpose({ ...toRefs(state), changeName: () => { state.name = 'Tom' } })
</script>

<!-- 父组件 -->
<script setup>
const childRef = ref()
nextTick(() => { childRef.value.changeName() })
</script>

三、Vue3 修饰符 ​

  • 表单：.lazy（change 时同步）、.number（转数值）、.trim（去首尾空白）
  • 事件：.stop（阻止冒泡）、.prevent（阻止默认行为）、.once（只触发一次）、.passive（不阻止默认，提升滚动性能）

四、Vue SSR 渲染 ​

  • 优势：更好的 SEO（爬虫可直接抓取完整页面）、更快的内容到达时间
  • 每次请求创建新 Vue 实例（避免单例模式交叉污染）
  • 首屏异步数据在服务端预渲染，切换组件通过 mixin 在 beforeMount 获取

相关 ​