前言

提示：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.value  console.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计算属性的使用
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'  // 声明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 './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和useRouter的使用
代码如下（示例）：
<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>

11、store仓库的使用
代码如下（示例）：
<script setup>  import { useStore } from 'vuex'  import { num } from '../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>

12、await的支持
setup  语法糖中可直接使用  await ，不需要写  async  ，  setup  会自动变成  async setup
代码如下（示例）：
<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')  // 使用provide  provide('provideState', {    name,    changeName: () => {      name.value = '小叮当'    }  })</script>子组件代码如下（示例）：<script setup>  import { inject } from 'vue'  const provideState = inject('provideState')
  provideState.changeName()</script>

14、Suspense
等待异步组件时渲染一些额外内容，让应用有更好的用户体验

































使用步骤： 异步引入组件 import {defineAsyncComponent} from 'vue'const Child = defineAsyncComponent(()=>import('./components/Child.vue')) 
使用Suspense包裹组件，并配置好default与 fallback
 <template><div class="app"><h3>我是App组件</h3>
<Suspense>//default：就是组件要显示的内容
<template v-slot:default><Child/></template>//fallback：就是组件没加载完全的“备胎”
<template v-slot:fallback><h3>加载中.....</h3>
</template></Suspense></div>

 
15 Teleport(瞬移组件)
teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。


如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
使用 Teleport 就可以方便的解决组件间 css 层级问题


我们将模态内容包装在 teleport 组件中，还需要指定一个 to 属性，为该属性分配一个查询选择器，以标识目标元素。
看下最后页面

代码文件：





















































<template>  <div>    <button @click="modalOpen = true">弹出一个模态框</button>
    <teleport to="body">      <div v-if="modalOpen" class="modal">        <div>          这是一个弹框，挂载在 body 元素上。          <button @click="modalOpen = false">关闭</button>        </div>      </div>    </teleport>
  </div></template><script lang="ts">import { defineComponent, ref } from "vue";
export default defineComponent({  setup() {    const modalOpen = ref(false);
    return { modalOpen };  },});</script><style scoped>.modal {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: rgba(0, 0, 0, 0.5);  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}.modal div {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-around;  background-color: white;  width: 350px;  height: 300px;  padding: 5px;}</style>


16 fragment
vue2时，组件的模板结构中出现多个标签时，需要使用根标签。
vue3时，组件的模板结构中出现多个标签时，可以不用根标签。这是因为vue3会自动将多个标签用fragment包裹


































import { createApp } from 'vue'import App from './App.vue'
createApp(App).mount('#app')
// App.vue文件<template>  <h2>当前和值为{{sum}}</h2>  <h2>这台{{brand}}的售价是{{price}}</h2></template>
<script>import { ref,reactive,toRefs} from 'vue';
export default {  name:"App",  setup(){    let sum = ref(0);    let car = reactive({      brand:"BYD",      price:"30W"    })        return {      sum,      ...toRefs(car)    }  }
}</script>


总结
以上就是我今天与你分享的全部内容，希望对你有所帮助，如果你觉得有用的话，请记得点赞我，分享我，并将它分享给你身边做开发的朋友，也许能够帮助到他。