Vue基础教程（128）组件和组合API之setup()函数：告别996！Vue3的setup()函数让你早点下班陪猫撸狗

还记得那些年在Vue2里写组件的日子吗？你在data里定义变量，在methods里写方法，在computed里搞计算属性，整个组件像被五马分尸一样分散在各个选项里。当一个功能相关的代码分散在五六个地方，改个需求就像在玩捉迷藏，找到所有相关代码时，午休时间都结束了。

别担心，Vue3的组合式API和setup()函数就是来拯救你的！这就像从功能机升级到智能机——一旦用过，就再也回不去了。

为什么要有setup()？Options API的痛你懂我懂

先来吐槽一下Options API的几宗罪：

逻辑关注点分离？分明是分散！
想象一下，你要实现一个商品搜索功能，在Vue2中，你需要在data里定义搜索关键词、搜索结果列表，在methods里写搜索方法，在computed里搞过滤逻辑，在mounted里写初始数据加载。等产品经理让你加个搜索历史功能，你得在四个地方来回切换修改，一不小心就漏了哪个。

代码复用？mixins的坑谁用谁知道
用过mixins的同学请举手，让我看到你们的痛苦！命名冲突、数据来源不明、多个mixins之间的依赖关系像一团乱麻... 每次用mixin都像在玩俄罗斯轮盘赌，不知道什么时候就会炸。

类型支持？TS表示很委屈
在Vue2里用TypeScript，总感觉TS在委屈地说：“我本来可以帮你更多的，但这架构限制了我的发挥啊！”

这时候，Vue3的组合式API和setup()函数闪亮登场，它告诉我们：别再把代码按选项类型分类了，按功能分类不香吗？

setup()初体验：它到底是什么玩意儿？

简单说，setup()是Vue3组件中使用组合式API的入口点，它在组件创建之前执行。你可以把它理解为组件的“控制中心”——所有响应式数据、方法、计算属性都在这里定义和返回。

import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 在这里定义响应式数据
    const count = ref(0)
    
    // 在这里定义方法
    const increment = () => {
      count.value++
    }
    
    // 在这里使用生命周期
    onMounted(() => {
      console.log('组件挂载啦！')
    })
    
    // 返回模板需要用的东西
    return {
      count,
      increment
    }
  }
}

看到没？跟count相关的所有逻辑都在一起，再也不用在data和methods之间来回跳转了！

setup()的超能力：这些特性让你效率翻倍

1. 参数解析：props和context的奇妙冒险

setup接收两个参数：props和context：

setup(props, context) {
  // props是响应式的，但不能解构，否则会失去响应性
  console.log(props.title)
  
  // context包含attrs、slots、emit三个属性
  context.emit('custom-event', '你好呀')
  
  // 但你可以安全地解构context
  const { attrs, slots, emit } = context
}

重要提醒：不要直接解构props！除非你想体验响应式数据突然不响应的刺激感。如果真的想解构，请用toRefs：

import { toRefs } from 'vue'

setup(props) {
  const { title, content } = toRefs(props)
  // 现在title和content还是响应式的
}

2. 响应式系统：ref和reactive的爱恨情仇

Vue3提供了两种创建响应式数据的方式：

ref