vue3 setup笔记

  1. setup()接受两个参数:propscontext
    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
    }
}
  1. setup生命周期:
    setup函数在其他选项组件之前被调用,包括beforeCreate。 在setup里面可以调用的生命周期函数有
    onBeforeMount, onMonuted, onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated

这些生命周期钩子注册函数只能在 setup() 期间同步使用,因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。在没有当前活动实例的情况下,调用它们将会出错。

组件实例的上下文也是在生命周期钩子的同步执行期间设置的,因此,在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除

  1. 在setup()中this并不指向组件实例,那么在setup中获取当前组件实例需要通过:
    import { getCurrentInstance } from ‘vue’
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值