- setup()接受两个参数:props 和 context
props是外部传参,响应式数据,如果需要解构使用toRefs()可以保持响应特性
context是js对象,非响应式数据,可以直接解构使用,包含attrs/emit/expose/slots
setup内返回的参数暴露给模板,可以直接被methods内定义的方法和外面的生命周期函数获取,但是不是响应数据,如果要创建响应式数据需要使用ref 或者reactive函数转变
setup(props, {attrs, emit,expose,slots}) {
/**
* attrs: 获取组件绑定的属性
* emit: 可以触发组件响应事件、
* expose: 暴露属性给父组件使用
* slots: 操作组件的插槽
*/
const {title} = toRefs(props)
return {
title
}
}
- setup生命周期:
setup函数在其他选项组件之前被调用,包括beforeCreate。 在setup里面可以调用的生命周期函数有
onBeforeMount, onMonuted, onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated
这些生命周期钩子注册函数只能在 setup() 期间同步使用,因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。在没有当前活动实例的情况下,调用它们将会出错。
组件实例的上下文也是在生命周期钩子的同步执行期间设置的,因此,在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除
- 在setup()中this并不指向组件实例,那么在setup中获取当前组件实例需要通过:
import { getCurrentInstance } from ‘vue’