前端必学Vue3 组合式 API 的基础 —— setup

本文链接：https://blog.youkuaiyun.com/python2021_7/article/details/123536684

本文详细介绍了Vue3中的核心特性——组合式API，重点讨论了`setup`函数的作用、响应式系统中的`ref`和`reactive`、监听机制`watch`与`watchEffect`，以及如何在`setup`中使用Vuex。同时，文章涵盖了组件生命周期的变化和全局配置等内容，为前端开发者深入理解Vue3提供了实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、setup 是什么

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。
它是一个组件选项。

二、组合api特点

更加直观，接近原生js
按需加载
没有this，降低了耦合性，提高复用性

三、setup（）

相当于created生命周期
需要 return 返回，在模板中使用

四、ref值类型响应对象

const count = ref(5)，在setup访问count值，count.value 来访问
可以作为dom引用，const inp = ref(null)，
，inp.value.innerText

五、reactive引用类型响应式

const list = reactive(默认值)
错误： list = xxx 直接赋值破坏了引用
正确： list.push(xxx)

六、watch监听

watch("count",(nval,oval)=>{
   //执行回调函数
})

七、watchEffect监听效果

只有引用的数据变化都会执行回调函数

const stop = watchEffect(()=>{
   localStorage.setItem("count",count.value)

})

stop 用来停止监听/stop()

八、computed计算

computed(“count2”,()=>count.value*2)

computed(“age”,{
get(){ return count.value},
set(v){count.value = v}
})

九、生命周期

没有created，在原有生命周期添加on
onBeforeMount，挂载前
onMounted，挂载完毕
onBeforeUpdate，更新前
onUpdated，更新完毕
onUnMount，卸载前
onUnMounted，卸载完毕

十、全局配置

app.config.globalProperties.xxx = yyy

十一、getCurrentInstance获取当前实例

不推荐使用(this)

const app  =getCurrentInstace().appContext

const xxx = app.config.globalPropertites.xxx，获取到全局的而方法

十二、setup使用vuex

import {useRouter,useRoute} from 'vue-router'

const router = useRouter();
const route = useRoute()
等同于this.$router 和this.$route

十三、setup(props,context)参数

props 传入参数（响应式）
context（1.attrs 属性 2.emit 事件发送器（同 $e m i t ） 3 . s l o t s 插槽同$ slots4.expose 暴露数据）