文章摘要
这篇文章介绍了Vue3.2中新增的`setup`语法糖及其核心功能，详细讲解了如何利用语法糖简化组件开发。主要内容包括：
1. **语法糖基础**
- `setup`语法糖无需`return`声明即可直接使用，简化了Vue脚本的写法。
- `setup`支持`await`，自动变为`async setup`，提升代码的 async 执行能力。
2. **核心功能详解**
- **ref**：提供组件实例引用，支持数据持久化。
- **data**：管理组件属性数据，支持计算属性。
- **method**：绑定方法到组件实例，实现属性绑定。
- **watchEffect**：对指定属性进行回调监听，更新相应属性。
- **watch**：关注属性变化，执行回调操作。
- **computed**：计算属性，支持两种写法（简写和完整写法）。
- **props和emit**：使用`defineProps`声明组件接口，通过`emit`实现父组件与子组件的数据交互。
- **store**：管理应用状态，支持数据持久化和分发动作。
- **await和async**：结合`setup`语法糖，提升代码 async 执行效率。
- **provide和inject**：通过`provide`管理组件状态，`inject`将父组件状态注入子组件。
3. **示例代码**
文章提供多个代码示例，展示了如何利用`setup`语法糖实现实际功能，包括组件初始化、属性监听、数据计算、组件交互等。
总结来说，这篇文章通过`setup`语法糖，介绍了Vue3.2中新增的核心功能，帮助开发者更高效地构建组件，提升了代码的可读性和维护性。
目录1、如何使用setup语法糖2、data数据的使用3、method方法的使用4、watchEffect的使用5、watch的使用6、computed计算属性的使用7 、props父子传值的使用8 、emit子父传值的使用9、获取子组件ref变量和defineExpose暴露10、路由useRoute和us eRouter的使用11、store仓库的使用12、await的支持13、provide 和 inject 祖孙传值
提示：vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！
提示：以下是本篇文章正文内容，下面案例可供参考
只需在 script 标签上写上 setup 代码如下（示例）：
<template>
</template>
<script setup>
</script>
<style scoped lang=”less”>
</style>
由于 setup 不需写 return ，所以直接声明数据即可 代码如下（示例）：
<script setup>
import {
ref,
reactive,
toRefs,
} from ‘vue’
const data=reactive({
patternVisible: false,
debugVisible: false,
aboutExeVisible: false,
})
const content=ref(‘content’)
//使用toRefs解构
const { patternVisible, debugVisible, aboutExeVisible }=toRefs(data)
</script>
代码如下（示例）：
<template >
<button @click=”onClickHelp”>系统帮助</button>
</template>
<script setup>
import {reactive} from ‘vue’
const data=reactive({
aboutExeVisible: false,
})
// 点击帮助
const onClickHelp=()=> {
console.log(`系统帮助`)
data.aboutExeVisible=true
}
</script>
代码如下（示例）：
<script setup>
import {
ref,
watchEffect,
} from ‘vue’
let sum=ref(0)
watchEffect(()=>{
const x1=sum.value
console.log(‘watchEffect所指定的回调执行了’)
})
</script>
代码如下（示例）：
<script setup>
import {
reactive,
watch,
} from ‘vue’
//数据
let sum=ref(0)
let msg=ref(‘你好啊’)
let person=reactive({
name:’张三’,
age:18,
job:{
j1:{
salary:20
}
}
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
console.log(‘sum或msg变了’,newValue,oldValue)
},{immediate:true})
watch(()=>person.job,(newValue,oldValue)=>{
console.log(‘person的job变化了’,newValue,oldValue)
},{deep:true})
</script>
computed 计算属性有两种写法(简写和考虑读写的完整写法) 代码如下（示例）：
<script setup>
import {
reactive,
computed,
} from ‘vue’
//数据
let person=reactive({
firstName:’小’,
lastName:’叮当’
})
// 计算属性简写
person.fullName=computed(()=>{
return person.firstName + ‘-‘ + person.lastName
})
// 完整写法
person.fullName=computed({
get(){
return person.firstName + ‘-‘ + person.lastName
},
set(value){
const nameArr=value.split(‘-‘)
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
</script>
子组件代码如下（示例）：
<template>
<span>{{props.name}}</span>
</template>
<script setup>
import { defineProps } from ‘vue’
// 声明props
const props=defineProps({
name: {
type: String,
default: ’11’
}
})
// 或者
//const props=defineProps([‘name’])
</script>
父组件代码如下（示例）：
<template>
<child :name=’name’/>
</template>
<script setup>
import {ref} from ‘vue’
// 引入子组件
import child from ‘https://www.jb51.net/javascript/child.vue’
let name=ref(‘小叮当’)
</script>
子组件代码如下（示例）：
<template>
<a-button @click=”isOk”>
确定
</a-button>
</template>
<script setup>
import { defineEmits } from ‘vue’;
// emit
const emit=defineEmits([‘aboutExeVisible’])
// 点击确定按钮
const isOk=()=> {
emit(‘aboutExeVisible’);
}
</script>
父组件代码如下（示例）：
<template>
<AdoutExe @aboutExeVisible=”aboutExeHandleCancel” />
</template>
<script setup>
import {reactive} from ‘vue’
// 导入子组件
import AdoutExe from ‘https://www.jb51.net/components/AdoutExeCom’
const data=reactive({
aboutExeVisible: false,
})
// content组件ref
// 关于系统隐藏
const aboutExeHandleCancel=()=> {
data.aboutExeVisible=false
}
</script>
即 vue2 中的获取子组件的 ref ，直接在父组件中控制子组件方法和变量的方法
子组件代码如下（示例）：
<template>
<p>{{data }}</p>
</template>
<script setup>
import {
reactive,
toRefs
} from ‘vue’
const data=reactive({
modelVisible: false,
historyVisible: false,
reportVisible: false,
})
defineExpose({
…toRefs(data),
})
</script>
父组件代码如下（示例）：
<template>
<button @click=”onClickSetUp”>点击</button>
<Content ref=”content” />
</template>
<script setup>
import {ref} from ‘vue’
// content组件ref
const content=ref(‘content’)
// 点击设置
const onClickSetUp=({ key })=> {
content.value.modelVisible=true
}
</script>
<style scoped lang=”less”>
</style>
代码如下（示例）：
<script setup>
import { useRoute, useRouter } from ‘vue-router’
// 声明
const route=useRoute()
const router=useRouter()
// 获取query
console.log(route.query)
// 获取params
console.log(route.params)
// 路由跳转
router.push({
path: `/index`
})
</script>
代码如下（示例）：
<script setup>
import { useStore } from ‘vuex’
import { num } from ‘https://www.jb51.net/store/index’
const store=useStore(num)
// 获取Vuex的state
console.log(store.state.number)
// 获取Vuex的getters
console.log(store.state.getNumber)
// 提交mutations
store.commit(‘fnName’)
// 分发actions的方法
store.dispatch(‘fnName’)
</script>
setup 语法糖中可直接使用 await ，不需要写 async ， setup 会自动变成 async setup
代码如下（示例）：
<script setup>
import api from ‘https://www.jb51.net/api/Api’
const data=await Api.getData()
console.log(data)
</script>
父组件代码如下（示例）
<template>
<AdoutExe />
</template>
<script setup>
import { ref,provide } from ‘vue’
import AdoutExe from ‘@/components/AdoutExeCom’
let name=ref(‘Jerry’)
// 使用provide
provide(‘provideState’, {
name,
changeName: ()=> {
name.value=’小叮当’
}
})
</script>
子组件代码如下（示例）：
<script setup>
import { inject } from ‘vue’
const provideState=inject(‘provideState’)
provideState.changeName()
</script>
以上就是Vue3.2中setup语法糖的使用教程分享的详细内容，更多关于Vue setup语法糖的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:Vue3中的setup语法糖、computed函数、watch函数详解vue中setup语法糖写法实例vue3:setup语法糖使用教程vue3?使用setup语法糖实现分类管理功能一文搞懂Vue3.2中setup语法糖使用强烈推荐!Vue3.2中的setup语法糖