vue3.0的setup()函数,vue3 setup 参数
本文主要介绍了Vue3中setup的执行时序和注意事项，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
设置执行时间和注意点：设置执行时间在创建之前。Vue3.0 setup()函数用法。setup()函数是在组件内部使用复合API的入口点。setup()函数返回的对象有两个属性。setup()函数可以接收两个可选参数。setup()函数接收的第二个可选参数是一个上下文对象，它与选项API一起使用。
setup执行时机与注意点
setup执行时机在beforeCreate之前
您不能在安装程序中使用数据和方法，因为它们尚未初始化。
由于数据和方法不能再在设置函数中使用，为了避免我们的错误使用，Vue直接在设置函数中将此更改为未定义。
设置只能是同步的，不能是异步的。
Vue3.0 setup()函数用法
setup()函数作为在组件内部使用组合API的入口点
setup()函数在初始属性解析之后、组件实例创建之前调用。对于组件的生命周期钩子，在beforeCreate钩子之前调用setup()函数。
如果setup()函数返回一个对象，该对象的属性将被合并到组件模板的呈现上下文中。比如：
setup() {
//为目标对象创建一个响应对象
const state=Vue.reactive((计数：0})
函数增量(){
状态.计数
}
//返回一个对象，该对象的属性可以在模板中使用。
返回{
状态，
增量
}
}
setup()函数返回的对象有两个属性
一个是响应对象(即为原对象创建的代理对象)，另一个是函数。在DOM template中，你可以在全世界范围内使用这两个属性，比如：
View @click=addClick 计数值：{{state.count}}/view
setup()函数可以接收两个可选的参数
第一个是解析道具。此参数允许您访问在props选项中定义的props，例如：
app.component(ButtonItem ，{
道具：[buttonTitle]，
设置(道具){
console.log(props.buttonTitle)
}
})
setup()函数接收的第二个可选的参数是一个context对象
这个对象是一个普通的JavaScript对象，没有响应。它可以通过使用ES6的对象解构语法来完全解构上下文。此外，它还公开了三个组件属性，例如：
常量组件={
设置(道具、上下文){
//属性(非响应对象)
console.log(context.attrs)
//slot(非响应对象)
console.log(上下文.插槽)
//发出的事件(方法)
console.log(context.emit)
}
}
当setup()和选项API一起使用
不要在setup()函数中使用它，因为在解析选项之前会调用setup()函数，并且不能在setup()函数中访问数据、计算和方法组件选项。以下代码是一个错误示例：
setup() {
函数onClick() {
Console.log(this) //不是预期的this
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。