vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！
1、如何使用setup语法糖
只需在 script 标签上写上 setup
代码如下（示例）：
<template></template><script setup></script><style scoped lang="less"></style>
2、data数据的使用
由于 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>
3、method方法的使用
<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>
4、watchEffect的使用
<script setup>import {ref,watchEffect,} from 'vue'let sum = ref(0)watchEffect(()=>{const x1 = sum.valueconsole.log('watchEffect所指定的回调执行了')})</script>
5、watch的使用
<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>
6、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>
7 、props父子传值的使用
子组件代码如下（示例）：
<template><span>{{props.name}}</span></template><script setup>import {defineProps } from 'vue'// 声明propsconst 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 './child.vue'let name= ref('小叮当')</script>
8 、emit子父传值的使用
子组件代码如下（示例）：
<template><a-button @click="isOk">确定</a-button></template><script setup>import {defineEmits } from 'vue';// emitconst emit = defineEmits(['aboutExeVisible'])/*** 方法*/// 点击确定按钮const isOk = () => {emit('aboutExeVisible');}</script>父组件代码如下（示例）：<template><AdoutExe @aboutExeVisible="aboutExeHandleCancel" /></template><script setup>import {reactive} from 'vue'// 导入子组件import AdoutExe from '../components/AdoutExeCom'const data = reactive({aboutExeVisible: false, })// content组件ref// 关于系统隐藏const aboutExeHandleCancel = () => {data.aboutExeVisible = false}</script>
9、获取子组件ref变量和defineExpose暴露
即 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组件refconst content = ref('content')// 点击设置const onClickSetUp = ({key }) => {content.value.modelVisible = true}</script><style scoped lang="less"></style>
10、路由useRoute和us eRouter的使用
<script setup>import {useRoute, useRouter } from 'vue-router'// 声明const route = useRoute()const router = useRouter()// 获取queryconsole.log(route.query)// 获取paramsconsole.log(route.params)// 路由跳转router.push({path: `/index`})</script>
11、store仓库的使用
<script setup>import {useStore } from 'vuex'import {num } from '../store/index'const store = useStore(num)// 获取Vuex的stateconsole.log(store.state.number)// 获取Vuex的gettersconsole.log(store.state.getNumber)// 提交mit('fnName')// 分发actions的方法store.dispatch('fnName')</script>
12、await的支持
<script setup>import api from '../api/Api'const data = await Api.getData()console.log(data)</script>
13、provide 和 inject 祖孙传值
父组件代码如下（示例）：
<template><AdoutExe /></template><script setup>import {ref,provide } from 'vue'import AdoutExe from '@/components/AdoutExeCom'let name = ref('Jerry')// 使用provideprovide('provideState', {name,changeName: () => {name.value = '小叮当'}})</script>子组件代码如下（示例）：<script setup>import {inject } from 'vue'const provideState = inject('provideState')provideState.changeName()</script>
