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

最新推荐文章于 2024-04-27 17:00:41 发布

诗霖雪

最新推荐文章于 2024-04-27 17:00:41 发布

阅读量719

点赞数 7

分类专栏： vue笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_56713342/article/details/135757218

版权

vue笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章介绍了Vue3中的新特性`<scriptsetup>`标签的使用，包括其语法糖形式（简化导入和返回）和非语法糖形式（需要明确返回对象）。对比了两种方式在创建响应式数据和组件交互上的差异。

摘要由CSDN通过智能技术生成

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>