vue3 setup的使用

2022-01-07 22:02:43 阅读：144 来源： 互联网

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

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

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

我们知道在setup()中this并不指向组件实例，那么在setup中获取当前组件实例需要通过：
import { getCurrentInstance } from ‘vue’

标签：生命周期,setup,props,vue3,响应,实例,使用,组件
来源： https://blog.csdn.net/samscat/article/details/122367293

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 setup的使用