理论:
-
setup
是一个新的组件选项,作为组件中使用组合API的起点。 -
从组件生命周期来看,它的执行在组件实例创建之前,
vue2.x
的beforeCreate
执行。 -
这就意味着
setup
函数中this
还不是组件实例,this
此时是undefined
-
在模板中需要使用的数据和函数,需要在
setup
返回。 -
这是个很重要的生命周期函数。
验证它的触发时机:
export default ({
name: 'App',
setup () {
// 触发时机在beforCreate/created生命周期之前
// Vue3中beforCreate/created生命周期函数已经废弃了,其实是已经被setup替代了
// 所以说这时无法访问this,因为组件实例此时尚未创建
console.log(this)
}
})
模板中需要使用的数据和函数,需要在setup
返回。
export default ({
name: 'App',
setup () {
// 触发时机在beforCreate/created生命周期之前
// Vue3中beforCreate/created生命周期函数已经废弃了,其实是已经被setup替代了
// 所以说这时无法访问this,因为组件实例此时尚未创建
// console.log(this)
// 这里返回的数据用于给模板使用:类似于之前data中提供的数据
return {
msg: 'hello'
}
}
})
Vue3中依然可以使用data中的数据,但是不建议用,因为data的写法是选项API类型,但是Vue3的风格类型是推荐使用符合API类型的,但是它也是可以用的。
setup
中还可以使用方法,同样需要return
当键和值相同时,可以简写成一个值(ES6语法规范)
<template>
<div>
<div>setup函数用法</div>
<button @click="handleClick">点击</button>
<hr>
</div>
</template>
export default ({
name: 'App',
setup () {
const handleClick = () => {
console.log(123)
}
// 这里返回的数据用于给模板使用:类似于之前data中提供的数据
return {
handleClick
}
}
})
总结:
-
1.
setup
是实现组合API的基础。 -
2.它触发的时机在
beforeCreate
之前 -
3.Vue3中
beforeCreate/created
生命周期函数已经被废弃了,其实已经被setup
替代了 -
4.
setup
中无法访问this,因为组件实例此时尚未创建 -
5.
setup
的返回值用于给模板提供数据和方法