vue3的setup究竟有多香

哈喽大家好，我是轻疯，今天推荐vue3的setup，更好的业务功能拆分方式，让你代码更可维护。

什么是setup

setup是vue3新增的生命周期函数，setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。

setup真香

setup位于beforeCreated之前,用于代替created 和beforeCreated。不仅是作为vue3新增的生命周期函数，还可以在setup中引入外部js文件方法，可在js中共用vue全部生命周期。

哈哈，是不是和之前的mixin很像？没错，setup可以更好的拆分业务，只把需要用到的公共参数和方法return出去使用，而不像mixin一样完全侵入原有vue文件，再也不用考虑参数方法重名问题了，用到哪个取哪个，引入再多js也不怕。

setup语法糖

vue3.2中新增setup语法糖，可直接在script中新增setup属性，例如:

<script setup name="manage">
import { ref, reactive, onMounted } from 'vue';
// ----------------------- 以下是emits props ----------------
const emit = defineEmits(['success', 'register']);
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});
// ----------------------- 以下是公用变量 ----------------
let detail=reactive({})
// ----------------------- 以下是暴露的方法内容 -----------------------
defineExpose({});
// ----------------------- 以下是生命周期 ----------------------------
onMounted(() => {
    getAllData()
});
// ----------------------- 以下是业务内容 ----------------------------
async function getDetail(){}
</script>

文章创作灵感来自：1024创新实验室清风