setup
setup函数是作为一个新的组件选项。它作为在组件内部使用Composition API的入口。
一、调用时机
创建组件实例时,并且props初始化解析完成后,setup函数立即调用。其能够智能性地选择在beforeCreate钩子之后而在created钩子之前调用。

二、模板用法
如果setup返回的是一个对象,该对象上的属性将合并到组件模板的渲染上下文中:
请注意,setup返回的refs对象会自动展开在模板中,因此不需要写属性.value。
三、渲染函数/ JSX的用法
setup 也可以返回一个渲染函数,可以直接在同域内声明要使用的响应式状态:
需要注意的是,.value不能省略,模板template中就可以。
四、参数
setup函数接收解析后props作为其第一个参数:
请注意,props对象是响应式的 -,传入新的prop时也会跟着更新,并且watch函数可以监听到props变化。
该props对象在开发期间对于用户而言是不可变的(如果试图改变它,将发出警告)。
第二个参数提供了一个上下文对象,该对象暴露的一系列可选的属性,与之前在2.x API中this包含的属性一致:
attrs和slots是内部组件实例上相应值的代理。这样可以确保它们在更新后始终显示最新值,不必担心在对它们进行解构时,引用是过时的:
五、 this用法
setup()里面没有this。
魔法this可能带来许多诡异的事情,直接抛弃。
六、类型检查
更好支持typescript
给setup()进行传参时,为了获取类型推断,需要使用createComponent。
欢迎关注