vue3的setup究竟有多香

430 阅读1分钟

哈喽大家好,我是轻疯,今天推荐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创新实验室清风