Vue3setup()的非语法糖和语法糖的用法

1、setup()的语法糖的用法

script标签上写setup属性，不需要export default {} setup() 都可以省

创建每个属性或方法时也不需要return

导入某个组件时也不需要注册

<script setup >
// script标签上写setup属性，不需要export  default  {} setup() 都可以省
import {ref} from 'vue'//组合式api//创建响应式数据age，初始值是10const age=ref(10)const sname=ref('zs')//修改年龄的方法const increase=()=>{age.value++}//模板需要用的数据或方法，需要 return</script><template>
<div>hello,world</div>
<p>年龄{{ age }}</p>
<p>姓名：{{ sname }}</p>
<button @click="increase">年龄+1</button>
</template><style scoped></style>

2、setup()的非语法糖的用法

创建多个数据就要return多个数据

setup() 组合式api的入口，执行的时机比beforCreate还早

<script >
import {ref} from 'vue'
export default {setup(){//组合式api//创建响应式数据age，初始值是10const age=ref(10)const sname=ref('zs')//修改年龄的方法const increase=()=>{age.value++}//模板需要用的数据或方法，需要 returnreturn {age,increase,sname}}
}
</script><template>
<div>hello,world</div>
<p>年龄{{ age }}</p>
<p>姓名：{{ sname }}</p>
<button @click="increase">年龄+1</button>
</template><style scoped></style>