在Vue3中中我们定义数据项和函数时,一般采用setup函数,可以使用data,但是一般b不建议使用,因为使用setup函数更符合组合API的语法规范
setup函数的使用细节:
(1)setup是一个新的组件选项,作为组件中使用组合API的起点
(2)从组件生命周期来看,它的执行在组件实例创建之前Vue2的beforeCreate执行
(3)这就意味着在setup函数中this还不是组件实例,this此时是undefined
(4)在模板中需要使用的数据和函数,需要在setup中返回
具体代码演示:
<template>
<div>{{ msg }}</div>
<button @click="hClick">点击</button>
<router-view />
</template>
<script>
export default {
name: 'App',
setup() {
const hClick = () => {
console.log('click')
}
console.log(this) // undefined
return {
msg: 'hello',
hClick
}
}
}
</script>
<style lang="less"></style>