Vue3 深入 setup 配置项

jay丿

于 2025-06-30 09:20:10 发布

阅读量1k

点赞数 25

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/panpanpan233/article/details/149014948

Vue3 Composition API 核心解析：深入 setup 配置项

引言：Composition API 的设计哲学

Vue3 推出的 Composition API 彻底改变了组件开发范式，其核心目标是通过逻辑复用和更灵活的代码组织方式，解决大型项目中 Options API 面临的代码分散问题。作为 Composition API 的入口，setup 函数承载着组件逻辑的初始化使命，堪称"组合式编程的指挥中枢"。

一、setup 函数：组合式编程的基石

1.1 核心定位

setup 是 Vue3 特有的组件配置选项，其本质是一个接收 props 和 context 参数的函数：

setup(props, context) {
  // 逻辑初始化
}

执行时机：在组件实例创建阶段最先执行，早于所有生命周期钩子（包括 beforeCreate）
上下文隔离：函数内部无法访问 this，彻底告别 Options API 的隐式依赖
响应式根基：所有需要响应式处理的数据必须在此声明

1.2 返回值机制

setup 的返回值决定了模板可访问的内容：

// 返回对象模式（推荐）
return { 
  state, 
  methods,
  computedProps 
}

// 返回渲染函数模式（特殊场景）
return () => h('div', 'Hello World')

对象返回值特性：

模板可直接使用返回对象的属性/方法
返回的 ref 会自动解包（无需 .value）
保持响应式系统的完整特性

1.3 数据响应式处理

// 基础类型
const count = ref(0) // 响应式引用

// 对象类型
const state = reactive({ 
  name: '张三',
  age: 18 
}) // 深度响应式对象

// 计算属性
const doubleCount = computed(() => count.value * 2)

二、与 Options API 的协作关系

2.1 双向访问规则

访问方向	Options API → setup	setup → Options API
可访问性	❌ 不可访问	✅ 可访问
优先级	setup 优先	-

2.2 生命周期映射

import { onMounted } from 'vue'

setup() {
  onMounted(() => {
    console.log('组件挂载完成')
  })
}

所有生命周期钩子都转换为 onXxx 形式的函数调用，体现组合式API的显式声明特性。

三、语法糖：

3.1 基础语法

<script setup lang="ts">
// 顶层声明自动暴露给模板
const name = ref('张三')
const changeName = () => { 
  name.value = '李四' 
}
</script>

自动暴露：顶层绑定自动成为模板上下文
编译优化：比普通 setup 函数减少 30% 运行时开销
TypeScript 支持：原生支持类型推断和声明

3.2 组件名定义方案

通过 vite 插件实现声明式组件名：

安装插件：

npm install vite-plugin-vue-setup-extend -D

配置 vite.config.ts：

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend({
      nameSuffix: 'Component' // 可选：组件名后缀
    })
  ]
})

使用声明式命名：

<script setup lang="ts" name="UserProfile">
// 组件逻辑
</script>

四、最佳实践指南

4.1 响应式数据声明原则

基础类型：必须使用 ref
对象/数组：优先使用 reactive
解构处理：使用 toRefs 保持响应式
```
const { name, age } = toRefs(state)
```

4.2 方法声明规范

// 普通函数
const handleClick = () => {
  // 业务逻辑
}

// 带参数函数
const updateData = (newVal: string) => {
  data.value = newVal
}

4.3 类型安全实践

interface User {
  id: number
  name: string
}

const user = ref<User>({
  id: 0,
  name: ''
})

五、进阶技巧

5.1 自定义渲染函数

setup() {
  return () => h('div', {
    class: 'custom-class',
    onClick: () => console.log('Clicked')
  }, [
    h('span', 'Hello '),
    h('strong', 'World')
  ])
}

5.2 异步逻辑处理

setup() {
  const fetchData = async () => {
    const res = await api.getData()
    data.value = res.data
  }

  onMounted(fetchData)

  return { data }
}