vue3之setup的理解与使用

一、含义

①为什么要使用setup?

写一个大型组件时，逻辑关注点的列表很长，不利于维护和阅读；所以需要把一个逻辑关注点的代码收集在一起会更好，由此诞生组合式API，即vue中用到的setup。

就像我们要做卤鸡蛋，原来材料有四堆香料：八角、桂皮、香叶、茴香（data、method、computed、watch）;一样一样找太麻烦，就打包做成香料袋，一次放一个袋子（setup）就行

二、执行时机

在组件创建之前执行，即data、method、computed被解析之前，所以它们在setup中无法被获取。

setup位于created 和beforeCreated之前,用于代替created 和beforeCreated

三、两个参数，setup ( props , context )

① props : 响应式的，不能被解构，非要解构可用toRefs

② context :非响应式的，可以被解构，就是一个普通的js对象，作用是暴露其他可用的值（attrs、slots、emit、expose）

四、组件的属性

只能访问以下四种：props、attrs、slots、emit