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 和 created之间,所以在里面调用的生命周期函数排除了这两个,剩下
    onBeforeMount, onMonuted, onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, one rrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated

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

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

  1. 我们知道在setup()中this并不指向组件实例,那么在setup中获取当前组件实例需要通过:
    import { getCurrentInstance } from ‘vue’
上一篇:iLBC 技术点


下一篇:app端查看单张拍照图片的功能