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

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

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

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

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

<script setup >
// script标签上写setup属性，不需要export  default  {} setup() 都可以省
import {ref} from 'vue'

    //组合式api
    //创建响应式数据age，初始值是10
    const 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，初始值是10
    const age=ref(10)
    const sname=ref('zs')
    //修改年龄的方法

    const increase=()=>{
      age.value++
    }
    //模板需要用的数据或方法，需要 return

    return {
      age,
      increase,
      sname
    }
  }
}
</script>

<template>
<div>hello,world</div>
<p>年龄{
  { age }}</p>
<p>姓名：{
  { sname }}</p>
<button @click="increase">年龄+1</button>
</template>

<style scoped>

</style>