小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
简单来说就是将界面中重复的部分连同其功能一起提取为可重用的代码段。 比如在某一个大型应用中，实现某一个功能的模块逻辑可能是这样的，其中逻辑关注点按颜色进行分组：
这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
而组合式API遍可以解决这个问题，能够将同一个逻辑关注点相关代码收集在一起。这个重要的改变就是 setup。
setup组件选项
新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。
我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
setup函数中可以注册生命周期，侦听器，计算属性等。在setup函数中声明的变量和方法我们想使用的话需要return出去。
import { ref, reactive } from 'vue';//引入为了声明变量
setup(){
// 声明变量：
const num=ref(0); //变量为基本类型数据
const obj=reactive({age:20})//变量为引入类型，对象或数组
onMounted(changeObj)//在mounted生命周期中调用changeObj
watch(shalowObj, (newValue, oldValue) => { console.log('侦听到了shalowObj变化'); }) // 侦听器
const computedCount =computed(() => num.value * 2)// 计算属性
return {
// 需要什么返回什么就好了
num,
obj
}
}
setup执行时机
-
beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好
-
Created：表示组件刚刚被创建出来，并且组件的data和methods已经初始化好
注意：
由于在执行setup函数的时候，还没有执行Created生命周期方法。在
setup中你应该避免使用this，因为它不会找到组件实例。setup的调用发生在dataproperty、computedproperty 或methods被解析之前，所以它们无法在setup中被获取。在setup函数中，是无法使用data的methods的。vue为了避免我们错误的使用，直接将setup函数中this修改成了undefined。setup函数只能是同步的不能是异步的
题外话：setup语法糖
可能有同学发现了在一些项目中发现了新的写法：
<template>
<HelloWorld msg="Hello Vue 3 + Vite" />
<h1 @click="test">{{ msg }}</h1>
<p>{{count}}</p>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
defineProps({
msg: String
})
function test(){
console.log(111)
}
const count = ref(0)
...
</script>
这其实是 setup 的语法糖：引入的 HelloWorld 可以直接在 template 中使用，变量，方法等直接书写就好了。同样对提高开发效率很有帮助呢。
