一、含义

①为什么要使用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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐